Etiquetas para inputs
Parte de la sección Fundamentals del Journey de HTML de Coddy — lección 39 de 60.
No siempre está muy claro de qué trata una entrada sin una etiqueta. Una etiqueta proporciona a los usuarios una pista visual clara sobre qué tipo de entrada se espera en ese campo. Las etiquetas se crean utilizando la etiqueta <label>.
Aquí está la sintaxis básica:
<label for="field">Label text</label>
<input type="text" id="field"><label>: La etiqueta que crea la etiqueta.
for: Un enlace entre la etiqueta y un campo de formulario. El valor defordebe coincidir con eliddel campo de formulario.
- Texto de la etiqueta: El texto que describe para qué sirve el campo del formulario.
<input>: El campo de formulario al que se refiere la etiqueta.
id: El identificador único para el campo del formulario, que coincide con el atributoforen la etiqueta.
Desafío
FácilAñade las siguientes etiquetas dentro de la etiqueta <form>:
- Una etiqueta
<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 label.
Hoja de referencia
Las etiquetas proporcionan pistas visuales claras para las entradas de formulario utilizando la etiqueta <label>:
<label for="field">Label text</label>
<input type="text" id="field">El atributo for en la etiqueta debe coincidir con el atributo id del campo de entrada correspondiente para crear una conexión adecuada.
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 Fundamentals
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 #2