Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Elementos de Entrada de Formulario y Etiqueta | Tablas y Formularios
Conceptos básicos de HTML
course content

Contenido del Curso

Conceptos básicos de HTML

Conceptos básicos de HTML

1. Comprendiendo la Web y HTML
2. Fundamentos de HTML
3. Imágenes y Medios
4. Tablas y Formularios
5. HTML Avanzado

bookElementos de Entrada de Formulario y Etiqueta

Como hemos visto antes, el elemento más poderoso de un formulario es el input. Este elemento espera datos del usuario. Vamos a centrarnos en él.

Tipos de Input

Input de Texto

Diseñado para la entrada de datos textuales cortos, como nombres de usuario, direcciones de correo electrónico o mensajes breves.

Input de Contraseña

Utilizado para la entrada de contraseñas, donde los caracteres están enmascarados por razones de seguridad. Asegura la privacidad ocultando los caracteres ingresados.

Input de Correo Electrónico

Utilizado para recopilar direcciones de correo electrónico de los usuarios. Realiza validación del lado del cliente para asegurar que el valor ingresado sea válido en formato de correo electrónico.

Input de Teléfono

Utilizado para recopilar números de teléfono de los usuarios. Permite a los usuarios ingresar números de teléfono en varios formatos, incluidos números internacionales.

Input de Número

Utilizado para recopilar datos numéricos de los usuarios. Proporciona un teclado numérico en dispositivos móviles para facilitar la entrada.

Casilla de verificación

Permite a los usuarios seleccionar una o más opciones de una lista de opciones. Adecuado para escenarios donde se permiten múltiples selecciones, como seleccionar varios elementos de una lista o aceptar términos y condiciones.

Botón de opción

Permite a los usuarios seleccionar una opción de una lista de opciones mutuamente excluyentes. Adecuado para escenarios donde solo se debe seleccionar una opción, como la selección de género o la elección de un método de pago.

Entrada de archivo

Permite a los usuarios cargar archivos desde su dispositivo, elegir de su sistema de archivos local y enviarlos con los datos del formulario. Esta función es particularmente útil al adjuntar documentos o imágenes.

Entrada de fecha, Entrada de hora y Entrada de fecha y hora

Permite a los usuarios ingresar fechas, horas o ambas. Proporciona interfaces amigables para seleccionar fechas y horas. Útil para capturar fechas de nacimiento, horarios de citas o calendarios de eventos.

Ejemplo: Ingrese algo en los campos, y sugerirán varias opciones. No se preocupe; no se recopilarán datos.

html

index

css

index

js

index

copy

Es posible que haya notado que completar el formulario no es muy conveniente cuando no entiende lo que se solicita en cada campo. Por eso las etiquetas vienen en nuestra ayuda.

Etiquetas

Las etiquetas (<label>) son esenciales para vincular etiquetas de texto con elementos de entrada de formulario, mejorando la accesibilidad y la facilidad de uso. Es crucial que el atributo for de la etiqueta <label> coincida con el atributo id del elemento input asociado.
Ejemplo:

En el ejemplo anterior:

  • Cuando haces clic en la etiqueta Username:, se enfocará automáticamente en el campo de entrada correspondiente;
  • La label y el input están vinculados juntos usando los atributos for y id, respectivamente;
  • Ambos atributos for y id tienen el mismo valor (username).

Hagamos que completar el formulario sea más fácil agregando etiquetas a las entradas del ejemplo anterior.
Ejemplo:

html

index

css

index

js

index

copy

Tutorial en Video

1. ¿Qué atributo de la etiqueta `<label>` se utiliza para asociarla con un elemento `<input>` específico en un formulario?
2. ¿Qué atributo falta para el elemento de entrada que necesita estar asociado con el elemento de etiqueta?
¿Qué atributo de la etiqueta `<label>` se utiliza para asociarla con un elemento `<input>` específico en un formulario?

¿Qué atributo de la etiqueta <label> se utiliza para asociarla con un elemento <input> específico en un formulario?

Selecciona la respuesta correcta

¿Qué atributo falta para el elemento de entrada que necesita estar asociado con el elemento de etiqueta?

¿Qué atributo falta para el elemento de entrada que necesita estar asociado con el elemento de etiqueta?

Selecciona la respuesta correcta

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 5
some-alt