, Используя теги структуры структуры на вашей веб-странице HTML5 - макеты

С самого начала веб-страницы имели возможность собирать данные от пользователей. HTML5 имеет стандартный, но весьма полезный набор элементов формы, которые вы можете использовать для ввода. Эти элементы формы соответствуют многим тем же правилам, что и другие теги.

На этом рисунке показана форма, содержащая все основные элементы формы HTML, с которыми вы можете столкнуться:

Тегами, которые вы используете для управления общей структурой формы, являются:

• : Этот тег содержит фактическую форму; он охватывает все остальные элементы формы. Тег должен также включать атрибут action = ". Это означает, что вы не планируете вызывать серверный скрипт при отправке формы.

• : Этот специальный тег позволяет группировать ряд элементов ввода вместе. Это не требуется, но облегчить навигацию по сложным формам. По умолчанию у этого поля есть отдельная граница, но вы можете изменить это с помощью CSS.

• : Вы можете добавить легенду к набору полей, чтобы действовать как метка для всего набора полей.

• : Это маркирует текст как метку, связанную с определенным элементом ввода. Вы можете использовать необязательный атрибут для указания того, с каким элементом ввода связана метка. Теги меток обычно используются для упрощения управления стилями CSS.

Код страницы, использующий все теги структуры, показанные на рисунке, выглядит следующим образом:

formDemo. html

Демонстрация формы
Текстовый ввод
Текстовое поле
Пароль
Текстовая область Текст здесь
Выбор элементов
Выбрать Список один два три четыре
Флажок Яйца зеленые яйца
Кнопки с радиоприемниками small medium large
Кнопки
Стандартная кнопка

Эти метки полей, легенд и меток не требуются, но они помогают организовать страницу, поэтому ее проще выложить с помощью CSS. Правильное использование этих тегов и CSS часто упрощает работу с вашими формами, чем старые хакеры на основе таблиц.