Как задаются списки переключателей в html

Как структурировать 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) ). А пока внимательно прочитайте описание, следуя приведённым ниже инструкциям, и начинайте формировать представление о том, какие элементы обёртки мы используем для структурирования формы и почему.

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

link href="payment-form.css" rel="stylesheet" /> 

form>form> 

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-форму. Мы подробнее раскроем затронутые здесь темы в нескольких последующих статьях. В следующей же статье мы изучим все возможные типы виджетов форм, которые могут понадобиться для сбора информации от ваших пользователей.

Смотрите также

• A List Apart: Sensible Forms: A Form Usability Checklist

• Назад
• Обзор: Forms
• Далее

В этом разделе

• Ваша первая HTML форма
• Как структурировать HTML-формы
• Стандартные виджеты форм
• The HTML5 input types (en-US)
• Other form controls (en-US)
• Стили HTML-форм
• Advanced form styling (en-US)
• UI pseudo-classes (en-US)
• Проверка данных формы
• Отправка данных формы

Дополнительные темы

• Как создавать пользовательские виджеты форм
• Sending forms through JavaScript
• Property compatibility table for form widgets (en-US)

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

4. Формы и фреймы

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

4.1. Использование форм в документах

Формы на WEB -страницах используются для организации обмена данными между пользователем броузера и Web-сервером. Данные, введенные пользователем в формах ввода, передаются при помощи специальных методов технологии клиент/сервер, в CGI сценарий обработки данных Web-сервера .

Для размещения форм в HTML применяется контейнерный тег

.

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

Кроме вышеперечисленных элементов форм в контейнере

.

могут находиться теги HTML задающие форматирование элементов формы и ее структуру. Рассмотрим элементы форм:

Текстовые панели

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

Раскрывающиеся списки

Раскрывающиеся списки определяются при помощи контейнерного тега . . Для определения параметров раскрывающегося списка, применяются следующие атрибуты:

Элементы списка задаются при помощи тега , со следующими атрибутами:

Поля ввода данных, флажки, переключатели и кнопки

Данные элементы форм определяются при помощи тега . Тип элемента задается при помощи атрибута TYPE, который может принимать следующие значения:

TEXT — текстовое поле ввода;

PASSWORD — поле ввода пароля (вводимые символы заменяются звездочками );

CHECKBOX — элемент флажок;

RADIO — элемент переключатель;

BUTTON — элемент управления-кнопка (используется для выполняется сопоставленного ей обработчика события onClick — сценария интерактивного управления, выполняемого броузером );

RESET — элемент управления-кнопка при нажатии на которую броузер очищает форму, от введенных пользователем значений;

SUBMIT — элемент управления-кнопка при нажатии нам которую броузер отправляет данные, введенные пользователем в форму, на обработку серверу (атрибут action ), заданным методом (атрибут method).

Для определения параметров элементов и их значений, применяются следующие атрибуты:

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

Пример 8. Использование форм ввода данных. [просмотр примера в окне]

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

&nbsp

&nbsp

Ваши вопросы и замечания прошу направлять dmitriy_v_k@hotmail.com
&copy 2001 Дмитрий Красюк
Дата последней модификации: Пятница Март 30, 2001.

1.8. HTML-списки

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

