Метки для полей ввода
Часть раздела Fundamentals путешествия по HTML на Coddy — урок 39 из 60.
Без метки не всегда понятно, к чему относится поле ввода. Метка дает пользователям четкий визуальный ориентир относительно того, какой тип ввода ожидается в этом поле. Метки создаются с помощью тега <label>.
Вот базовый синтаксис:
<label for="field">Label text</label>
<input type="text" id="field"><label>: Тег, который создает подпись.
for: Связь между меткой и полем формы. Значениеforдолжно совпадать сidполя формы.
- Текст метки: Текст, который описывает, для чего предназначено поле формы.
<input>: Поле формы, на которое ссылается метка.
id: Уникальный идентификатор для поля формы, который совпадает с атрибутомforв метке.
Задание
ЛегкоДобавьте следующие теги внутрь тега <form>:
- Тег
<label>с текстом 'First Name:' и атрибутомfor, установленным в 'firstname'. - Поле
<input>сtype="text". - Поле
<input>должно иметьid, который совпадает с атрибутомforтега label.
Шпаргалка
Метки обеспечивают четкие визуальные подсказки для полей ввода форм с помощью тега <label>:
<label for="field">Label text</label>
<input type="text" id="field">Атрибут for в метке должен совпадать с атрибутом id соответствующего поля ввода для создания правильной связи.
Попробуйте сами
<!DOCTYPE html>
<html>
<body>
<form>
<!-- Напишите код здесь -->
</form>
</body>
</html>
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Fundamentals
1Основы HTML
Что такое HTML?Базовая структура HTMLТеги и элементыВложенность и закрывающие тегиКомментарии в HTML7Страница личного профиля
Обзор проектаСекция Header
Фото профиляСекция «Обо мне»Ссылки на социальные сети2Текст и форматирование
ЗаголовкиАбзацыПереносы строкЖирный и курсивный текстСнова жирный и курсивныйПовторение — форматирование8Формы и поля ввода, часть 1
Основы формТекстовые поля вводаАтрибуты полей вводаПоле для пароляМетки для полей вводаПовторение — основы форм11Страница регистрации на мероприятие
Обзор проектаСекция HeaderСекция деталей мероприятияФорма регистрацииСекция Footer9Формы и элементы ввода. Часть 2
РадиокнопкиЧекбоксыВыпадающие спискиКнопкиКнопки в формахПовторение — Формы №1Повторение — Формы №2