Построение форм

Содержание

Переключатели

Вы можете предоставить пользователю список вариантов на выбор с помощью переключателей.


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

Поскольку все переключатели используют одинаковое значение атрибута name (в данном случае значение status), выбор одного из вариантов отменит все остальные. Переключатели являются взаимоисключающими.

Разница между переключателями и флажками

Хотя флажок существует сам по себе, переключатели могут появляться только в виде списка (что означает, по меньшей мере два варианта).

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

Последние изменения

12.04.2019

Добавлены сведения об ИНН учредителя Сенкевич Александр Павлович: 424849661674

Юридический адрес изменен с 121471, город Москва, Можайское шоссе, 29 /2; стр.1 на 121471, город Москва, Можайское шоссе, дом 29, этаж 1 пом VI к 40 оф 47

Удалены сведения о дополнительном виде деятельности: Деятельность в области технического регулирования, стандартизации, метрологии, аккредитации, каталогизации продукции (71.12.6)

Удалены сведения о дополнительном виде деятельности: Строительство жилых и нежилых зданий (3094)

Удалены сведения о дополнительном виде деятельности: Предоставление прочих финансовых услуг, кроме услуг по страхованию и пенсионному обеспечению, не включенных в другие группировки (40994)

Удалены сведения о дополнительном виде деятельности: Работы строительные специализированные прочие, не включенные в другие группировки (32399)

Удалены сведения о дополнительном виде деятельности: Аренда и лизинг офисных машин и оборудования, включая вычислительную технику (32500)

Удалены сведения о дополнительном виде деятельности: Деятельность в области архитектуры, инженерных изысканий и предоставление технических консультаций в этих областях (8687)

Резюме

Формы играют большую роль в том, как пользователи взаимодействуют с сайтами, предоставляют им информацию и работают с ними. Мы предприняли все правильные шаги, чтобы не только узнать как создавать формы, но и как их стилизовать.

Напомним быстро, что мы обсудили в этом уроке:

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

Наше понимание HTML и CSS продвигается достаточно хорошо и у нас остался только один компонент для изучения: таблицы. В следующей главе мы рассмотрим как организовать и представить данные в таблицах.

Верстка форм

  1. Не используйте для разметки групп инпутов и

    Почему?

    Для разметки групп полей есть более подходящие теги: и . Они не только внесут разнообразие в код, но также сделают вашу форму более доступной.

    А как надо?

    С чистыми и могут возникать затруднения при стилизации и позиционировании контента, но это легко решается дополнительными обёртками.

    Например, так как используется для групп полей, а у каждого поля есть лейбл, каждой паре + обычно требуется обёртка, и здесь можно удобно использовать ненумерованные списки (). После этого можно всё позиционирование делать для списка и его элементов, и с раскладкой больше не будет никаких проблем. Чтобы вместе с инпутом не читалась информация об элементах списка, его нужно скрыть от скринридеров, задав .

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

    • Плохо
    • Хорошо
  2. Не используйте вместо

    Почему?

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

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

    Как это увидеть?

    Посмотрите на форму без стилей:

    А как надо?

    Для одиночного текстового поля не нужны и , они для групп полей. Если такому полю требуется обёртка, можно использовать . Название поля нужно поместить в .

    Если стилизация не привязана к тегу, вы без проблем можете использовать эти же стили (а лучше класс) для стилизации лейбла.

    • Плохо
    • Хорошо

    Теперь ничего не дублируется:

  3. Не используйте для скрытия инпутов

    Почему?

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

    Как это увидеть?

    Установите фокус в первое поле и перемещаясь по форме с помощью и стрелок попробуйте выбрать цвет кота:

    Ничего не получится, с клавиатуры выбор цвета недоступен.

    А как надо?

    Для скрытия инпутов используйте класс :

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

    Попробуйте теперь с помощью и стрелок выбрать цвет кота (чтобы выбрать цвет нажмите пробел):

    Всё работает.

Итого

  • Не используйте для разметки групп инпутов и , есть более подходящие теги: и .
  • Не используйте вместо для одиночного поля, ему не нужны и , достаточно и .
  • Не используйте для скрытия инпутов, они становятся недоступны для скринридеров и навигации с клавиатуры. Скрывайте с помощью

Текстовые поля

Почти всем формам требуется текстовый ввод от пользователей, чтобы ввести своё имя, адрес электронной почты, пароль, адрес и др. Текстовые поля формы приходят в разных вариантах.

