HTML Forms

HTML Forms

La ruta del desarrollador web frontend autónomo🤹‍♂️


Un formulario HTML se utiliza para recopilar datos que ingresa el usuario. El ingreso de datos del usuario se envía con mayor frecuencia a un servidor para su procesamiento.

Ejemplo:


El elemento <form>

El elemento HTML <form> se usa para crear un formulario para la entrada de datos del usuario:

Ejemplo:

<!-- Elemento <form> -->
<form>
    <!-- Elementos del formulario -->

</form>

El elemento <form> es un contenedor para diferentes tipos de elementos (<input>) como: campos de texto, casillas de verificación, botones de radio, botones, etc.


El elemento <input>

El elemento <input> es el elemento más utilizado del formulario.

El elemento <input> se puede mostrar de diferentes formas, dependiendo del atributo type.

Ejemplo:

TipoDescripció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 muchas opciones)
<input type="checkbox">Muestra una casilla de verificación (para seleccionar uno o más 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

Campos de texto

El elemento <input type="text"> define un campo de entrada de una sola línea para la entrada de texto.

Ejemplo:


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 con lectores de pantalla, porque el lector de pantalla leerá en voz alta la etiqueta cuando el usuario se ubique en el elemento.

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 elemento <label>, alterna el botón de radio/casilla de verificación.

El atributo for de la etiqueta <label> debe ser igual al atributo id del elemento <input> para unirlos.


Botones de radio

El elemento <input type="radio"> define un botón de opciones de radio.

Los botones de radio le permiten al usuario seleccionar solo uno, de un número limitado de opciones.

Ejemplo:


Listas de verificación

El elemento <input type="checkbox"> define una casilla de verificación.

Las casillas de verificación le permiten al usuario seleccionar uno o más opciones .

Ejemplo:


El botón submit

El elemento <input type="submit"> define un botón para enviar los datos del formulario a un controlador de formularios.

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:


El atributo name

Ten en cuenta que cada campo de entrada (<input>) debe tener un atributo name para poder enviarse al servidor.

Si se omites el atributo name, el valor del campo de entrada no se enviará al servidor.


Resumen

Los formularios HTML se utilizan para recopilar datos que los usuarios ingresan. Estos datos van generalmente a un servidor para su procesamiento.

Los formularios se componen de elementos (<input>, <label>, <select>) y atributos (type, name, id, value).


Traducido con 💚 desde W3Schools.com

Did you find this article valuable?

Support Santos Romero by becoming a sponsor. Any amount is appreciated!