- Как структурировать HTML-формы
- Элемент
- Элементы и
- Элемент
- Лейблы тоже кликабельны!
- Несколько лейблов
- Часто используемые с формами HTML-структуры
- Активное обучение: построение структуры формы
- Протестируйте себя!
- Заключение
- Смотрите также
- В этом разделе
- Дополнительные темы
- Found a content problem with this page?
- Html css form legend
- Синтаксис
- Атрибуты
- Закрывающий тег
- Статьи по теме
- Html css form legend
- Кратко
- Пример
- Как понять
- Как пишется
- На практике
- Realetive советует
- На собеседовании
Как структурировать HTML-формы
Получив базовые знания, теперь мы более подробно рассмотрим элементы, используемые для придания структуры и значения различным частям форм.
Уровень подготовки: | Основы компьютерной грамотности, и базовые знания HTML. |
---|---|
Цель: | Разобраться как структурировать HTML формы и задавать им семантику для того, чтобы они были удобны и доступны в использовании. |
Гибкость HTML форм делает их одной из самых сложных структур в HTML; вы можете создать любую форму, используя элементы и атрибуты форм. Использование правильной структуры, при создании HTML форм, поможет гарантировать их удобство и доступность.
Элемент
Мы уже встречались с этим в предыдущей статье.
Предупреждение: Внимание: Строго запрещается размещать форму внутри другой формы. Такое размещение может привести к непредсказуемому поведению форм, в зависимости от браузера.
Элементы и
form> fieldset> legend>Fruit juice sizelegend> p> input type="radio" name="size" id="size_1" value="small"> label for="size_1">Smalllabel> p> p> input type="radio" name="size" id="size_2" value="medium"> label for="size_2">Mediumlabel> p> p> input type="radio" name="size" id="size_3" value="large"> label for="size_3">Largelabel> p> fieldset> form>
Примечание: вы можете найти этот пример в fieldset-legend.html (также посмотрите на результат).
Читая эту форму, экранный диктор произнесёт «Fruit juice size small» для первого элемента, «Fruit juice size medium» — для второго, «Fruit juice size large» — для третьего.
Элемент
label for="name">Name:label> input type="text" id="name" name="user_name">
При правильно связанном элементе с элементом через атрибуты for и id соответственно (атрибут for ссылается на атрибут id соответствующего виджета формы), скринридер прочтёт вслух что-то наподобие «Name, edit text».
Если не правильно установлен, скринридер прочитает это как «Edit text blank», что не несёт в себе никакой уточняющей информации, позволяющей понять предназначение данного текстового поля.
Обратите внимание на то, что виджет формы может быть вложен в элемент , как на примере:
label for="name"> Name: input type="text" id="name" name="user_name"> label>
Однако даже в таких случаях лучше всё равно указывать атрибут for , так как некоторые вспомогательные технологии не распознают неявную связь между текстами-подсказками и виджетами.
Лейблы тоже кликабельны!
Ещё одно преимущество при правильно установленных текстах-подсказках заключается в том, что по ним можно кликнуть для активации связанных с ними виджетов. Это поддерживается во всех браузерах. Это удобно как для текстовых полей ввода, в которых устанавливается фокус при клике на текст-подсказку, так и для радио-кнопок и чекбоксов — область попадания такого элемента управления может быть очень маленькой, поэтому полезно сделать её как можно больше.
form> p> label for="taste_1">I like cherrylabel> input type="checkbox" id="taste_1" name="taste_cherry" value="1"> p> p> label for="taste_2">I like bananalabel> input type="checkbox" id="taste_2" name="taste_banana" value="2"> p> form>
Примечание: вы можете посмотреть этот пример тут checkbox-label.html (также можно посмотреть код вживую).
Несколько лейблов
На самом деле вы можете добавить несколько текстов-подсказок на один виджет формы, но это не очень хорошая идея, так как у некоторых вспомогательных технологий могут возникнуть проблемы с обработкой такой структуры. Вместо использования нескольких лейблов, лучше вложить виджет формы внутрь одного элемента .
p>Required fields are followed by abbr title="required">*abbr>.p> div> label for="username">Name:label> input type="text" name="username"> label for="username">abbr title="required">*abbr>label> div> div> label for="username"> span>Name:span> input id="username" type="text" name="username"> abbr title="required">*abbr> label> div> div> label for="username">Name: abbr title="required">*abbr>label> input id="username" type="text" name="username"> div>
Параграф на первой строке примера описывает правило для обязательных элементов. Вначале необходимо убедиться, что вспомогательные технологии, такие как программы чтения с экрана, отображают или озвучивают их пользователю, прежде чем он найдёт требуемый элемент. Таким образом они будут знать, что означает звёздочка. Программа чтения с экрана будет произносить звёздочку как «звёздочку» или «обязательно», в зависимости от настроек программы чтения с экрана — в любом случае, первый абзац даёт понимание того, что будет означать звёздочка далее в форме.
- В первом примере лейбл не будет прочитан вместе с текстовым полем — получится лишь «edit text blank» и отдельно читаемые тексты-подсказки. Множественные элементы могут быть неправильно интерпретированы программой чтения с экрана.
- Второй пример немного лучше — лейбл будет прочитан вместе с текстовым полем и будет звучать как «name star name edit text», однако тексты-подсказки всё ещё разделены. Это всё ещё немного сбивает с толку, но на этот раз ситуация немного лучше, потому что с текстовое поле связано с текстом-подсказкой.
- Третий пример — лучший, так как весь лейбл будет связан с текстовым полем и озвучен целиком, а при чтении текст будет звучать как «name star edit text».
Примечание: В зависимости от программы для чтения с экрана результаты могут немного отличаться. В данной статье для тестирования использовался VoiceOver (NVDA ведёт себя аналогично). Также мы были бы рады, если бы вы поделились своим опытом.
Примечание: вы можете найти этот пример на GitHub required-labels.html (также можно посмотреть вживую). Запускайте пример, закомментировав остальные, иначе скриридеры не смогут правильно распознать контент, если у вас будет несколько лейблов и несколько текстовых полей с одинаковым ID!
Часто используемые с формами HTML-структуры
Помимо структур, характерных только для HTML-форм, хорошо помнить, что формы — это просто HTML. Это означает, что вы можете использовать всю мощь HTML для структурирования HTML-формы.
В добавок к элементу часто используют HTML-заголовки (например, (en-US), (en-US)) и секционирование (например, ) для структурирования сложных форм.
Прежде всего, вам нужно найти стиль, который будет удобен именно вам для программирования и который также позволит создавать доступные и удобные формы.
Активное обучение: построение структуры формы
Давайте применим эти идеи на практике и построим более сложноструктурируемую форму — формы оплаты. Форма будет содержать некоторые типы виджетов формы, которые вы можете пока не понять — не переживайте об этом, вы найдёте информацию в следующей статье (Основные нативные элементы управления формами (en-US) ). А пока внимательно прочитайте описание, следуя приведённым ниже инструкциям, и начинайте формировать представление о том, какие элементы обёртки мы используем для структурирования формы и почему.
- Для начала сделайте локальную копию пустого шаблона и CSS для нашей платёжной формы в новой директории на вашем компьютере.
- Сначала подключите CSS к HTML, добавив следующую строку кода внутрь HTML-элемента :
link href="payment-form.css" rel="stylesheet">
h1>Payment formh1> p>Required fields are followed by strong>abbr title="required">*abbr>strong>.p>
section> h2>Contact informationh2> fieldset> legend>Titlelegend> ul> li> label for="title_1"> input type="radio" id="title_1" name="title" value="M." > Mister label> li> li> label for="title_2"> input type="radio" id="title_2" name="title" value="Ms."> Miss label> li> ul> fieldset> p> label for="name"> span>Name: span> strong>abbr title="required">*abbr>strong> label> input type="text" id="name" name="username"> p> p> label for="mail"> span>E-mail: span> strong>abbr title="required">*abbr>strong> label> input type="email" id="mail" name="usermail"> p> p> label for="pwd"> span>Password: span> strong>abbr title="required">*abbr>strong> label> input type="password" id="pwd" name="password"> p> section>
section> h2>Payment informationh2> p> label for="card"> span>Card type:span> label> select id="card" name="usercard"> option value="visa">Visaoption> option value="mc">Mastercardoption> option value="amex">American Expressoption> select> p> p> label for="number"> span>Card number:span> strong>abbr title="required">*abbr>strong> label> input type="number" id="number" name="cardnumber"> p> p> label for="date"> span>Expiration date:span> strong>abbr title="required">*abbr>strong> em>formatted as mm/yyem> label> input type="date" id="date" name="expiration"> p> section>
p> button type="submit">Validate the paymentbutton> p>
Вы можете увидеть законченную форму в действии ниже (также её можно найти на GitHub — посмотрите payment-form.html и живой пример):
Протестируйте себя!
Вы дошли до конца статьи, но можете ли вспомнить самую важную информацию? Далее вы можете найти тест, который поможет убедиться, что вы усвоили знания прежде чем двигаться дальше — посмотрите Test your skills: Form structure (en-US) .
Заключение
Теперь у вас есть все необходимые знания для того, чтобы правильно структурировать вашу HTML-форму. Мы подробнее раскроем затронутые здесь темы в нескольких последующих статьях. В следующей же статье мы изучим все возможные типы виджетов форм, которые могут понадобиться для сбора информации от ваших пользователей.
Смотрите также
В этом разделе
Дополнительные темы
Found a content problem with this page?
This page was last modified on 14 февр. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Html css form legend
Тег применяется для создания заголовка группы элементов формы, которая определяется с помощью тега . Группа элементов обозначается в браузере с помощью рамки, а текст, который располагается внутри контейнера , встраивается в эту рамку.
Синтаксис
Атрибуты
accesskey Переход к группе элементов формы с помощью комбинации клавиш. align Определяет выравнивание текста. title Добавляет всплывающую подсказку к тексту заголовка.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Результат данного примера показан на рис. 1.
Рис. 1. Вид заголовка группы, полученного с помощью тега
Вид рамки и текста заголовка может различаться в разных браузерах. Например, в браузере Safari (рис. 1) рамка прямоугольная, а в Internet Explorer (рис. 2) рамка имеет скругленные углы.
Рис. 2. Вид заголовка группы в браузере Internet Explorer
Статьи по теме
Html css form legend
Добавляет заголовок полям ввода, сгруппированным при помощи .
Время чтения: меньше 5 мин
Обновлено 20 декабря 2021
Кратко
Скопировать ссылку «Кратко» Скопировано
Пример
Скопировать ссылку «Пример» Скопировано
…
fieldset> legend>Заголовок для группы контроловlegend> … fieldset>
Как понять
Скопировать ссылку «Как понять» Скопировано
позволяет описать содержимое , но семантически он не является «представителем» заголовков, хотя выполняет схожую функцию. Он не задаёт иерархию, а лишь характеризует контент внутри «своей» группы — как для соответствующего контрола.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
…
fieldset> legend>Заголовок для группыlegend> … fieldset>
Важно, чтобы был первым дочерним элементом внутри . Если внутри будет больше одного , отобразится только первый, все остальные отобразятся как обычные блочные элементы:
На практике
Скопировать ссылку «На практике» Скопировано
Realetive советует
Скопировать ссылку «Realetive советует» Скопировано
🛠 Для выравнивания положения текста часто советуют использовать атрибут align , но он исключён из современной спецификации, а привычные CSS-правила, например, с text — align : center с работать не будут, т. к. у него блочный контекст, но уникальная строчно-блочная контекстная модель содержимого, которая и создаёт неповторимую обводку от . Поэтому для выравнивания относительно ширины нужно использовать… внезапно margin !
За счёт особой формы обтекания рамкой текста, это можно использовать для характерной стилизации блока и заголовка:
На собеседовании
Скопировать ссылку «На собеседовании» Скопировано
Какая разница между legend , caption и label с точки зрения доступности? Что между ними общего?
Скопировать ссылку «Какая разница между legend, caption и label с точки зрения доступности? Что между ними общего?» Скопировано
Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.