Ayuda a los usuarios a ingresar datos en formularios

Para que un formulario sea interactivo, debes agregar elementos. Existen controles para ingresar y seleccionar datos, elementos que describen controles, elementos que agrupan campos y botones para enviar un formulario.

¿Qué son los elementos del 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 formularios

Digamos que quieres agregar una entrada donde 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 rellenar su color favorito?

Si deseas describir los controles de formulario, usa un <label> para cada uno de ellos.

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

Captura las entradas del usuario

Como su nombre lo indica, el elemento <input> se usa para recopilar información 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 <input> con <label>. ¿Qué sucede con los atributos de nombre y tipo en este ejemplo?

El atributo de nombre

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

El tipo de entrada

Existen diferentes tipos de controles de formularios, 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 distintos 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 configurar el atributo checked para que se muestre como marcado.

Hay muchos otros tipos que puedes elegir. Veremos esto en detalle en otro módulo más adelante.

Permitir varias líneas de texto

Supongamos que necesitas un campo donde un usuario pueda escribir un comentario. En este caso, ¿no sería grandioso si 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>

Elige de una lista de opciones

¿Cómo ofreces a los usuarios una lista de opciones para seleccionar? 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 mediante el atributo name.

Entre la etiqueta de inicio y la de final 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, de modo que puedes diferenciarlos cuando procesas los datos del formulario. El texto dentro del elemento de opción 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 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.

Selecciona previamente una opción

Con el atributo selected, puedes preseleccionar una opción. Este se convierte en el predeterminado, sin importar el orden en el que se definan los elementos <option>.

Cómo agrupar controles de formularios

A veces es necesario agrupar los controles de los formularios. 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 del formulario”, estás en lo cierto.

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 deberían formar parte del grupo.

Cómo enviar un formulario

Después de aprender a agregar y agrupar controles de formularios, 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 envía una solicitud a la URL especificada en el atributo de acción 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 la <input>, usa el atributo value.

<input type="submit" value="Submit">

Además, un formulario también se puede enviar con la clave Enter cuando un campo de formulario está enfocado.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre los elementos de los formularios

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

for='color' en el <label> y name='color' en el <input>.
Vuelve a intentarlo.
for='color' en el <label> y id='color' en el <input>.
Correcto.
id='color' en el <label> y for='color' en el <input>.
Vuelve a intentarlo.
name='color' en el <label> y for='color en el <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, esta es una opción.
Usa la clave Enter.
Correcto, esta es una opción.
Haciendo clic en un elemento <input> con type='submit'
Correcto, esta es una opción.
Todas las opciones anteriores son correctas.
Correcto. Todas las respuestas son opciones posibles para enviar un formulario.

Recursos