Cómo crear botones de texto utilizando etiquetas de entrada y de botones en HTML

Cómo crear botones de texto utilizando etiquetas de entrada y de botones en HTML

Cómo crear botones de texto utilizando etiquetas de entrada y de botones en HTML

VALORACIÓN DEL ARTÍCULO:
5/5


Puede crear botones de texto personalizables en HTML utilizando la etiqueta . El elemento se utiliza dentro de un elemento .

Ajustando el atributo type a «botón», se generará un simple botón pulsable. Puede definir el texto que aparecerá en el botón, como «Enviar», utilizando el valor atributo.

Por ejemplo:

Tenga en cuenta que la etiqueta no enviará un formulario HTML; todavía necesitará incluir JavaScript para manejar el envío de datos del formulario. Sin un JavaScript onclick event, el botón parecerá ser clicable pero no pasará nada, y usted habrá frustrado a sus lectores.

La Alternativa de Etiqueta

Aunque usar la etiqueta de entrada para crear un botón funciona para su propósito, es una mejor opción usar la etiqueta para crear botones HTML en su sitio web. La etiqueta es más flexible porque le permite utilizar imágenes para el botón (lo que le ayuda a mantener la consistencia visual si su sitio tiene un tema de diseño), por ejemplo, y puede definirse como un botón de tipo submit o reset sin necesidad de un JavaScript adicional.

Deberá especificar el tipo de botón atributo en cualquier etiqueta . Hay tres tipos diferentes:

  • button – El botón no tiene un comportamiento inherente pero se utiliza junto con los scripts que se ejecutan en el lado del cliente y que se pueden adjuntar al botón y ejecutar cuando se hace clic en él.
  • reset – Restablece todos los valores.
  • submit – El botón envía los datos del formulario al servidor (este es el valor por defecto si no se define ningún tipo).

Otros atributos incluyen:

  • nombre – Da al botón un nombre de referencia.
  • valor – Especifica un valor que se asignará inicialmente al botón.
  • desactiva – Desactiva el botón.

HTML5 añade algunos atributos adicionales a la etiqueta que le dan más funcionalidad.

  • autofoco – Cuando la página se carga, esto especifica que este botón es el foco. Sólo se puede utilizar un enfoque automático en una página.
  • form – Asocia el botón con un formulario dentro del mismo documento HTML, usando el identificador del formulario como valor. Por ejemplo:
    • Submit
  • formaction – Se usa sólo con type=»submit» y una URL como valor, especifica dónde se enviarán los datos del formulario. Por ejemplo:
    • Enviar los datos del formulario a otra página
  • formenctype – Se usa sólo con type=»submit» attribute. Define cómo deben codificarse los datos del formulario cuando se envían al servidor. Los tres valores son application/x-www-form-urlencoded (predeterminado), multipart/form-data, y text/plain.
  • formmethod – Se usa sólo con type=»submit» attribute. Esto especifica qué método HTTP utilizar al enviar datos de formulario, ya sea obtener o post.
  • formnovalidate – Se usa sólo con type=»submit» attribute. Los datos del formulario no serán validados cuando se envíen.
  • formtarget – Se usa sólo con type=»submit» attribute. Indica dónde debe mostrarse la respuesta del sitio cuando se envían los datos del formulario, como en una nueva ventana, etc. Las opciones de valor son _blank, _self, _parent, _top, o un nombre de marco específico.

Si está usando formularios, tal vez quiera leer sobre cómo hacer botones en formularios HTML y cómo hacer que su sitio sea más fácil de usar.

TAMBIÉN TE INTERESA

Amplify-programa-de-partner-de-HP

Todo lo nuevo que te espera, si eres partner de HP

Si eres partner de HP, todo lo que vamos a contar a continuación te interesa. Si eres consumidor final de productos de esta marca, has de saber que HP es una de las compañías que más esfuerzos dedica a la hora de cuidar a sus socios. Si estos están contentos, el otro beneficiado serás tú,

dispositivo-de-traducción-Vasco-V4

Con este traductor no tendrás problemas de idioma en ningún país al que viajes

Los idiomas no deberían ser un hándicap ni para el trabajo ni para viajar. Un traductor puede soluciones todos los problemas relacionados con la falta de conocimiento de una lengua extranjera. Pero no hablamos de un traductor físico… sino uno virtual como las muchas aplicaciones que puede haber en internet. Precisamente basado en internet, hemos

televisión-marca-Amazon

¿Cuándo llegará a España la televisión de marca Amazon?

Quizás muchos consumidores no lo sepan, pero en el mercado internacional existen varios modelos de televisión de marca Amazon. Efectivamente, el gigante de ecommerce, al igual que los productos de moda, dispone de una marca propia para el segmento de las televisiones. La mala noticia es que, de momento, su mercado es limitado ya que

soluciones-de-Lenovo-para-el-trabajo-colaborativo

ThinkSmart View Plus de Lenovo, trabajo colaborativo a otro nivel

El dispositivo ThinkSmart View Plus de Lenovo redefine el concepto del trabajo colaborativo en las empresas. Ahora que muchos de los empleados de una oficina se conectan con otros mediante Micosoft Teams, Lenovo plante un dispositivo cuya única función es ofrecer servicio para el trabajo conectado. ¿Qué es y qué ofrece ThinkSmart View Plus? ThinkSmart

10-razones-para-apostar-por-Google-Ads

Google Ads o la mejor manera de gestionar la publicidad en internet para un negocio

Google Ads es una de las herramientas publicitarias más poderosas que existen en la actualidad. A través de ella, las empresas pueden llegar a un público amplio y diverso de manera efectiva, aumentar su visibilidad en línea y aumentar sus ventas. Pero ¿cómo exactamente puede Google Ads ayudar a un negocio? En este artículo, exploraremos