Текст <input type=»text»> Допускает любой тип символов
Email <input type=»email»> Может показывать предупреждение, если введён неверный email
Пароль <input type=»password»> Символы показываются как точки
Число <input type=»number»> Могут быть использованы клавиши вверх/вниз
Телефон <input type=»tel»> Может сработать автозаполнение
Многострочный текст <textarea></textarea> Может быть изменён размер поля

Хотя эти поля очень похожи и позволяют пользователям вводить текст любого рода (даже неправильный), их тип обеспечивает специфическую семантику для ввода, определяя, какую информацию поле должно содержать.

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

К примеру, поле для пароля показывает точки вместо символов. А поле для чисел позволяет увеличивать/уменьшать значение с помощью клавиш вверх и вниз.

Элемент

<form> является блочным элементом, который определяет интерактивную часть веб-страницы. Как результат, все элементы управления (такие как <input>, <textarea> или <button>) должны находиться внутри элемента <form>.

Два атрибута HTML необходимы:

  • action содержит адрес, который определяет, куда будет отправлена информация формы;
  • method может быть либо GET, либо POST и определяет, как будет отправлена информация формы.

Как правило, информация формы посылается на сервер. Как эти данные затем будут обработаны выходит за рамки данного руководства.

Подумайте о форме как о наборе элементов управления, которые работают вместе, чтобы выполнить одну операцию. Если вы написали форму входа на сайт, у вас могло быть три поля:

  • поле для электронной почты <input type=»email»>
  • поле для пароля <input type=»password»>
  • кнопка отправки <input type=»submit»>

Эти три элемента HTML будут заключены внутри одной формы <form action=»/login» method=»POST»>.

Вы можете аналогично добавить форму регистрации на той же HTML-странице, в отдельном элементе <form>.

Animated Inputs

The w3-animate-input class transforms the width of an input field to 100% when it gets focus:

Example

<input class=»w3-input w3-animate-input» type=»text» style=»width:30%»>

Example

<input class=»w3-check» type=»checkbox» checked=»checked»> <label>Milk</label><input class=»w3-check» type=»checkbox»><label>Sugar</label> <input class=»w3-check» type=»checkbox» disabled> <label>Lemon (Disabled)</label>

Example

<input class=»w3-radio» type=»radio» name=»gender» value=»male» checked> <label>Male</label><input class=»w3-radio» type=»radio» name=»gender» value=»female»><label>Female</label><input class=»w3-radio» type=»radio» name=»gender» value=»» disabled><label>Don’t know (Disabled)</label>

Select Options

Example

<select class=»w3-select» name=»option»>  <option value=»» disabled selected>Choose your option</option>  <option value=»1″>Option 1</option>  <option value=»2″>Option 2</option>  <option value=»3″>Option 3</option></select>

Example

<select class=»w3-select w3-border» name=»option»>

Form Elements in a Grid

In this example, we use W3.CSS’ Responsive Grid System to make the inputs appear on the same line (on smaller screens, they will stack horizontally with 100% width). You will learn more about this later.

Example

<div class=»w3-row-padding»>  <div class=»w3-third»>    <input class=»w3-input w3-border» type=»text» placeholder=»One»>  </div>  <div class=»w3-third»>    <input class=»w3-input w3-border» type=»text» placeholder=»Two»>  </div>  <div class=»w3-third»>    <input class=»w3-input w3-border» type=»text» placeholder=»Three»>  </div></div>

Grid with Labels

Example

<div class=»w3-row-padding»>  <div class=»w3-half»>    <label>First Name</label>    <input class=»w3-input w3-border» type=»text» placeholder=»Two»>  </div>  <div class=»w3-half»>    <label>Last Name</label>    <input class=»w3-input w3-border» type=»text» placeholder=»Three»>  </div></div>

Полезные HTML-атрибуты

Среди множества атрибутов следует подробнее остановиться на , , и , основной целью которых служит улучшение юзабилити форм. Они не так популярны среди прочих, а их функции в отдельных случаях заменяются JS-кодом.

Автофокус на элементе формы

Атрибут позволяет заранее сфокусироваться на элементе формы, что в определенных ситуациях является прекрасной альтернативой методу в JS:

Предопределение формата вводимых в поле данных

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

Для этих целей существует атрибут , сигнализирующий браузеру о том, клавиатуру какого именно формата использовать при вводе данных. Несмотря на большую полезность, из всех браузеров его (включая элементы с ) только Google Chrome самых свежих версий, а Opera и Firefox — через флаги.

  •  — запрет на отображение клавиатуры;
  •  — текст, соответствующий языку пользователя;
  •  — телефонный формат, содержащий цифры 0−9, знак решётки и астериска, — аналог ;
  •  — формат URL, где присутствуют слеш, точка и элементы автозаполнения вроде «www.» или «.com», — аналог ;
  •  — формат для электронной почты с наличием символа «собака» и точки — аналог ;
  •  — только цифровая клавиатура — аналог ;
  •  — цифровая клавиатура, адаптированная для ввода дробных значений с точкой или запятой;
  •  — клавиатура, оптимизированная для поиска и, как правило, содержащая соответствующую иконку ввода.

