Elementos de formulario HTML
Este capítulo describe todos los diferentes elementos del formulario HTML.
Los elementos HTML <form>
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 <entrada>
Uno de los elementos de formulario más utilizados es el <input>elemento.
El <input>elemento se puede mostrar de varias formas, según el type
atributo.
Ejemplo
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
Todos los diferentes valores del type
atributo se tratan en el siguiente capítulo:
Tipos de entrada HTML .
El elemento <etiqueta>
El <label>elemento define una etiqueta para varios elementos de formulario.
El <label>elemento es útil para los usuarios de lectores de pantalla, porque el lector de pantalla leerá en voz alta la etiqueta cuando el usuario se centre en el elemento de entrada.
El <label>elemento 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 <label>elemento, alterna el botón de radio/casilla de verificación.
El foratributo de la <label>etiqueta debe ser igual al idatributo del <input>
elemento para unirlos.
El elemento <seleccionar>
El <select>elemento define una lista desplegable:
Ejemplo
<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 <option>elementos 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 selectedatributo a la opción:
Ejemplo
<option value="fiat" selected>Fiat</option>
Valores visibles:
Utilice el sizeatributo para especificar el número de valores visibles:
Ejemplo
<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 selecciones múltiples:
Utilice el multipleatributo para permitir que el usuario seleccione más de un valor:
Ejemplo
<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 <textarea>elemento define un campo de entrada de varias líneas (un área de texto):
Ejemplo
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
El rowsatributo especifica el número visible de líneas en un área de texto.
El colsatributo especifica el ancho visible de un área de texto.
Así es como se mostrará el código HTML anterior en un navegador:
También puede definir el tamaño del área de texto usando CSS:
Ejemplo
<textarea name="message"
style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
El elemento <botón>
El <button>elemento define un botón en el que se puede hacer clic:
Ejemplo
<button type="button"
onclick="alert('Hello World!')">Click Me!</button>
Así es como se mostrará el código HTML anterior en un navegador:
Nota: Especifique siempre el typeatributo para el elemento del botón. Diferentes navegadores pueden usar diferentes tipos predeterminados para el elemento de botón.
Los elementos <fieldset> y <legend>
El <fieldset>elemento se utiliza para agrupar datos relacionados en un formulario.
El <legend>elemento define un título para el
<fieldset>
elemento.
Ejemplo
<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>
Así es como se mostrará el código HTML anterior en un navegador:
El elemento <lista de datos>
El <datalist>elemento especifica una lista de opciones predefinidas para un <input>elemento.
Los usuarios verán una lista desplegable de las opciones predefinidas a medida que ingresan los datos.
El listatributo del <input>elemento, debe hacer referencia al
idatributo del <datalist>elemento.
Ejemplo
<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 <salida>
El <output>elemento representa el resultado de un cálculo (como uno realizado por un script).
Ejemplo
Realiza un cálculo y muestra el resultado en un <output>elemento:
<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>
Ejercicios HTML
Elementos de formulario HTML
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
| <textarea> | Defines a multiline input control (text area) |
| <label> | Defines a label for an <input> element |
| <fieldset> | Groups related elements in a form |
| <legend> | Defines a caption for a <fieldset> element |
| <select> | Defines a drop-down list |
| <optgroup> | Defines a group of related options in a drop-down list |
| <option> | Defines an option in a drop-down list |
| <button> | Defines a clickable button |
| <datalist> | Specifies a list of pre-defined options for input controls |
| <output> | Defines the result of a calculation |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML .