HTML Forms

Inicio / Tema / HTML Forms / Elementos de los Formularios en HTML

Elementos de los Formularios en HTML

En este capítulo, exploraremos en detalle los elementos que componen los formularios en HTML. Cada uno de estos elementos tiene un propósito específico y permite a los usuarios ingresar diferentes tipos de datos. Entender el uso adecuado de cada elemento es esencial para construir formularios que sean claros, accesibles y efectivos.

Elemento `<input>`: Tipos Comunes de Campos de Entrada

La etiqueta <input> es uno de los elementos más versátiles en un formulario HTML. Su atributo type define el tipo de dato que puede aceptar, lo que cambia su comportamiento y apariencia. A continuación, presentamos algunos de los tipos de entrada más comunes.

Campo de Texto

El tipo text permite al usuario ingresar texto libre. Es ideal para nombres, direcciones y otros datos cortos.

html

"Aquí, el campo de entrada es de tipo 'text', adecuado para información de texto libre como nombres de usuario. El atributo 'required' indica que este campo es obligatorio."

Campo de Contraseña

El tipo password oculta el texto que el usuario ingresa, mostrando asteriscos o puntos en lugar del contenido real. Es útil para datos confidenciales.

html

"Este campo de entrada es de tipo 'password'. Al ingresar datos, el navegador los oculta, mostrando símbolos en lugar de texto. Esto es ideal para información sensible como contraseñas."

Campo de Correo Electrónico

El tipo email está diseñado para entradas que requieren una dirección de correo electrónico válida. Los navegadores pueden validar automáticamente este tipo de campo.

html

"Este es un campo de tipo 'email'. El navegador verificará automáticamente que el valor ingresado tenga el formato de una dirección de correo electrónico válida."

Campo de Número

El tipo number permite que el usuario ingrese solo números y proporciona controles para ajustar el valor.

html

"En este ejemplo, el campo es de tipo 'number', que restringe la entrada a valores numéricos. Además, los atributos 'min' y 'max' definen un rango de valores permitidos, en este caso de uno a cien."

Elementos de Selección

Casillas de Verificación (`checkbox`)

Las casillas de verificación permiten seleccionar múltiples opciones. Cada opción tiene su propia etiqueta <input type="checkbox"> y suelen agruparse bajo un mismo nombre.

html

"Este ejemplo muestra una serie de casillas de verificación donde el usuario puede seleccionar múltiples opciones. Cada casilla tiene el mismo nombre de 'hobbies', pero un valor diferente. Esto permite enviar varias opciones seleccionadas en un mismo campo."

Botones de Opción (`radio`)

Los botones de opción permiten seleccionar solo una opción dentro de un grupo. Al igual que las casillas de verificación, se agrupan con un mismo nombre.

html

"Aquí tenemos botones de opción para que el usuario seleccione su género. Al compartir el mismo nombre 'gender', solo se puede seleccionar una de las opciones."

Menús de Selección (`select`)

El elemento <select> permite al usuario elegir una opción de una lista desplegable. Dentro del <select>, cada opción se define con <option>.

html

"En este ejemplo, el usuario puede seleccionar su país de una lista desplegable. Cada país está definido como una 'option' dentro del 'select'. El valor de cada opción será enviado como parte del formulario."

Campos de Texto de Múltiples Líneas: `<textarea>`

El elemento <textarea> permite que el usuario ingrese texto de varias líneas, ideal para comentarios o mensajes largos.

html

"El campo de tipo 'textarea' permite la entrada de texto en múltiples líneas. En este ejemplo, hemos definido cuatro filas y cincuenta columnas para el área de texto."

Botones en Formularios

Los botones permiten que el usuario envíe los datos del formulario o ejecute una acción específica. Los botones de envío son esenciales, pero también existen otros tipos de botones que cumplen funciones distintas.

Botón de Envío (`submit`)

El botón de tipo submit envía el formulario a la URL especificada en el atributo action del <form>.

html

"Este botón de tipo 'submit' envía el formulario cuando el usuario hace clic en él. Al hacerlo, los datos del formulario se enviarán al servidor."

Botón de Restablecer (`reset`)

El botón de tipo reset borra todos los valores de entrada del formulario, devolviéndolos a sus valores iniciales.

html

"Este botón de tipo 'reset' permite al usuario limpiar todos los campos del formulario y restaurarlos a sus valores originales."

Prácticas para la Organización y Usabilidad de los Elementos

Para mejorar la accesibilidad y usabilidad de los formularios:

Asocia las etiquetas a los campos: Usa el atributo for en <label> para asociarlo con el id del campo de entrada correspondiente.
Usa fieldset y legend para agrupar elementos relacionados: Agrupar elementos similares mejora la organización del formulario.

Ejemplo de Organización de Campos

html

"En este ejemplo, usamos 'fieldset' para agrupar los campos de información personal y de preferencias. El 'legend' proporciona un título descriptivo para cada grupo, mejorando la organización del formulario y su accesibilidad."

Cierre del Capítulo

En este capítulo, hemos cubierto los diferentes elementos que componen un formulario en HTML, explicando el uso de cada uno y proporcionando ejemplos prácticos. En el próximo capítulo, profundizaremos en los atributos y controles de los formularios, incluyendo atributos esenciales como required, placeholder y otros que permiten un control detallado sobre la experiencia del usuario.

Volver al capítulo anterior

Marcar como leìdo y continuar

Pregúntame lo que sea