Кроме вышеперечисленных значений браузеры так же принимают:

  •  — дословный ввод букв и цифр, при котором, как правило, не применяется автокоррекция введённых данных, что полезно для имён пользователей или паролей;
  •  — латинский алфавит, как правило, с предикативным вводом, служащий для взаимодействия между пользователем и компьютером (например, поиск данных);
  •  — , но для ввода имён;
  •  — , предназначенный для взаимодействия пользователя с другими пользователями и поэтому содержащий более широкий набор возможностей ввода (например, встроенные смайлы);
  •  — с добавлением дополнительных пользовательских языков;
  • и  — служат для ввода текста на японском языке;

Для большей «пуленепробиваемости» атрибут рекомендуется применять вместе с соответствующим , который должен отражать семантически верный тип данных, и, если необходимо, , являющийся дополнительной подсказкой браузеру о том, какие данные следует считать верными:

Перевод вводимых данных в верхний регистр букв

Атрибут позволяет выполнять для виртуальной клавиатуры автоматический перевод данных поля в верхний регистр. Он применяется для , а также для полей с типами или и может иметь следующие значения:

  • или  — перевод в верхний регистр не осуществляется (по умолчанию);
  •  — для символов (артикулы, различные коды);
  •  — для слов (имена, адреса, названия организаций);
  •  — для предложений (полезно для , где контент должен представляться как абзац текста);

Например, подобным образом может выглядеть область ввода для контента, который разработчик хочет видеть оформленным как абзац:

Стоит отметить, что как и , этот атрибут не будет оказывать на данные никакого эффекта в desktop-версиях. Информации о поддержке мобильными браузерами крайне мало, однако по публикациям на официальных сайтах следует, что атрибут работает как минимум в Safari и Google Chrome.

Добавление готовых вариантов для ввода


Юзабилити полей можно улучшить, если предложить пользователю выбрать заданное значение из списка готовых через атрибут и дополняющий его элемент . Отличие от традиционного заключается в том, что поле доступно для редактирования и ввода любых значений, а предлагаемые варианты — элементы  — показываются либо по желанию пользователя, либо во время ввода при условии частичного совпадения по первым (и далее) символам. Это отличное решение в тех случаях, когда вводимые данные можно предугадать засчёт ограниченного количества вариантов.

Для добавления в поле доступных опций в его атрибуте указывается идентификатор списка, которым, в свою очередь, должен обладать :

Атрибут широко поддерживается браузерами за исключением Safari, Opera Mini и некоторых других. Для старых версий существует полифилл.

По данным портала ЗАЧЕСТНЫЙБИЗНЕСОБЩЕСТВО С ОГРАНИЧЕННОЙ ОТВЕТСТВЕННОСТЬЮ «ФОРМА И СТИЛЬ СЕРВИС»По данным портала ЗАЧЕСТНЫЙБИЗНЕС5031122784

О компании: ООО «ФОРМА И СТИЛЬ СЕРВИС» ИНН 5031122784, ОГРН 1165053051866 зарегистрировано 14.10.2016 в регионе Московская Область по адресу: 142440, Московская обл, рабочий поселок Обухово, город Ногинск, улица Владимирская, дом 3 СТР 3, ОФИС 5. Статус: Действующее. Размер Уставного Капитала 5 000 000,00 руб.

Руководителем организации является: Генеральный Директор — Фазлуллина Елена Алексеевна, ИНН . У организации 1 Учредитель. Основным направлением деятельности является «торговля оптовая неспециализированная». На 01.01.2020 в ООО «ФОРМА И СТИЛЬ СЕРВИС» числится 33 сотрудника.

ОГРН  ?   1165053051866    присвоен: 14.10.2016
ИНН  ?   5031122784
КПП  ?   503101001
ОКПО  ?   05127076
ОКТМО  ?   46751000061

Реквизиты для договора  ?  …Скачать

Проверить блокировку cчетов  ?

