Ayuda a los usuarios a ingresar datos en formularios

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. El uso del 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 uno.

<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 sugiere, el elemento <input> se usa para recopilar entradas de los usuarios.

<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">

Como se mencionó antes, el atributo id conecta el <input> con el <label>. ¿Qué sucede con el atributo nombre y tipo en este ejemplo?

El atributo name

Usa el atributo name para identificar los datos que ingresa el usuario con el control. Si envías el formulario, este nombre se incluirá en la solicitud. Supongamos que 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 aparecerá en la URL.

El tipo de entrada

Existen diferentes tipos de controles de formulario, todos con funciones integradas útiles que funcionan en diferentes navegadores y plataformas. En función del atributo type, el navegador renderiza diferentes interfaces de usuario, muestra diferentes teclados en pantalla, usa diferentes reglas de validación y mucho más. Veamos cómo cambiar el tipo.

Cuando usas 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 marcado.

Existen otros tipos que puedes elegir. Analizaremos 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 pudiera 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>

Elige una opción de la lista

¿Cómo les das a los usuarios una lista de opciones para elegir? Para lograrlo, puedes usar un elemento <select>.

<label for="color">Color</label>
<select id="color" name="color">
  <option value="orange">Orange</option>
  <option value="pink">Pink</option>
</select>

Primero, agregas 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 la etiqueta de inicio y la de fin 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 diferenciarlas cuando procesas los datos del formulario. El texto dentro del elemento option es el valor legible por humanos.

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 se debe usar?

El navegador usa la primera opción de la lista, a menos que ocurra lo siguiente:

  • Un elemento <option> tiene el atributo selected.
  • El usuario elige otra opción.

Cómo seleccionar una opción de antemano

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 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>

¿Notaste el elemento <legend> dentro del elemento <fieldset>? ¿Para qué crees que se usa?

Si tu respuesta es “describir el grupo de controles de formulario”, tienes razón.

Cada elemento <fieldset> requiere un elemento <legend>, así como cada control de formulario necesita un elemento <label> asociado. El <legend> también debe ser el primer elemento de <fieldset>. Después del elemento <legend>, puedes definir los controles de formulario que deben formar parte del grupo.

Envío de un formulario

Después de aprender a agregar controles de formulario y agruparlos, es posible que te preguntes cómo puede enviar un formulario un usuario.

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 una <button>. En lugar de usar un elemento <label> para describir <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 de formulario está enfocado.

Verifica tu comprensión

Pon a prueba tus conocimientos sobre los elementos de formulario

¿Cómo conectas un <label> a un control de formulario?

for='color' en <label> y name='color' en <input>.
Vuelve a intentarlo.
for='color' en <label> y id='color' en <input>.
Correcto.
id='color' en <label> y for='color' en <input>.
Vuelve a intentarlo.
name='color' en <label> y for='color en <input>.
Vuelve a intentarlo.

¿Qué usas para un control de formulario de varias líneas?

Elemento <input> con type='multi-line'.
Vuelve a intentarlo.
El elemento <text>
Vuelve a intentarlo.
El elemento <textarea>
🎉
Elemento <input> con type='long'.
Vuelve a intentarlo.

¿Cómo puedes enviar un formulario?

Hacer clic en un elemento <button>
Correcto, esa es una opción.
Usa la clave Enter.
Correcto, esa es una opción.
Hacer clic en un elemento <input> con type='submit'
Correcto, esa es una opción.

Recursos