HTML Elementos de formulario
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 <input>
Uno de los elementos de formulario más utilizados es el elemento <input>.
El elemento <input> se puede mostrar de varias maneras, dependiendo del atributo type.
Ejemplo
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
Inténtalo tú mismo »
Todos los diferentes valores del atributo type se tratan en el siguiente capítulo: HTML Input Types.
El elemento <label>
El elemento <label> define una etiqueta para varios elementos del formulario.
El elemento <label> es útil para los usuarios de lectores de pantalla, porque el lector de pantalla leerá la etiqueta en voz alta cuando el usuario se centre 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 <label> elemento, alterna el botón de opción/casilla de verificación.
El atributo for de la etiqueta <label> debe ser igual al id atributo del elemento <input> para unirlos.
El elemento <select>
El elemento <select> 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>
Inténtalo tú mismo »
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:
Valores visibles:
Utilice el atributo size 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>
Inténtalo tú mismo »
Permitir selecciones múltiples:
Utilice el atributo multiple para permitir al usuario seleccionar 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>
Inténtalo tú mismo »
El elemento <textarea>
El elemento <textarea> 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>
Inténtalo tú mismo »
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:
Ejemplo
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
Inténtalo tú mismo »
El elemento <button>
El elemento <button> define un botón en el que se puede hacer clic:
Ejemplo
<button type="button" onclick="alert('¡Gloria a Ucrania!')">Click Me!</button>
Inténtalo tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
Nota: Especifique siempre el atributo type para el elemento del botón. Diferentes navegadores pueden usar diferentes tipos predeterminados para el elemento del botón.
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>.
Ejemplo
<form action="/action_page.html">
<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>
Inténtalo tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
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 datos.
El atributo list del elemento <input> debe hacer referencia al id atributo del elemento <datalist>.
Ejemplo
<form action="/action_page.html">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Inténtalo tú mismo »
El elemento <output>
El elemento <output> representa el resultado de un cálculo (como uno realizado por un script).
Ejemplo
Realice un cálculo y muestre el resultado en un elemento <output>:
<form action="/action_page.html"
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>
Inténtalo tú mismo »
HTML Ejercicios
HTML Elementos de formulario
| Etiqueta | Descripción |
|---|---|
| <form> | Define un formulario HTML para la entrada del usuario |
| <input> | Definir un control de entrada |
| <textarea> | Define un control de entrada multilínea (área de texto) |
| <label> | Define una etiqueta para un elemento <input> |
| <fieldset> | Agrupa elementos relacionados en un formulario |
| <legend> | Define un título para un elemento <fieldset> |
| <select> | Definir una lista desplegable |
| <optgroup> | Define un grupo de opciones relacionadas en una lista desplegable |
| <option> | Definir una opción en una lista desplegable |
| <button> | Definir un botón en el que se puede hacer clic |
| <datalist> | Especificar una lista de opciones predefinidas para controles de entrada |
| <output> | Define el resultado de un cálculo |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML.
