Метки для полей ввода
Часть раздела Основы путешествия по 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>.
Попробуйте сами
<!DOCTYPE html>
<html>
<body>
<form>
<!-- Напишите код здесь -->
</form>
</body>
</html>
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Основы
1Основы HTML
Что такое HTML?Базовая структура HTMLТеги и элементыВложенность и закрывающие тегиКомментарии в HTML7Страница личного профиля
Обзор проектаСекция Header
Фото профиляСекция «Обо мне»Ссылки на социальные сети2Текст и форматирование
ЗаголовкиАбзацыПереносы строкЖирный и курсивный текстСнова жирный и курсивныйПовторение — форматирование8Формы и поля ввода, часть 1
Основы формТекстовые поля вводаАтрибуты полей вводаПоле для пароляМетки для полей вводаПовторение — основы форм11Страница регистрации на мероприятие
Обзор проектаСекция HeaderСекция деталей мероприятияФорма регистрацииСекция Footer9Формы и элементы ввода. Часть 2
РадиокнопкиЧекбоксыВыпадающие спискиКнопкиКнопки в формахПовторение — Формы №1Повторение — Формы №2Потренируйтесь самостоятельно: Песочница Web