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.
Ejemplo
El elemento <formulario>
El elemento HTML <form>se utiliza para crear un formulario HTML para la entrada del usuario:
<form>
.
form elements
.
</form>
El <form>elemento 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 de formulario se tratan en este capítulo: Elementos de formulario HTML .
El elemento <entrada>
El elemento HTML <input>es el elemento de formulario más utilizado.
Un <input>elemento se puede mostrar de muchas maneras, según el type
atributo.
Aquí hay unos ejemplos:
| Escribe | Descripción |
|---|---|
| <tipo de entrada="texto"> | Muestra un campo de entrada de texto de una sola línea |
| <tipo de entrada="radio"> | Muestra un botón de radio (para seleccionar una de muchas opciones) |
| <tipo de entrada="casilla de verificación"> | Muestra una casilla de verificación (para seleccionar cero o más de muchas opciones) |
| <tipo de entrada="enviar"> | Muestra un botón de envío (para enviar el formulario) |
| <tipo de entrada="botón"> | 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
define un campo de entrada de una sola línea para la <input type="text">entrada de texto.
Ejemplo
Un formulario con campos de entrada de texto:
<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>
Así es como se mostrará el código HTML anterior en un navegador:
Nota: El formulario en sí no es visible. También tenga en cuenta que el ancho predeterminado de un campo de entrada es de 20 caracteres.
El elemento <etiqueta>
Observe el uso del <label>elemento en el ejemplo anterior.
La <label>etiqueta define una etiqueta para muchos 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.
Botones de radio
<input type="radio">define un botón de opción .
Los botones de opción le 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>
Así es como se mostrará el código HTML anterior en un navegador:
Elija su idioma web favorito:
Casillas de verificación
define <input type="checkbox">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>
Así es como se mostrará el código HTML anterior en un navegador:
El botón Enviar
define un botón para enviar los <input type="submit">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 action
atributo del formulario.
Ejemplo
Un formulario con un botón de enviar:
<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>
Así es como se mostrará el código HTML anterior en un navegador:
El atributo de nombre para <entrada>
Tenga en cuenta que cada campo de entrada debe tener un nameatributo para enviarse.
Si namese omite el atributo, el valor del campo de entrada no se enviará en absoluto.
Ejemplo
Este ejemplo no enviará el valor del campo de entrada "Nombre":
<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>