Etiquetas para inputs
Parte de la sección Fundamentos del Journey de HTML de Coddy. Lección 39 de 60.
No siempre queda muy claro qué representa una entrada sin una etiqueta. Una etiqueta ofrece a los usuarios una indicación visual clara del tipo de entrada que se espera en ese campo. Las etiquetas se crean con la etiqueta <label>.
Esta es la sintaxis básica:
<label for="field">Label text</label>
<input type="text" id="field"><label>: La etiqueta que crea la etiqueta.
for: Un vínculo entre la etiqueta y un campo del formulario. El valor defordebe coincidir con eliddel campo del formulario.
- Texto de la etiqueta: el texto que describe para qué sirve el campo del formulario.
<input>: El campo del formulario al que hace referencia la etiqueta.
id: El identificador único del campo del formulario, que coincide con el atributoforde la etiqueta.
Una vez vinculados, al hacer clic en el texto de la etiqueta, el cursor se coloca en su campo de entrada (este recibe el foco), lo que también ofrece a los usuarios un área más grande donde hacer clic.
Desafío
FácilAñade las siguientes etiquetas dentro de la etiqueta <form>:
- Un
<label>con el texto 'First Name:' y el atributoforestablecido en 'firstname'. - Un campo
<input>contype="text". - El campo
<input>debe tener unidque coincida con el atributoforde la etiqueta.
Pruébalo tú mismo
<!DOCTYPE html>
<html>
<body>
<form>
<!-- Escribe el código aquí -->
</form>
</body>
</html>
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Fundamentos
1Fundamentos de HTML
¿Qué es HTML?Estructura básica de HTMLEtiquetas y elementosAnidamiento y cierre de etiquetasComentarios en HTML4Tarjeta de receta
Descripción general del proyectoTítulo y descripción de la receta
IngredientesPasos2Texto y formato
EncabezadosPárrafosSaltos de líneaTexto en negrita y cursivaNegrita y cursiva de nuevoResumen - Formato8Formularios e Inputs Parte 1
Conceptos básicos de formulariosInputs de textoAtributos de los inputsCampo de contraseñaEtiquetas para inputsResumen - Formulario básico9Formularios e Inputs Parte 2
Radio buttonsCheckboxesDropdownsBotonesBotones en formulariosRepaso - Formularios #1Repaso - Formularios #2Practica por tu cuenta: Playground de Web