HTML Formularios
Se utiliza un formulario HTML para recopilar la entrada del usuario. La entrada del
usuario la mayoría de las veces se envía a un servidor para su procesamiento.
El elemento <form>
El elemento <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, tal
como: campos de texto, casillas de verificación, radio, botones de envío, etc.
El elemento <input>
El elemento <input> es el más usado.
Un elemento <input> se puede mostrar de muchas formas, 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 radio (para seleccionar una de las
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 de hacer clic
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">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:
Nombre:
Apellido:
El atributo for en HTML es un atributo utilizado en las etiquetas label que establece
una relación entre la etiqueta y el elemento al que se refiere. Es una herramienta
importante en el desarrollo web, ya que mejora la accesibilidad y usabilidad de un sitio
al permitir a los usuarios hacer clic en la etiqueta para seleccionar el elemento asociado.
Este atributo se utiliza comúnmente en formularios para vincular etiquetas con campos
de entrada, botones u otros elementos interactivos.
Al utilizar el atributo for, es crucial asegurarse de que el valor coincida con el atributo
id del elemento al que se hace referencia. De esta manera, cuando se hace clic en la
etiqueta, se activará el elemento asociado.
El elemento <label>
La etiqueta <label> define una etiqueta para muchos elementos de forma.
El elemento <label> es útil para usuarios de lectores de pantalla, porque el lector de
pantalla leerá en voz alta la etiqueta cuando el usuario se centra en el elemento de
entrada.
El elemento <label> también ayuda a los usuarios que tienen dificultad haciendo 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>, que alterna el
botón de radio/casilla de verificación.
El atributo for de la etiqueta <label> ser igual al atributo id del elemento <input>
para unirlos.
Botones de radio
El <input type="radio"> define un botón de radio.
Los botones de radio permiten al usuario seleccionar una de unas opciones limitadas.
Ejemplo
Una forma con botones de radio:
<p>Elige tu lenguaje web favorito:</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:
Elige tu lenguaje web favorito:
HTML
CSS
JavaScript
Casillas de verificación
El <input type="checkbox"> define una casilla de verificación.
Las casillas de verificación permiten a un usuario seleccionar opciones de cero o más 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"> Tengo una bicicleta</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> Tengo un auto</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> Tengo un barco</label>
</form>
Así es como se mostrará el código HTML anterior en un navegador:
Tengo una bicicleta
Tengo un auto
Tengo un barco
El botón Submit
El <input type="submit"> define un botón para enviar los datos del formulario a un
controlador de formulario.
El controlador de formularios es típicamente un archivo en el servidor con un script para
el procesamiento datos de entrada.
El controlador de formulario se especifica en el atributo action en la etiqueta
<form>.
Ejemplo
Un formulario con un botón de envío:
<form action="/action_page.php">
<label for="fname">Nombre:</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>
Así es como se mostrará el código HTML anterior en un navegador:
Nombre:
John
Apellido:
Doe
El atributo name para <input>
Tenga en cuenta que cada campo de entrada debe tener un atributo name a enviar.
Si se omite el atributo name, el valor del campo de entrada no se enviará.
Ejemplo
Este ejemplo no enviará el valor del campo de entrada "Nombre":
<form action="/action_page.php">
<label for="fname">Nombre:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
Ejercicio
¿Cuál es el elemento HTML correcto para definir un formulario?
<schema>
<ff>
<form>
HTML Atributos del formulario
En este capítulo se describen los diferentes atributos para el elemento HTML <form>.
El atributo action
Define la acción a realizar cuando se envía el formulario.
Por lo general, los datos del formulario se envían a un archivo en el servidor cuando el
usuario hace clic en el botón enviar.
En el ejemplo siguiente, los datos del formulario se envían a un archivo llamado
"action_page.php". Este archivo contiene un script del lado del servidor que maneja los
datos del formulario:
Ejemplo
En el envío, envíe los datos del formulario a "action_page.php":
<form action="/action_page.php">
<label for="fname">Nombre:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Apellidos:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Consejo: Si se omite el atributo action, la acción se establece en la página actual.
El atributo objetivo
El atributo target especifica dónde mostrar la respuesta que se recibe después de
enviar el formulario.
El atributo target puede tener uno de los los siguientes valores:
Value Description
_blank La respuesta se muestra en una nueva ventana o pestaña.
_self La respuesta se muestra en la ventana actual.
_parent La respuesta se muestra en el marco principal.
_top La respuesta se muestra en el cuerpo completo de la ventana.
framename La respuesta se muestra en un iframe.
El valor por defecto es _self lo que significa que la respuesta se abrirá en la ventana
actual.
Ejemplo
Aquí, el resultado enviado se abrirá en una nueva pestaña del navegador:
<form action="/action_page.php" target="_blank">
El método Atributo
El atributo method especifica el método HTTP a utilizar al enviar los datos del
formulario.
Los datos de formulario se pueden enviar como variables URL (con method="get") o
como transacción HTTP post (con method="post").
El método HTTP predeterminado al enviar datos de formulario es GET.
Ejemplo
Este ejemplo utiliza el método GET al enviar los datos del formulario:
<form action="/action_page.php" method="get">
Ejemplo
Este ejemplo utiliza el método POST al enviar los datos del formulario:
<form action="/action_page.php" method="post">
Notas sobre GET:
• Añade los datos del formulario a la URL, en los pares nombre/valor
• ¡NUNCA uses GET para enviar datos confidenciales! (¡los datos del formulario
enviado son visibles en la URL!)
• La longitud de una URL está limitada (2048 caracteres)
• Útil para envíos de formularios donde un usuario quiere marcar el resultado
• GET es bueno para datos no seguros, como cadenas de consulta en Google
Notas sobre el POST:
• Añade los datos del formulario dentro del cuerpo de la solicitud HTTP (Los
datos del formulario enviados no se muestran en la URL)
• POST no tiene limitaciones de tamaño, y se puede utilizar para enviar grandes
cantidades de datos.
• Las presentaciones de formularios con POST no se pueden marcar
Consejo: ¡Siempre use POST si los datos del formulario contienen información
confidencial o personal!
El atributo Autocompletar
El atributo autocomplete especifica si un formulario debe tener autocompletado dentro
o fuera de la computadora.
Cuando se activa el autocompletado, el navegador completa automáticamente los
valores en función de los valores que el usuario ha introducido antes.
Ejemplo
Un formulario con autocompletado en:
<form action="/action_page.php" autocomplete="on">
El atributo Novalidate
El atributo novalidate es un atributo booleano.
Cuando esté presente, especifica que los datos de formulario (entrada) no deben
validarse cuando se envíen.
Ejemplo
Una forma con un atributo novalidato:
<form action="/action_page.php" novalidate>
Ejercicio
¿Cuál es la sintaxis correcta para abrir el resultado del formulario en una nueva pestaña
del navegador?
<form action='/action_page.php' target='_blank'>
<form action='/action_page.php' target='_top'>
<form action='/action_page.php' target='_new'>
Lista de todos los atributos <form>
Atributo Descripción
accept- Especifica las codificaciones de caracteres utilizadas para el envío de
charset formularios
action Especifica dónde enviar los datos del formulario cuando se envía un
formulario
autocomplete Especifica si un formulario debe tener autocompletado encendido o
apagado
enctype Especifica cómo se deben codificar los datos de formulario al enviarlos
al servidor (solo para method="post")
method Especifica el método HTTP a utilizar al enviar datos de formulario
name Especifica el nombre del formulario
novalidate Especifica que el formulario no debe ser validado cuando se envía
rel Especifica la relación entre un recurso vinculado y el documento actual
target Especifica dónde mostrar la respuesta que se recibe después de enviar
el formulario
HTML Elementos del formulario
Los elementos de <form>
El elemento HTML <form> puede contener uno o más de los siguientes elementos de
forma:
• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>
El elemento <input>
Uno de los elementos de forma más utilizados es el elemento <input>.
El elemento <input> se puede mostrar de varias maneras, dependiendo del atributo
type.
Ejemplo
<label for="fname">Nombre:</label>
<input type="text" id="fname" name="fname">
El elemento <label>
El elemento <label> define una etiqueta para varios elementos de forma.
El elemento <label> es útil para usuarios de lectores de pantalla, porque el lector de
pantalla leerá en voz alta la etiqueta cuando el usuario se centra en el elemento de
entrada.
El elemento <label> también ayuda a los usuarios que tienen dificultad haciendo 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>, que alterna el
botón de radio/casilla de verificación.
El atributo for de la etiqueta <label> debería ser igual al atributo id del elemento
<input> para unirlos.
El elemento <select>
El elemento <select> define una lista desplegable:
Ejemplo
<label for="cars">Elegi un coche:</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>
El elemento <option> define una opción que puede ser seleccionada.
De forma predeterminada, se selecciona el primer elemento de la lista desplegable.
Para definir una opción preseleccionada, agregue la opción selected:
Ejemplo
<option value="fiat" selected>Fiat</option>
Valores Visibles:
Utilice el atributo size para especificar el número de valores visibles:
Ejemplo
<label for="cars">Elige un coche:</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:
Utilice el atributo multiple para permitir al usuario seleccionar más de un valor:
Ejemplo
<label for="cars">Elige un coche:</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 multilínea (un área de texto):
Ejemplo
<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:
The cat w as playing in the gard
También puede definir el tamaño del área de texto mediante CSS:
Ejemplo
<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 clickable:
Ejemplo
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
Nota: Siempre especifique el atributo type para el elemento botón. Diferentes
navegadores pueden utilizar diferentes tipos predeterminados para el elemento de botón.
Elementos <fieldset> y <legend>
El elemento <fieldset> se utiliza para agrupar datos relacionados en una forma.
El elemento <legend> define un título para el elemento <fieldset>.
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:
Personalia:
Nombre:
John
Apellido:
Doe
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 referirse al atributo id del elemento
<datalist>.
Ejemplo
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<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 uno realizado por un
script).
Ejemplo
Realizar un cálculo y mostrar el resultado en un elemento <output>:
<form action="/action_page.php" oninput="[Link]=parseInt([Link])+parseInt([Link])">
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>
Ejercicio
¿Cuál es el elemento HTML correcto para agrupar los datos relacionados en una forma
y también, por defecto, dibujar un borde alrededor de él?
<group>
<fieldset>
<fence>
Elementos de formulario HTML
Tag Description
<form> Define un formulario HTML para la entrada del usuario
<input> Define 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> Define una lista desplegable.
<optgroup> Define un grupo de opciones relacionadas en una lista desplegable.
<option> Define una opción en una lista desplegable.
<button> Define un botón en el que se puede hacer clic.
<datalist> Especifica una lista de opciones predefinidas para los controles de entrada.
<output> Define el resultado de un cálculo.