Para que un formulario sea interactivo, debes agregar elementos de formulario. Hay controles para ingresar y seleccionar datos, elementos que describen controles, elementos que agrupan campos y botones para enviar un formulario.
¿Qué son los elementos de formulario?
Verás dos elementos <input>, <input type="text"> y <input type="file">. ¿Por qué se ven diferentes?
Según el nombre del elemento y el atributo type, los navegadores muestran diferentes interfaces de usuario, usan diferentes reglas de validación y proporcionan muchas otras funciones. Usar el control de formulario adecuado te ayuda a crear mejores formularios.
Etiquetas para elementos de formulario
Supongamos que quieres agregar una entrada en la que el usuario pueda ingresar su color favorito.
Para ello, debes agregar un elemento <input> a tu formulario. Pero, ¿cómo sabe el usuario que debe completar su color favorito?
Para describir los controles de formulario, usa un <label> para cada control.
<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">
El atributo for del elemento de etiqueta coincide con el atributo id de la entrada.
Cómo capturar la entrada del usuario
Como su nombre lo indica, el elemento <input> se usa para recopilar la entrada de los usuarios.
<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">
Como se mencionó anteriormente, el atributo id conecta el <input> al <label>.
¿Qué sucede con el atributo de nombre y tipo en este ejemplo?
El atributo name
Usa el atributo name para identificar los datos que el usuario ingresa con el control.
Si envías el formulario, este nombre se incluirá en la solicitud.
Supongamos que le asignaste el nombre mountain a un control de formulario y el usuario ingresó Gutenberg. La solicitud incluye esta información como mountain=Gutenberg.
Intenta cambiar el nombre del control de formulario a hill.
Si lo haces correctamente y envías el formulario, hill se verá en la URL.
Tipo de entrada
Existen diferentes tipos de controles de formulario, todos con funciones integradas útiles que funcionan en diferentes navegadores y plataformas. Según el atributo type, el navegador renderiza diferentes interfaces de usuario, muestra diferentes teclados en pantalla, usa diferentes reglas de validación y mucho más. Consulta cómo cambiar el tipo.
Con type="checkbox", el navegador ahora renderiza una casilla de verificación en lugar de un campo de texto.
La casilla de verificación también incluye atributos adicionales.
Puedes establecer el atributo checked para mostrarlo como seleccionado.
Puedes elegir otros tipos. Veremos esto en detalle en otro módulo.
Permite varias líneas de texto
Supongamos que necesitas un campo en el que un usuario pueda escribir un comentario.
Para ello, ¿no sería genial que pudieran ingresar varias líneas de texto?
Este es el propósito del elemento <textarea>.
<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>
Elegir una opción de una lista
¿Cómo les das a los usuarios una lista de opciones para que elijan?
Puedes usar un elemento <select> para lograrlo.
<label for="color">Color</label>
<select id="color" name="color">
<option value="orange">Orange</option>
<option value="pink">Pink</option>
</select>
Primero, agrega un elemento <select>.
Al igual que con todos los demás controles de formulario, lo conectas a un <label> con el atributo id y le asignas un nombre único con el atributo name.
Entre las etiquetas de inicio y cierre del elemento <select>, puedes agregar varios elementos <option>, cada uno de los cuales representa una selección.
Cada opción tiene un atributo value único, por lo que puedes distinguirlas cuando proceses los datos del formulario.
El texto dentro del elemento de opción es el valor legible.
Si envías el formulario con este <select> sin cambiar la selección, la solicitud incluirá color=orange. Pero, ¿cómo sabe el navegador qué opción debe usarse?
El navegador usa la primera opción de la lista, a menos que ocurra lo siguiente:
- Un elemento
<option>tiene el atributoselected. - El usuario elige otra opción.
Cómo preseleccionar una opción
Con el atributo selected, puedes preseleccionar una opción. Este se convierte en el valor predeterminado, independientemente del orden en que se definan los elementos <option>.
Cómo agrupar controles de formulario
A veces, necesitas agrupar los controles de formulario. Puedes usar el elemento <fieldset> para hacerlo.
<fieldset>
<legend>What is your favorite web technology</legend>
<label for="html">HTML</label>
<input type="radio" name="webfeature" value="html" id="html">
<label for="css">CSS</label>
<input type="radio" name="webfeature" value="css" id="css">
</fieldset>
¿Viste el elemento <legend> dentro del elemento <fieldset>? ¿Para qué crees que se usa?
Si tu respuesta es "para describir el grupo de controles de formulario", ¡es correcta!
Cada elemento <fieldset> requiere un elemento <legend>, al igual que cada control de formulario necesita un elemento <label> asociado.
El <legend> también debe ser el primer elemento del <fieldset>.
Después del elemento <legend>, puedes definir los controles de formulario que deben formar parte del grupo.
Cómo enviar un formulario
Después de aprender a agregar controles de formulario y agruparlos, es posible que te preguntes cómo un usuario puede enviar un formulario.
La primera opción es usar un elemento <button>.
<button>Submit</button>
Después de que un usuario hace clic en el botón Enviar, el navegador realiza una solicitud a la URL especificada en el atributo action del elemento <form> con todos los datos de los controles del formulario.
También puedes usar un elemento <input> con type="submit" en lugar de un elemento <button>. La entrada se ve y se comporta como un <button>.
En lugar de usar un elemento <label> para describir el <input>, usa el atributo value.
<input type="submit" value="Submit">
Además, también se puede enviar un formulario con la tecla Enter cuando un campo del formulario está enfocado.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre los elementos de formularios
¿Cómo conectas un <label> a un control de formulario?
for='color' en el <label> y name='color' en el <input>.for='color' en el <label> y id='color' en el <input>.id='color' en el <label> y for='color' en el <input>.name='color' en el <label> y for='color en el <input>.¿Qué usas para un control de formulario de varias líneas?
<input> con type='multi-line'.<text><textarea><input> con type='long'.¿Cómo puedes enviar un formulario?
<button>Enter.<input> con type='submit'.