55. Elementos de formulario

El elemento HTML <form> puede contener uno o más de los siguientes elementos de formulario:

• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output<
• <option>
• <optgroup>

El elemento <input>

Uno de los elementos de formulario más utilizados es el elemento <input>. El elemento <input> se puede mostrar de varias formas, según el atributo de tipo.

El elemento <label>

El elemento <label> define una etiqueta para varios 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.

El elemento <select>

El elemento <select> define una lista desplegable:

Ejm

<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Los elementos <option> definen una opción que se puede seleccionar. De forma predeterminada, se selecciona el primer elemento de la lista desplegable. Para definir una opción preseleccionada, agregue el atributo selected a la opción.

<option value="fiat" selected>Fiat</option>

Valores visibles

Utiliza el atributo size para especificar el número de valores visibles:

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Permitir múltiples selecciones

Utiliza el atributo multiple para permitir que el usuario seleccione más de un valor:

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4"multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

El elemento <textarea>

El elemento <textarea> define un campo de entrada de varias líneas (un área de texto).

Ejm

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

El atributo rows especifica el número visible de líneas en un área de texto. El atributo cols especifica el ancho visible de un área de texto. Así es como se mostrará el código HTML anterior en un navegador.

También puedes definir el tamaño del área de texto usando CSS.

Ejm

<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>

El elemento <button>

El elemento <button> define un botón en el que se puede hacer clic:

Ejm

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

Los elementos <fieldset> y <legend>

El elemento <fieldset> se utiliza para agrupar datos relacionados en un formulario. El elemento <legend> define un título para el elemento <fieldset>.

Ejm

<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <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">
  </fieldset>
</form>

El elemento <datalist>

El elemento <datalist> especifica una lista de opciones predefinidas para un elemento <input>. Los usuarios verán una lista desplegable de las opciones predefinidas a medida que ingresan los datos. El atributo list del elemento <input> debe hacer referencia al atributo id del elemento <datalist>.

Ejm

<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

El elemento <output>

El elemento <output> representa el resultado de un cálculo (como el realizado por un script).

Ejm

<form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

Resumen