Веб-формы — Работа с пользовательскими данными

Общие структуры HTML, используемые с формами

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

в списке

or
.
и
элементы также широко используются. Списки рекомендуются для структурирования нескольких флажков или переключателей.
В дополнение к
элементу также обычной практикой является использование заголовков HTML (например, h1 , h2 ) и секций (например
) для структурирования сложных форм.
Прежде всего, вы должны найти удобный стиль кодирования, который приводит к доступным и удобным формам. Каждый отдельный раздел функциональности должен содержаться в отдельном
элемент с
элементами, содержащими переключатели.

Активное обучение: построение структуры формы

Давайте применим эти идеи на практике и создадим немного более сложную форму — платежную форму. Эта форма будет содержать несколько типов элементов управления, которые вы, возможно, еще не понимаете. Пока не беспокойтесь об этом; вы узнаете, как они работают, в следующей статье ( Основные собственные элементы управления формой ). А пока внимательно прочитайте описания, следуя приведенным ниже инструкциям, и начните понимать, какие элементы оболочки мы используем для структурирования формы и почему.
Для начала сделайте локальную копию нашего пустого файла шаблона и CSS для нашей платежной формы в новом каталоге на вашем компьютере.
Примените CSS к HTML, добавив следующую строку внутри HTML :

Скопировать в буфер обмена
Затем создайте форму, добавив
элемент:

...


Скопировать в буфер обмена
Внутри
элемента добавьте заголовок и абзац, чтобы информировать пользователей о том, как отмечены обязательные поля: