Ayuda a los usuarios a ingresar datos en formularios

Para que un formulario sea interactivo, debes agregar elementos del 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 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 distintas de validación, y proporcionan muchas otras funciones. El uso del control de formulario adecuado te ayuda a crear mejores formularios.

Etiquetas para los elementos del formulario

Supongamos que quieres agregar una entrada en la que el usuario pueda ingresar su color favorito. Para ello, debes agregar un elemento <input> al formulario. Pero ¿cómo sabe el usuario que debe completar su color favorito?

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

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

El atributo for del elemento de la etiqueta coincide con el atributo id de la entrada.

Captura la entrada 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é ocurre con los atributos name y type de 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 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 como hill Si lo haces correctamente y envías el formulario, verás hill en la URL.

El tipo de entrada

Existen diferentes tipos de controles de formularios con funciones integradas útiles que funcionan en diferentes navegadores y plataformas. Según el type , el navegador renderiza diferentes interfaces de usuario, muestra diferentes teclados en pantalla, usa diferentes reglas de validación y 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 aparezca como marcado.

Existen muchos otros tipos que puedes elegir. Analizaremos esto en detalle en otro módulo.

Permitir varias líneas de texto

Por ejemplo, necesitas un campo en el que un usuario pueda escribir un comentario. En este caso, ¿no sería genial si pudieran ingresar varias líneas de texto? Esta es la finalidad del elemento <textarea>.

<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>

Elige una opción de una lista de opciones

¿Cómo se les brinda a los usuarios una lista de opciones para seleccionar? 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 formularios, debes conectarlo a una <label> con el atributo id. y asígnale un nombre único con el atributo name.

Entre la etiqueta de inicio y finalización 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 para que puedas diferenciarlas cuando proceses 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 se debe usar?

El navegador utiliza 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 una opción de forma previa

Con el atributo selected, puedes seleccionar una opción de forma previa. Este se convierte en el predeterminado, independientemente del orden en el que se definan los elementos <option>.

Agrupar controles de formularios

A veces, debes agrupar los controles de 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 la respuesta es "para describir el grupo de controles de formularios", tienes razón.

Cada elemento <fieldset> requiere un elemento <legend>, del mismo modo que todos los controles de formularios necesitan un elemento <label> asociado. El <legend> también debe ser el primer elemento en el <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 controles de formularios 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 archivo <form> atributo de acción con todos los datos de los controles de formularios.

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 el <input>, usa el atributo value en su lugar.

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

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

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre los elementos del formulario

Recursos

• El elemento de etiqueta
• El elemento de entrada
• El elemento de área de texto
• El elemento de selección
• El elemento de conjunto de campos
• El elemento del botón