Array

Uso de la etiqueta de entrada HTML y la etiqueta del botón en formularios

Two young people working together in office at computer

Cree botones de texto personalizables en HTML usando la etiqueta de entrada . El elemento de entrada se usa dentro de un elemento de forma .& amp; amp; nbsp;

Al configurar el atributo & amp; amp; nbsp; type & amp; amp; nbsp; to & amp; quot; button, & amp; quot; genera un botón simple en el que se puede hacer clic. Puede definir el texto que aparecerá en el botón, como & amp; quot; Enviar, & amp; quot; utilizando el atributo & amp; amp; nbsp; valor . Por ejemplo:

Video destacado
& lt; pre & gt; & lt; / pre & gt ;

La etiqueta input will & amp; amp; nbsp; no enviar un formulario HTML; debe incluir JavaScript para manejar el envío de datos de formulario. Sin un JavaScript en click & amp; amp; nbsp; evento, el botón parecerá ser clicable pero no sucederá nada, y & amp; amp; nbsp; habrá frustrado a sus lectores.

The & amp; apos; button & amp; apos; Etiqueta alternativa

Aunque usar la etiqueta de entrada para crear un botón funciona para su propósito, es una mejor opción usar la etiqueta del botón para crear los botones HTML de su sitio web.&erio;amperio;nbsp;Los botón la etiqueta es más flexible porque le permite usar imágenes para el botón (lo que le ayuda a preservar la consistencia visual si su sitio tiene un tema de diseño) por ejemplo, y se puede definir como un tipo de botón de envío o reinicio sin necesidad de JavaScript adicional.

Especifique el botón & amp; amp; nbsp; type & amp; amp; nbsp; atributo en cualquier botón . Hay tres tipos diferentes:

  • botón : el botón no tiene un comportamiento inherente, pero se usa junto con scripts que se ejecutan en el lado del cliente que se pueden adjuntar al botón y ejecutar cuando se hace clic.
  • restablecer : restablece todos los valores.
  • enviar : el botón envía los datos del formulario al servidor & amp; amp; nbsp; (este es el valor predeterminado si no se define ningún tipo).

Otros atributos incluyen:

  • nombre : le da al botón un nombre de referencia.
  • valor : especifica un valor que se asignará inicialmente al botón.
  • deshabilitar : apaga el botón.

Yendo más lejos con botones

HTML5 agrega atributos adicionales a la etiqueta del botón que extiende su funcionalidad.& amp; amp; nbsp;

  • enfoque automático : cuando se carga la página, esta opción especifica que este botón es el foco. Solo se puede usar un enfoque automático en una página.
  • formulario : asocia el botón con un formulario específico dentro del mismo documento HTML, utilizando el identificador del formulario como valor.
  • formaction : se usa solo con type = & amp; quot; submit & amp; quot; & amp; amp; nbsp; y una URL como valor, especifica dónde se enviarán los datos del formulario. A menudo, el destino es un script PHP o algo similar
  • formenctype : se usa solo con type = & amp; quot; submit & amp; quot; & amp; amp; nbsp; atributo. Define cómo se codificarán los datos del formulario cuando se envíen al servidor. Los tres valores son & amp; amp; nbsp; application / x-www-form-urlencoded (predeterminado), & amp; amp; nbsp; multiparte / forma-datos, y (p; 1.
  • formmethod : se usa solo con & amp; amp; nbsp; type = & amp; quot; submit & amp; quot; & amp; amp; nbsp; atributo. Esto especifica qué método HTTP usar al enviar datos de formulario, ya sea & amp; amp; nbsp; get & amp; amp; nbsp; o & amp; amp; nbsp; post.
  • formnovalidate : se usa solo con & amp; amp; nbsp; type = & amp; quot; submit & amp; quot; & amp; amp; nbsp; atributo. Los datos del formulario no se validarán cuando se envíen.
  • formtarget : se usa solo con & amp; amp; nbsp; type = & amp; quot; submit & amp; quot; & amp; amp; nbsp; atributo. Esto indica dónde se debe mostrar la respuesta del sitio cuando se envían los datos del formulario, como en una nueva ventana, etc. Las opciones de valor son & amp; amp; nbsp; & amp; # x200B; _blank, _self, _parent, _top, o un nombre de cuadro específico.

Lea más sobre cómo hacer botones en formularios HTML y cómo hacer que su sitio sea más fácil de usar.

& amp; # x203A; Informática

Dejar respuesta

Please enter your comment!
Please enter your name here

FOLLOW US

Related Stories