• маркированный список —
  — каждый элемент списка
  • отмечается маркером,
  • нумерованный список —
    — каждый элемент списка
  • отмечается цифрой,
  • список определений — — состоит из пар термин — определение.

  Каждый список представляет собой контейнер, внутри которого располагаются элементы списка или пары термин-определение.

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

  Создание HTML-списков

  • Содержание:
  • 1. Маркированный список
  • 2. Нумерованный список
  • 3. Список определений
  • 4. Вложенный список
  • 5. Многоуровневый нумерованный список

  1. Маркированный список

  . В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

  Браузеры по умолчанию добавляют следующее форматирование блоку списка:

  • Microsoft
  • Google
  • Apple
  • IBM

  2. Нумерованный список

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

  Блок списка также имеет стили браузера по умолчанию:

  доступны следующие атрибуты:

  1. Microsoft
  2. Google
  3. Apple
  4. IBM

  3. Список определений

  Списки определений создаются с помощью элемента . Для добавления термина применяется элемент , а для вставки определения — элемент .

  Блок списка определений имеет следующие стили браузера по умолчанию:

   
  Режиссер:
   
  Петр Точилин
   
  В ролях:
   
  Андрей Гайдулян
   
  Алексей Гаврилов
   
  Виталий Гогунский
   
  Мария Кожевникова
   

  Режиссер: Петр Точилин В ролях: Андрей Гайдулян Алексей Гаврилов Виталий Гогунский Мария Кожевникова Фигура. 3. Список определений

  4. Как создать вложенный список

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

  • Пункт 1.
  • Пункт 2.
    • Подпункт 2.1.
    • Подпункт 2.2.
      • Подпункт 2.2.1.
      • Подпункт 2.2.2.
      • Пункт 1.
      • Пункт 2.
        • Подпункт 2.1.
        • Подпункт 2.2.
          • Подпункт 2.2.1.
          • Подпункт 2.2.2.

          5. Многоуровневый нумерованный список

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

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

          • counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
          • counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
          • content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.

          ol < /* убираем стандартную нумерацию */ list-style: none; /* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */ counter-reset: li; >li:before < /* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */ counter-increment: li; /* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */ content: counters(li, ".") ". "; >

          Фигура. 5. Многоуровневый нумерованный список

          Публикации по этой теме:

          

          Адаптивное выпадающее мега меню на CSS

          

          Горизонтальное выпадающее многоуровневое меню

          

          Оформление многоуровневых нумерованных списков

          

          Вертикальное меню для сайта

          

          Горизонтальное выпадающее меню

          

          Примеры красивого оформления списков

          

          Горизонтальное меню для сайта

          

          2.9. CSS-списки

          Поделиться:

          • HTML
            • 1.1. Основы HTML
            • 1.2. HTML-элементы
            • 1.3. HTML-атрибуты
            • 1.4. HTML-текст
            • 1.5. HTML-ссылки
            • 1.6. HTML-изображения
            • 1.7. HTML-таблицы
            • 1.8. HTML-списки
            • 1.9. Спецсимволы HTML
            • 1.10. HTML-генераторы
            • 1.11. Семантические элементы HTML5
            • 1.11.1. Элемент документа
            • 1.11.2. Метаданные документа
            • 1.11.3. Разделы документа
            • 1.11.4. Группировка содержимого
            • 1.11.5. Семантика уровня текста
            • 1.11.6. Правки документа
            • 1.11.7. Встраиваемое содержимое
            • 1.11.8. Ссылки
            • 1.11.9. Табличные данные
            • 1.11.10 Формы
            • 1.11.11. Интерактивные элементы
            • 1.11.12. Скрипты
            • 1.12. HTML5-аудио
            • 1.13. HTML5-видео
            • 1.14. Необязательные теги HTML5-разметки
            • 1.15. HTML5-формы
            • 1.16. Контентная модель HTML5
            • 2.1. Основы CSS
            • 2.2. CSS блочная модель
            • 2.3. Блочные и строчные элементы
            • 2.4. CSS-позиционирование
            • 2.5. CSS-текст
            • 2.6. CSS-шрифты
            • 2.7. CSS-ссылки
            • 2.8. CSS-таблицы
            • 2.9. CSS-списки
            • 2.10. CSS-фон
            • 2.11. CSS-рамка
            • 2.12. CSS content
            • 2.13. CSS-цвета
            • 2.14. CSS-генераторы
            • 2.15. CSS3 UI
            • 2.16. CSS-градиент
            • 2.17. CSS3-рамка
            • 2.18. CSS3-оформление текста
            • 2.19. CSS-тень блока
            • 2.20. CSS-переходы
            • 2.21. CSS-трансформации
            • 2.22. CSS-анимация
            • 2.23. CSS flexbox
            • 2.24. CSS колонки
            • 2.25. CSS 3D-трансформации
            • 2.26. CSS-медиазапросы
            • 2.27. CSS-фильтры
            • 2.28. CSS Grid
            • 2.29. CSS3-шрифты
            • 2.30. CSS3-переполнение
            • 2.31. CSS3-способы письма
            • 2.32. Объединение и смешивание слоев
            • 2.33. CSS-фрагментация
            • 3.1. Основы JavaScript
            • 3.2. Выражения в JavaScript
            • 3.3. Циклы JavaScript
            • 3.4. DOM — объектная модель документа
            • 3.10. Введение в jQuery
            • 3.11. Методы jQuery
            • 3.11.1. Манипуляции HTML-элементами
            • 3.11.2. Чтение и изменение CSS-свойств, классов и атрибутов
            • 3.11.3. Обход DOM и выборка HTML-элементов
            • 3.11.4. jQuery анимация
            • 3.11.5. Методы объекта window
            • 3.12. События jQuery
            • 3.13. Селекторы jQuery
            • 4.1. Пять принципов выбора и использования шрифтов
            • 4.2. Выбираем шрифт для сайта
            • 4.3. Правила веб-типографики

            Последние записи

            

            

            

            

            

            

            2014-2023 © Елена Назарова,

            Коммерческое использование материалов сайта HTML5BOOK.RU запрещено. В остальных случаях обязательно наличие индексируемой ссылки со словом «Источник» на сайт или на страницу, содержащую этот материал.

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

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

            Совет

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

            Для создания переключателя устанавливаем type=»radio» и получаем симпатичный кружочек. Текст пункта вводится рядом с тегом . Особенность переключателя в том, что можно выбрать только одно положение из всех возможных. Для всех переключателей, которые принадлежат к одной группе, должно быть установлено одинаковое значение атрибута name. Атрибут value в этом случае содержит значение, которое будет передано обработчику, если пользователь выберет указанное положение.

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

            В листинге 6.10 представлен пример создания различных вариантов переключателей.

            Листинг 6.10. Создание переключателей

            Читать:

            Redmi note 10s где nfc