53. Formularios HTML

Se utiliza un formulario HTML para recopilar la entrada del usuario. La entrada del usuario se envía con mayor frecuencia a un servidor para su procesamiento.

El elemento <form>

El elemento HTML <form> se usa para crear un formulario HTML para la entrada del usuario:

<form>
.
form elements
.
</form>

El elemento <form> es un contenedor para diferentes tipos de elementos de entrada, como: campos de texto, casillas de verificación, botones de radio, botones de envío, etc.

El elemento <input>

El elemento HTML <input> es el elemento de formulario más utilizado. Un elemento <input> se puede mostrar de muchas formas, según el atributo de tipo. Aquí hay unos ejemplos:

Casillas de texto

<input type=»text»> define un campo de entrada de una sola línea para la entrada de texto.

Ejm

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

Nota: El formulario en sí no es visible. También ten en cuenta que el ancho predeterminado de un campo de entrada es de 20 caracteres.

El elemento <label>

Observa el uso del elemento <label> en el ejemplo anterior. La etiqueta <label> define una etiqueta para muchos elementos de 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 concentre en el elemento de entrada. El elemento <label> también ayuda a los usuarios que tienen dificultades para hacer clic en regiones muy pequeñas (como botones de radio o casillas de verificación), porque cuando el usuario hace clic en el texto dentro del elemento <label>, alterna el botón de radio/casilla de verificación. El atributo for de la etiqueta <label> debe ser igual al atributo id del elemento <input> para unirlos.

Botones de radio

El <input type=»radio»> define un botón de opción. Los botones de opción permiten al usuario seleccionar UNA de un número limitado de opciones.

Ejm

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

Casillas de verificación

<input type=»checkbox»> define una casilla de verificación. Las casillas de verificación permiten al usuario seleccionar CERO o MÁS opciones de un número limitado de opciones.

Ejm

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

El botón submit

<input type=»submit»> define un botón para enviar los datos del formulario a un controlador de formulario. El controlador de formulario suele ser un archivo en el servidor con un script para procesar los datos de entrada. El controlador de formulario se especifica en el atributo de acción del formulario.

Ejm

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

El nombre de atributo para <input>

Ten en cuenta que cada campo de entrada debe tener un atributo de nombre para enviarse. Si se omite el atributo de nombre, el valor del campo de entrada no se enviará en absoluto.

Ejm

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form>