Este capítulo describe todos los diferentes elementos del formulario HTML.
Los elementos de <form>
El elemento <form> puede contener uno o más de los siguientes elementos:
<input><label><select><textarea><button><fieldset><legend><datalist><output><option><optgroup>
El elemento <input>
Uno de los elementos más utilizados de un formulario, es el elemento <input>.
El elemento <input> se puede mostrar de varias formas, según el atributo type.
Ejemplo:
En el próximo artículo, hablaremos de todos los diferentes valores del atributo type.
El elemento <label>
El elemento <label> define una etiqueta para varios elementos del formulario.
El elemento <label> es útil para los usuarios de lectores de pantalla, porque el lector de pantalla leerá en voz alta la etiqueta cuando el usuario se centre en el elemento de entrada.
El elemento <label> también ayuda a los usuarios que tienen dificultades para hacer clic en zonas muy pequeñas (checkbox, radio buttons), porque cuando el usuario hace clic en el texto dentro del elemento <label>, automáticamente va al botón radio y/o checkbox.
El valor del atributo for de la etiqueta <label> debe ser igual al valor del atributo id del elemento <input> para unirlos.
El elemento <select>
El elemento <select> define una lista desplegable:
Ejemplo:
Los elementos <option> definen una lista de opciones que se pueden seleccionar.
Por defecto, se seleccionará el primer elemento de la lista.
Para definir una opción preseleccionada, agregue el atributo select al elemento option:
<option value="volvo" selected>Volvo</option>
Valores visibles
Utiliza el atributo size para especificar el número de valores visibles:
Ejemplo:
<select id="carro" name="carro" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Múltiples selecciones
Utiliza el atributo multiple para permitir que el usuario seleccione más de un valor:
Ejemplo:
<select id="carro" name="carro" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Manten presionado la tecla Ctrl.
El elemento <textarea>
El elemento <textarea> define un campo de entrada de varias líneas (área de texto):
Ejemplo:
El atributo rows especifica el número visible de líneas en un área de texto.
El atributo cols especifica el ancho visible de un área de texto.
También puedes definir el tamaño del área de texto usando CSS:
Ejemplo:
<textarea name="mensaje" style="with:200px; height:100px;">
Notion es un editor de código fuente en línea y gratuito para todo el mundo.
</textarea>
El elemento <button>
El elemento <button> define un botón en el que se puede hacer clic:
Ejemplo:
Nota: Siempre especifique el atributo
typeen el elementobutton. Diferentes navegadores pueden usar diferentestypepredeterminados para el botón.
Los elementos <fieldset> y <legend>
El elemento <fieldset> se utiliza para agrupar datos relacionados con el formulario.
El elemento <legend> define un título para el elemento <fieldset>.
Ejemplo:
El elemento <datalist>
El elemento <datalist> especifica una lista de opciones predefinidas para un elemento <input>.
Los usuarios verán una lista desplegable de las opciones predefinidas a medida que ingresan los datos.
El atributo list del elemento <input> debe hacer referencia al atributo id del elemento <datalist>.
Ejemplo:
El elemento <output>
El elemento <output> representa el resultado de un cálculo (como el realizado por un script).
Ejemplo:
Resumen
Un formulario HTML puede contener diferentes elementos de acuerdo a los datos que se quieran procesar.
El elemento <input> es el elemento más utilizado en formulario.
Traducido con 💚 desde W3Schools.com