Контактная информация 8(96… Посмотреть ?

Отзывы об организации  ?: 0   Написать отзыв

Юридический адрес: ? По данным портала ЗАЧЕСТНЫЙБИЗНЕС 142440, Московская обл, рабочий поселок Обухово, город Ногинск, улица Владимирская, дом 3 СТР 3, ОФИС 5 получен 15.08.2017 зарегистрировано по данному адресу: По данным портала ЗАЧЕСТНЫЙБИЗНЕС

По данным портала ЗАЧЕСТНЫЙБИЗНЕС Руководитель Юридического Лица ?По данным портала ЗАЧЕСТНЫЙБИЗНЕС Генеральный ДиректорПо данным портала ЗАЧЕСТНЫЙБИЗНЕС

Фазлуллина Елена Алексеевна

ИНН ?

По данным портала ЗАЧЕСТНЫЙБИЗНЕС

действует с По данным портала ЗАЧЕСТНЫЙБИЗНЕС 14.10.2016

Учредители ? () Уставный капитал: По данным портала ЗАЧЕСТНЫЙБИЗНЕС 5 000 000,00 руб.

100%

По данным портала ЗАЧЕСТНЫЙБИЗНЕС

По данным портала ЗАЧЕСТНЫЙБИЗНЕС

ОБЩЕСТВО С ОГРАНИЧЕННОЙ ОТВЕТСТВЕННОСТЬЮ «ФОРМА И СТИЛЬ» По данным портала ЗАЧЕСТНЫЙБИЗНЕС 5 000 000,00руб., 14.10.2016 , ИНН

Основной вид деятельности: ?По данным портала ЗАЧЕСТНЫЙБИЗНЕС 46.90 торговля оптовая неспециализированная

Дополнительные виды деятельности:

Единый Реестр Проверок (Ген. Прокуратуры РФ) ?

Реестр недобросовестных поставщиков: ? По данным портала ЗАЧЕСТНЫЙБИЗНЕС

не числится.

Налоговый орган ? По данным портала ЗАЧЕСТНЫЙБИЗНЕС Инспекция Федеральной Налоговой Службы По Г.ногинску Московской Области Дата постановки на учет: По данным портала ЗАЧЕСТНЫЙБИЗНЕС 14.10.2016

Регистрация во внебюджетных фондах

Фонд Рег. номер Дата регистрации
ПФР  ?   060031036955 По данным портала ЗАЧЕСТНЫЙБИЗНЕС 17.10.2016
ФСС  ?   503101342550311 По данным портала ЗАЧЕСТНЫЙБИЗНЕС 17.10.2016

Уплаченные страховые взносы за 2018 год (По данным ФНС):

Коды статистики

ОКАТО  ?   46451561000
ОКОГУ  ?   4210014
ОКОПФ  ?   12300
ОКФС  ?   16

Финансовая отчетность ООО «ФОРМА И СТИЛЬ СЕРВИС» ?

 ?

Финансовый анализ отчетности за 2019 год Коэффициент текущей ликвидности: 0.7 Коэффициент капитализации: -3.5 Рентабельность продаж (ROS): -0 Подробный анализ…

В качестве Поставщика:

,

на сумму

В качестве Заказчика:

,

на сумму

По данным портала ЗАЧЕСТНЫЙБИЗНЕС

Судебные дела ООО «ФОРМА И СТИЛЬ СЕРВИС» ?

найдено по ИНН: По данным портала ЗАЧЕСТНЫЙБИЗНЕС

найдено по наименованию (возможны совпадения): По данным портала ЗАЧЕСТНЫЙБИЗНЕС

По данным портала ЗАЧЕСТНЫЙБИЗНЕС

Исполнительные производства ООО «ФОРМА И СТИЛЬ СЕРВИС» ?

найдено по наименованию и адресу (возможны совпадения): По данным портала ЗАЧЕСТНЫЙБИЗНЕС

По данным портала ЗАЧЕСТНЫЙБИЗНЕС

Лента изменений ООО «ФОРМА И СТИЛЬ СЕРВИС» ?

Не является участником проекта ЗАЧЕСТНЫЙБИЗНЕС ?

Атрибуты формы и полей

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

disabled


Логический атрибут disabled выключает элемент управления таким образом, что он не доступен для взаимодействия или ввода. Заблокированные элементы не будут отправлять никакого значения на сервер для обработки формы.

Применение атрибута disabled к элементу <fieldset> отключит все элементы управления формы внутри группы.

placeholder

Атрибут placeholder в HTML5 предлагает подсказку или совет внутри элемента <input> или <textarea>, которая исчезает при щелчке по элементу управления или при получении фокуса. Это применяется, чтобы дать пользователям дальнейшую информацию о том, как поле формы должно быть заполнено, к примеру, использовать формат электронной почты.

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

required

Логический атрибут required в HTML5 утверждает, что элемент формы должен содержать значение при отправке на сервер. Если у элемента формы нет значения, будет отображаться сообщение об ошибке с просьбой пользователю заполнить обязательное поле. В настоящее время стили сообщения об ошибке контролируются браузером и не могут быть оформлены в CSS. Некорректные элементы формы, с другой стороны, могут быть стилизованы с помощью псевдоклассов :optional и :required.

Дополнительные атрибуты

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

  • accept
  • autocomplete
  • autofocus
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • max
  • maxlength
  • min
  • pattern
  • readonly
  • selectionDirection
  • step

#4. Кнопка при наведении

В отличие от последних трёх примеров, этот будет более сложным. При наведении курсора на верхнюю часть ввода будет нажата кнопка, позволяющая вам продолжить — вроде Send или Go. Внутри кнопки есть значок увеличительного стекла.

HTML

Этот HTML немного отличается. Вход всё ещё там, конечно, но значок теперь внутри элемента кнопки, который идёт после input

Важно, что button идёт после input, поскольку это связано с тем, как эффект ожидания будет создан в CSS

CSS

CSS в этом примере отличается, обратите внимание! Ниже приведен фрагмент стиля контейнера

Во-первых,  отсутствует; Это больше не важно, так как иконка не полагается на него, чтобы помещаться поверх ввода. Однако у нас есть 

Это не позволяет отображать кнопку, когда она не в ожидании. Технически кнопка, которая появляется, находится справа от входа, но благодаря  она не отображается, когда выходит за пределы ширины контейнера — container и input имеют одинаковую ширину

Однако у нас есть . Это не позволяет отображать кнопку, когда она не в ожидании. Технически кнопка, которая появляется, находится справа от входа, но благодаря  она не отображается, когда выходит за пределы ширины контейнера — container и input имеют одинаковую ширину.

Ниже input не имеет перехода, потому что теперь это больше не элемент.

Следующий фрагмент для изменения цвета placeholders.

Ниже приведён код стиля кнопки при наведении. Для трюка его захода со стороны надо разместить его прямо за input и спрятать до наведения. Кнопка — элемент, который изменяется — он перемещается — поэтому именно он определяет переход. Чтобы упростить задачу, я определила переход для воздействия на все свойства.

Добавление эффектов Hover

Для затухания, button необходимо разместить поверх input. Это делается через отрицательную margin. Ранее мы установили непрозрачность кнопки в , поэтому мы должны сбросить ее до , чтобы кнопка также была видна.

Последнее правило изменяет фон button только при наведении курсора на кнопку. Хорошо дать знать пользователю, что кнопка активна и он может нажать на неё, чтобы отправить запрос; нет смысла иметь кнопку, если она кажется неактивной.

Краткая справка

ООО «Звезда» зарегистрирована 2 октября 2003 г. регистратором Межрайонная инспекция Федеральной налоговой службы № 46 по г. Москве. Руководитель организации: генеральный директор Сенкевич Александр Павлович. Юридический адрес ООО «Звезда» — 121471, город Москва, Можайское шоссе, дом 29, этаж 1 пом VI к 40 оф 47.

Основным видом деятельности является «Торговля оптовая неспециализированная», зарегистрировано 19 дополнительных видов деятельности. Организации ОБЩЕСТВО С ОГРАНИЧЕННОЙ ОТВЕТСТВЕННОСТЬЮ «ЗВЕЗДА» присвоены ИНН 3513529762, ОГРН 2396304363103, ОКПО 26164893.

Организация элементов формы

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

С помощью <label>, <fieldset> и <legend> мы можем лучше организовать формы и направлять пользователей правильно их завершать.

<label>

Элемент <label> содержит подписи или заголовки для управления формой, однозначно связывая их вместе, создавая тем самым доступную форму для всех пользователей и вспомогательных технологий. <label> должны включать в себя текст, описывающий поля к которым они относятся.

<label> могут включать в себя атрибут for, его значение должно быть таким же, как значение атрибута id у элемента, с которым связан <label>. Соответствие значений атрибутов for и id связывает два элемента вместе, что позволяет пользователям нажать на <label> и передать фокус нужному полю формы.

Демонстрация label

При желании, <label> может обернуть поля формы, такие как переключатели или флажки. Это позволяет опустить атрибуты for и id.

<fieldset>

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

<legend>

Элемент <legend> предоставляет подпись или заголовок для элемента <fieldset>. Элемент <legend> оборачивает текст, описывающий элементы управления формы, которые находятся внутри <fieldset>. Разметка должна включать в себя элемент <legend> сразу после открывающего тега <fieldset>. На странице подпись появится в левом верхнем углу рамки <fieldset>.


С этим читают