HTML Formularios
Se utiliza un formulario HTML para recopilar la entrada del usuario. La entrada del usuario suele enviarse a un servidor para su procesamiento.
El elemento <form>
El elemento HTML <form> se utiliza 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 opción, botones de envío, etc.
Todos los diferentes elementos del formulario se tratan en este capítulo: Elementos de formulario HTML.
El elemento <input>
El elemento HTML <input> es el elemento de formulario más utilizado.
Un elemento <input> se puede mostrar de muchas maneras, dependiendo del atributo type.
Aquí hay algunos ejemplos:
| Tipo | Descripción |
|---|---|
| <input type="text"> | Muestra un campo de entrada de texto de una sola línea |
| <input type="radio"> | Muestra un botón de opción (para seleccionar una de muchas opciones) |
| <input type="checkbox"> | Muestra una casilla de verificación (para seleccionar cero o más de muchas opciones) |
| <input type="submit"> | Muestra un botón de envío (para enviar el formulario) |
| <input type="button"> | Muestra un botón en el que se puede hacer clic |
Todos los diferentes tipos de entrada se tratan en este capítulo: Tipos de entrada HTML.
Campos de texto
El <input type="text"> define un campo de entrada de una sola línea para entrada de texto.
Ejemplo
Un formulario con campos de entrada para texto:
<form>
<label for="fname">Nombre de pila:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Apellido:</label><br>
<input type="text" id="lname" name="lname">
</form>
Inténtalo tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
Nota: El formulario en sí no es visible. Tenga en cuenta también que el ancho predeterminado de un campo de entrada es de 20 caracteres.
El elemento <label>
Observe el uso del elemento <label> en el ejemplo anterior.
La etiqueta <label> define una etiqueta para muchos 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 el elemento <label>, 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.
Botones de radio
El <input type="radio"> define un botón de opción.
Los botones de radio permiten al usuario seleccionar UNA de un número limitado de opciones.
Ejemplo
Un formulario con botones de opción:
<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>
Inténtalo tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
Elige tu idioma web favorito:
Casillas de verificación
El <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.
Ejemplo
Un formulario con casillas de verificación:
<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>
Inténtalo tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
El botón Enviar
El <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 action del formulario.
Ejemplo
Un formulario con un botón de envío:
<form action="/action_page.html">
<label for="fname">Nombre de pila:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Apellido:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Inténtalo tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
El atributo de nombre para <input>
Tenga en cuenta que cada campo de entrada debe tener un atributo name para ser enviado.
Si se omite el atributo name, el valor del campo de entrada no se enviará en absoluto.
Ejemplo
Este ejemplo no enviará el valor del campo de entrada "First name":
<form action="/action_page.html">
<label for="fname">Nombre de pila:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
Inténtalo tú mismo »
