Form html5: fieldset — html5book

Содержание

— HTML | MDN

Элемент HTML form (<form>) представляет (собой) раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.

Можно использовать :valid и :invalid CSS псевдоклассы для стилизации <form> элемента, в зависимости от того, валиден или нет конкретный элемент elements внутри формы.

Категория содержимогоFlow content
Разрешённое содержимоеFlow content, но не содержащий <form> элементов
Пропуск тегаНет. И открывающий и закрывающий тег должны быть.
Нормативный документHTML5, section 4.10.3 (HTML4.01, section 17.3)

Как и все HTML элементы, этот элемент поддерживает глобальные атрибуты.

accept HTML 4 Этот API вышел из употребления и его работа больше не гарантируется.
Список типов содержимого, разделённых запятой, которые принимает сервер. Примечание об использовании: Этот атрибут был удалён в HTML5 и его не следует больше использовать. Взамен, используйте accept атрибут заданного <input> элемента.
accept-charset
Разделённые пробелами символьные кодировки, которые принимает сервер. Браузер использует их в том порядке, в котором они перечислены. Значение по умолчанию означает ту же кодировку что и у страницы.
(В предыдущей версии HTML, различные кодировки могли быть разделены запятыми.)
action
URI-адрес программы, которая обрабатывает информацию переданную через форму. Это значение может быть переписано с помощью атрибута formaction на <button> или <input> элементе.
autocomplete HTML5
Указывает, могут ли элементы управления автоматически быть дописаны в форме браузером. Эта настройка может быть переписана с помощью атрибута autocomplete на элементе формы. Возможные значения:
  • off: Пользователь должен явно ввести значение в каждое поле или документ предоставит свой собственный метод автодополнения; браузер автоматически не дополняет записи.
  • on: Браузер может автоматически дополнить значения, основанные на значениях, которые пользователь уже вводил, в течение предыдущего использования формы.

Примечание: Если вы установили значение off для autocomplete атрибута ​​​​​формы, из-за того, что документ предоставляет своё собственное автодополнение, то вам следует также установить значение

off для autocomplete каждого <input> элемента формы, которые документ может автоматически дополнить. Подробнее, смотрите Google Chrome notes.

enctype
Когда значение атрибута method равно post, атрибут — MIME тип содержимого, которое используется, чтобы передать форму на сервер. Возможные значения:
  • application/x-www-form-urlencoded: Значение по умолчанию, если атрибут не задан.
  • multipart/form-data: Используйте это значение, если пользуетесь элементом <input> атрибутом type установленным в «file».
  • text/plain (HTML5)

Это значение может быть переписано атрибутом formenctype на элементе <button> или <input>.

method
HTTP метод, который браузер использует, для отправки формы. Возможные значения:
  • post: Соответствует HTTP POST методу ; данные из формы включаются в тело формы и посылаются на сервер.
  • get: Соответствует GET методу; данные из формы добавляются к URI атрибута action, их разделяет ‘?’, и полученный URI посылается на сервер. Используйте этот метод, когда форма содержит только ASCII символы и не имеет побочного эффекта.

Это значение может быть переписано атрибутом formmethod на <button> или <input> элементе.

name
Имя формы. В HTML 4 его использование запрещено (id следует использовать взамен). Оно должно быть уникальным и не пустым среди всех форм в документе в HTML 5.
novalidate HTML5
Это Boolean атрибут показывает, что форма не проверяется на валидность, когда отправляется серверу. Если атрибут пропущен (и поэтому форма проверяется), эта настройка по умолчанию, может быть переписана атрибутом
formnovalidate
на <button> или <input> элементе, принадлежащем форме.
target
Имя или ключевое слово, показывающее где отображать ответ, который будет получен, после отправки формы. В HTML 4, это имя или ключевое слово для фрейма. В HTML5, это имя или ключевое слово, контекста просмотра (например, вкладка, окно, или линейный фрейм). Следующие ключевые слова имеют специальное значение:
  • _self: Загружает ответ в том же самом фрейме HTML 4 (или HTML5 контексте просмотра) как текущий. Это значение по умолчанию, если атрибут не указан.
  • _blank: Загружает ответ в новом безымянном окне HTML 4 или HTML5 контексте просмотра.
  • _parent: Загружает ответ HTML 4 в родительском наборе фрейма для текущего фрейма или HTML5 родительский контекст просмотра для текущего просмотра. Если нет предка, эта опция действует точно так же как as _self.
  • _top: HTML 4: Загружает ответ в полное, оригинальное окно, закрывая все другие фреймы. HTML5: Загружает ответ в верхний уровень контекста просмотра (т.е., контекст просмотра это предок текущего и не имеет других предков). Если нет предка, эта опция действует точно так же как as _self.

HTML5: Это значение может быть перезаписано formtarget атрибутом на <button> или <input> элементе.

Этот элемент реализует HTMLFormElement интерфейс.


<form action="">
  <label for="GET-name">Name:</label>
  <input type="text" name="name">
  <input type="submit" value="Save">
</form>


<form action="" method="post">
  <label for="POST-name">Name:</label>
  <input type="text" name="name">
  <input type="submit" value="Save">
</form>


<form action="" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" name="radio"> <label for="radio">Click me</label>
  </fieldset>
</form>
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0[1]1.0 (1.7 или ранее)(Да)(Да)(Да)
novalidate attribute1.04.0 (2.0)Нет??
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support(Да)1.0 (1.0)(Да)(Да)(Да)
novalidate attribute?4.0 (2.0)???

[1] Интерфейс для автодополнений в Google Chrome может меняться при запросе, в зависимости от утверждения установлен ли autocomplete со значением off на <input> элементах формы, так же как и на самой форме. С одной стороны, когда autocomplete со значением off установлен для формы, но при этом не установлен для её <input> элементов, при запросе пользователя автоматически заполнить поля формы, Chrome может отобразить сообщение «autocomplete has been disabled for this form.» С другой стороны, если и форма и её input элементы имеют

autocomplete со значением off, браузер не отобразит это сообщение. По этой причине, вам следует устанавливать атрибуту autocomplete значение off для каждого <input> у которого стоит нестандартное автодополнение.

  • Другие элементы, которые используются для создания форм: <button>, <datalist>, <fieldset>, <input>,<keygen> (en-US), <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea> (en-US).

UX и HTML5: Поможем пользователю заполнить вашу мобильную форму. 4/4

Это четвёртая и последняя статья в серии советов по улучшению UX мобильных форм. Предыдущие части вы найдёте здесь: первая, вторая, третья.

Авто в HTML5: Автоисправление, Автозаполнение, Автокапитализация и Автофокус

В HTML5 есть масса автоматических аттрибутов. Для улучшения мобильного UX нужно решить, что можно перевести в автоматический режим, а что не стоит. Вот несколько основных правил:

  • Отключите автоисправление там, где словари слабо справляются: email, номера, имена, адреса, города, регионы, коды местности, номера кредитных карт.
  • Отключите аттрибут autocapitalize в полях для email и в других, где он не нужен (например, для ссылок). Помните, что type=email делает это за вас в последних версиях iOS и Android, но отключить функцию всё равно нужно — для старых версий или если type=email не поддерживается.
  • Вы можете настроить аттрибут автокапитализации на слова, чтобы первые буквы слов автоматически меняли регистр на прописной — например, для имён или названий мест, но, опять же, используйте его с осторожностью, не забывайте тестировать.

Используйте input type=email для email-адресов. Если вы всё-таки от него отказываетесь, то хотя бы отключите автокапитализацию. Ни один адрес email не начинается с заглавной буквы.

  • Для аттрибута input type=tel, настройте autocomplete=tel.
  • Вы можете использовать аттрибут autofocus, чтобы элемент управления оказывался в фокусе, как только пользователь загружает страницу. При этом один только факт, что юзер открыл страницу «контакты», не означает, что он готов сразу же начать заполнение вашей формы. Поэтому напоминаем: используйте аттрибут разумно.

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

Если вам нужно больше вариантов автозаполнения, полный список вы найдёте на WhatWG Wiki. Только убедитесь, что вы используете именно то, что вам нужно. Внедряйте, тестируйте, и ещё раз тестируйте.

Валидация форм в HTML5

Здесь я не буду вдаваться в технические подробности, но вы должны знать, что в HTML5 есть встроенная API валидация для многих полей. Здорово, если вы решите не использовать библиотеку JavaScript для отображения встроенных сообщений о валидации. Вот основные вещи, которые вам, как UX дизайнеру, нужно знать о валидации форм в HTML5:

  • Сообщение о валидации — это элемент управления браузера. Его нельзя стилизовать в CSS, оно будет индивидуально для каждого конкретного браузера.
  • Вы можете изменить текст сообщения в JavaScript, используя setCustomValidity.
  • CSS3 предоставляет :invalid, :valid, :required и другие псевдо-классы для валидации форм в HTML. Они запускаются, когда фокус уходит с элемента, так что на настоящий момент они довольно бессмысленны.

Нативная валидация форм HTML в браузере Android.

В статье «Валидация нативных форм. Часть 1», Питер-Пол Кох детально рассматривает, почему сейчас валидация в HTML и CSS на самом деле не делает формы лучше.

Offline саппорт для сохранения данных пользователей

Многое может пойти не так, особенно на мобильном устройстве, ошибки случаются. Пользователь может нечаянно нажать на кнопку «назад» и потерять все свои данные.

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

Если соединение прервётся в момент отправки формы, данные могут пропасть. Чтобы этого избежать, вы можете использовать комбинацию ** HTML5 offline API** и Service Workers API для:

  • хранения данных в кэше,
  • попытки снова автоматически отправить данные, когда соединение восстановится.

Чтобы узнать, как написать под это код, посмотрите статью «Формы, работающие оффлайн».

Возможности мобильного устройства могут прокачать уровень UX

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

Определяем местоположение пользователя

В предыдущем разделе я писала о предзаполнении информации о местах и адресах. Это хорошее начало. И мы можем пойти дальше. Вместо того, чтобы просить пользователя ввести своё местоположение, мы можем определить его автоматически. Встречайте: API геолокации для веба. Нативные API геолокации существуют и в iOS, Android и Windows Phone.

Citymapper — вебсайт и приложение, помогающее пользователям спланировать путешествия. Когда пользователь переходит к первому полю формы, он видит опцию «Использовать настоящее местоположение». Он её выбирает — и появляется запрос на доступ браузера к данным местоположения. Это и есть API геолокации. Затем браузер автоматически заполняет найденное местоположение, и пользователь может заполнять пункт назначения. Нативное приложение работает в основном таким же образом.

Citymapper предлагает настоящее местоположение пользователя в качестве начального пункта путешествия.

Запрашивайте разрешение пользователя обдуманно

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

Будьте осторожны с тем, как именно вы запрашиваете разрешение. Пользователь может запретить доступ к геолокации, выводу уведомлений или другим элементам API, если вы запросите разрешение на них слишком рано. Также пользователь может запретить доступ, если он не понимает, зачем он вообще нужен. У вас всего один шанс, используйте его с умом. После этого исправиться будет уже практически невозможно. Я — опытный пользователь Android, но даже мне приходится рыться в настройках браузера, когда я хочу отменить разрешения, которые я ранее давала. Представьте, с какими сложностями сталкиваются ваши пользователи.

Вот несколько основных советов, как запрашивать разрешения в вебе:

  • Не ведите себя как жутковатый преследователь, охотящийся за местоположением или рассылкой уведомлений: не спрашивайте разрешение сразу, как только пользователь зашел на ваш сайт. Он, может быть, ещё не знает ничего ни о вас, ни о вашем сервисе.
  • Позвольте пользователю изучить ваш сайт и сервис, и только затем запрашивайте разрешение в контексте. Если вам нужен доступ к его местоположению, спрашивайте его только тогда, когда оно вам действительно нужно (Citymapper — хороший пример).
  • Объясните, зачем вам нужно разрешение и что вы будете делать с полученной информацией.

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

Если вы хотите ещё покопаться в этой теме, то Люк Вроблевски (да-да, снова он) создал прекрасное видео, которое поможет вам с процессом запроса разрешений.

ЧЕКАУТ: улучшаем опыт

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

Сканер кредитных карт iOS

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

Apple вывела этот процесс на новый уровень со своим сканером кредитных карт. Начиная с iOS 8 пользователи Safari могут отсканировать и автоматически заполнить информацию с банковской карты, используя камеру. Для воплощения этой магии в жизнь вам нужно добавить аттрибут автозаполнения cc-number и какое-то имя, чтобы определить это поле как поле для данных карты. Apple особо не дает официальной информации по теме, но кое-кто кое-что протестировал и поместил результат на StackOverflow.

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

Опция сканирования кредитной карты появляется, когда Safari определяет поле, которое соответствует формату кредитной карты. Если пользователь уже регистрировал свою карту в телефоне, он может воспользоваться опцией автозаполнения.

Выведите чекаут на шаг вперед с Google Pay API

Google запустил нечто подобное: Google Pay API. Встроенный в вебсайт, API избавляет от необходимость вводить платежную информацию вручную. Он идёт на шаг впереди: помимо прочего, он может хранить адрес расчетного счета и адрес доставки.

Пользователю открывается диалог в Chrome, где отображается его сохранённая платежная информация. Можно выбрать, какие именно данные использовать, и оплатить товар или услугу напрямую из этого диалога.

Поп-ап Google Pay API в интернет-магазине

Стандартизированная версия запроса платежа API сейчас является кандидатом в рекомендации W3C. Если он будет встроен в браузеры, это позволит пользователям совершать чекаут нажатием одной кнопки, которая будет запрашивать API. Каждый дальнейший шаг будет совершаться с помощью нативных диалогов в браузере.

Упрощаем аутентификацию

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

Magic link

Я пользуюсь менеджером паролей. Я не помню 99% своих паролей. Все они сгенерированы случайным образом. Чтобы залогиниться в новом рабочем пространстве в Slack, я должна:

  1. открыть свой менеджер паролей,

  2. ввести пароль от него,

  3. найти свой workspace,

  4. cкопировать и вставить пароль в Slack.

Нудный процесс, но Slack мудро предложил вариант получше.

У многих людей почта синхронизирована с телефоном. И Slack это понял. Когда вы добавляете новое рабочее пространство в Slack, вы можете залогиниться с помощью пароля, либо запросить опцию magic link. Если вы выберете второй вариант, Slack отправит «волшебную ссылку» вам на почту. Открываете письмо, кликаете на большой зеленой кнопке и — та-дам! — вы выполнили вход.

За кулисами эта волшебная ссылка содержит маркер аутентификации. Приложение Slack отслеживает это и выполняет аутентификацию, не требуя пароль.

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

Отпечаток пальца для умной идентификации

Лично я выполняю бóльшую часть своих банковских операций через смартфон. И когда дело касается входа в банковский аккаунт, есть огромная разница между двумя банковскими приложениями, что стоят у меня — French Société Générale и German N26.

В Société Générale есть строка логина и фраза-пароль. Я могу попросить приложение запомнить логин, который состоит из 10 рандомных символов. Я не в состоянии его запомнить сама — для этого я использую менеджер паролей. Но при этом мне всё ещё нужно держать в голове фразу-пароль из 6 символов и вводить ее на специальной клавиатуре. И конечно, порядок цифр меняется каждый раз, когда я выполняю вход. Безопасность, да, я знаю. Кроме того, я обязана каждые три месяца менять эту фразу-пароль. В последний раз, когда мне пришлось это делать, я сделала то же, что и большинство людей: поменяла фразу-пароль на практически такую же, потому что мне не хотелось опять запоминать еще один набор из шести цифр. И, конечно, я была чертовски уверена, что запомню этот пароль — и не ввела его в свой менеджер паролей. Ошибка новичка. Две недели спустя я попыталась залогиниться. Конечно же, я не смогла его вспомнить. После трех неудачных попыток входа мой счет заблокировали. К счастью, я использую этот счёт только как сберегательный. В приложении вы можете запросить новый пароль. Спустя почти неделю банк прислал мне новую фразу-пароль из 6 цифр бумажной почтой на мой домашний адрес в Люксембурге. М-да.

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

Одно и то же устройство, два приложения, а какой разный опыт.

Ещё один пример аутентификации через отпечаток пальца в Dropbox.

Всё больше приложений как на Android, так и на iOS теперь предлагают возможность аутентификации через отпечаток пальца. Больше никаких паролей — это интересное и элегантное решение.

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

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

Распознавание лиц и Face ID

В 2018 Apple выпустила iPhone X с новой функцией face ID. Пользователи теперь могут разблокировать свои iPhone X, используя только своё лицо. Конечно, некоторые телефоны на Android, планшеты и компьютеры на Windows предложили такую функцию раньше. Но когда Apple что-то выпускает, оно становится «фишкой». На данный момент такая технология чаще всего используется для аутентификации, чтобы разблокировать телефон или компьютер.

Вместе с технологией распознавания лиц появились довольно большие вопросы. Прежде всего, некоторые алгоритмы можно обмануть, используя фотографию человека, которые легко найти или хакнуть. Ещё больше беспокойства вызывает расовое и этнокультурное разнообразие. Алгоритмы распознавания лиц не очень хорошо справляется с узнаванием «цветных» людей. Например, темнокожая исследовательница вынуждена была надеть белую маску, чтобы протестировать свой собственный проект. Её зовут Джой Буоламвини и она рассказала об этом опыте на TED talk.

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

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

Google: регистрация одним нажатием

Если у пользователя есть аккаунт Google, он может насладиться всеми преимуществами регистрации одним нажатием c Google. Не нужно вводить пароль при входе на сайт, пользователю предлагают создать аккаунт во встроенном диалоговом окне. Google предоставляет безопасный аккаунт на основе маркера, он не требует пароля и привязан к основному аккаунту Google. Когда пользователь возвращается на сайт, он уже автоматически залогинен. Если пользователь хранит свои пароли в Smart Lock, то и на остальных устройствах он тоже будет автоматически залогинен.

Диалоговое окно регистрации одним нажатием с Google.

Это решение интересное, оно избавляет пользователя от необходимости заводить пароль. Но при этом пользователю приходится привязываться к Google, и потому такое решение не может быть универсальным.

Заключение

Используя возможности мобильных устройств можно сделать много крутых штук — всё ради того, чтобы помочь пользователям заполнить формы. Создавая формы, мы должны быть главным образом настроены на mobile-first (мобильная версия — в первую очередь); иначе застрянем на хорошо знакомых нам возможностях десктопов.

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

Всё, я заканчиваю эту длинную и объемную серию статей, в которой я привела вам некоторые общие и практические рекомендации насчет UX и юзабилити. В конце концов, самое главное это ваши формы и ваши пользователи. Некоторые описанные здесь вещи могут не сработать в отношении конкретно ваших пользователей — кто знает? Поэтому, что бы вы ни делали, не верьте мне (или Люку) на слово. Тестируйте решения на реальных пользователях и реальных устройствах. Анализируйте. И затем снова тестируйте. Проведите исследования с вовлечением пользователей и тестирование юзабилити. UX — это не только практические рекомендации и магические рецепты, которые вы копипастите. Придётся адаптировать рецепт, чтобы он заработал именно для вас. Поэтому, вкратце: тестируйте. Тестируйте на реальных устройствах. Тестируйте на настоящих пользователях.

Группировка элементов формы | Руководство по HTML5

Руководство по HTML5

Адам Фриман
12. 5. Отключение отдельных элементов input

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

Таблица 12-8: Элемент fieldset
Элемент fieldset
Тип элемента Потоковый
Разрешенные родительские элементы Любой элемент, который может содержать потоковые элементы, обычно потомок элемента form
Локальные атрибуты name, form, disabled
Содержание Опционально элемент legend, за которым следует потоковый контент
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Нет
Изменения в HTML5 В HTML5 был добавлен атрибут form. См. раздел «Работа с элементами вне формы» далее этой главе для информации по этому атрибуту
Соглашение по стилям
fieldset { display: block; margin-start: 2px;
margin-end: 2px; padding-before: 0.35em;
padding-start: 0.75em; padding-end: 0.75em;
padding-after: 0.625em; border: 2px groove; }

Вы можете увидеть, как используется элемент fieldset, в листинге 12-12. Я добавил в этот пример дополнительные элементы input, чтобы показать, как fieldset может быть применен к подмножеству элементов в форме.

Листинг 12-12: Использование элемента fieldset
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon. ico" type="image/x-icon" />
</head>
<body>
	<form method="post" action="http://titan:8080/form">
		<fieldset>
			<p>
				<label for="name">Name:
					<input name="name" /></label></p>
			<p>
				<label for="name">City:
					<input name="city" /></label></p>
		</fieldset>
		<fieldset>
			<p>
				<label for="fave1">#1:
					<input name="fave1" /></label></p>
			<p>
				<label for="fave2">#2:
					<input name="fave2" /></label></p>
			<p>
				<label for="fave3">#3:
					<input name="fave3" /></label></p>
		</fieldset>
		<button>Submit Vote</button>
	</form>
</body>
</html>

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

Рисунок 12-8: Использование элемента fieldset для группировки элементов input

Добавление описательной метки для элемента fieldset

Мы сгруппировали наши элементы input, но у нас все еще нет контекста для пользователей. Это можно исправить, если добавив для каждого из элементов fieldset элемент legend. В таблице 12-9 представлен элемент legend.

Таблица 12-9: Элемент legend
Элемент legend
Тип элемента N/A
Разрешенные родительские элементы Элемент fieldset
Локальные атрибуты Нет
Содержание Фразовый контент
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Нет
Изменения в HTML5 Нет
Соглашение по стилям legend { display: block; padding-start: 2px; padding-end: 2px; border: none; }

Элемент legend должен быть первым дочерним для элемента fieldset, как показано в листинге 12-13.

Листинг 12-13: Использование элемента legend
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	<form method="post" action="http://titan:8080/form">
		<fieldset>
			<legend>Enter Your Details</legend>
			<p>
				<label for="name">Name:
					<input name="name" /></label></p>
			<p>
				<label for="name">City:
					<input name="city" /></label></p>
		</fieldset>
		<fieldset>
			<legend>Vote For Your Three Favorite Fruits</legend>
			<p>
				<label for="fave1">#1:
					<input name="fave1" /></label></p>
			<p>
				<label for="fave2">#2:
					<input name="fave2" /></label></p>
			<p>
				<label for="fave3">#3:
					<input name="fave3" /></label></p>
		</fieldset>
		<button>Submit Vote</button>
	</form>
</body>
</html>

На рисунке 12-9 показано, как браузер отображает элементы legend.

Рисунок 12-9: Использование элемента legend

Отключение группы элементов input при помощи элемента fieldset

Ранее в этой главе я показал вам, как отключить отдельные элементы input. Вы также можете отключить несколько элементов input за один шаг, если примените атрибут disabled к элементу fieldset. Когда вы это сделаете, все элементы input, содержащиеся в fieldset, будут отключены, как показано в листинге 12-14.

Листинг 12-14: Отключение элементов input с использованием элемента fieldset
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	<form method="post" action="http://titan:8080/form">
		<fieldset>
			<legend>Enter Your Details</legend>
			<p>
				<label for="name">Name:
					<input name="name" /></label></p>
			<p>
				<label for="name">City:
					<input name="city" /></label></p>
		</fieldset>
		<fieldset disabled>
			<legend>Vote For Your Three Favorite Fruits</legend>
			<p>
				<label for="fave1">#1:
					<input name="fave1" /></label></p>
			<p>
				<label for="fave2">#2:
					<input name="fave2" /></label></p>
			<p>
				<label for="fave3">#3:
					<input name="fave3" /></label></p>
		</fieldset>
		<button>Submit Vote</button>
	</form>
</body>
</html>

На рисунке 12-10 вы можете увидеть результат отключения элементов input.

Рисунок 12-10: Отключение элементов input с использованием элемента fieldset
12.7. Использование элемента button

Новые поля ввода в HTML5

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

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

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

Раньше, к примеру, чтобы проверить правильность ввода Email адреса, приходилось использовать довольно нетривиальные регулярки, которые, кстати отталкивают немалый процент новичков. Теперь для этого существует input type="email". А для проверки URL-адреса — input type="url".

Новые типы полей пока что не поддерживаются всеми браузерами, но отображаются корректно. В том случае, когда браузер находит неизвестный ему тип поля, он заменяет его на простой input type="text".

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

<form name="example" action="#form-example">
    <input type="email" placeholder="Адрес электронной почты" autofocus>
    <input type="url" placeholder="Домашняя страцица">
    <input type="search" placeholder="Текст для поиска">
    <input type="number" min="5" max="50" step="5" value="5" placeholder="Возраст">
    <input type="range" max="100" step="2" value="10">
    <input type="date" required>
    <input type="color" required>
    <input type="submit" value="Отправить">
</form>

Пока что, наиболее полную поддержку новых полей сделали в Опере.

Подробнее, советую почитать в статье про «Сумасшедшие формы».

HTML5 Свойства формы

Свойства HTML5 Новая форма

тег в HTML5 <форма> и <ввод> добавляет несколько новых свойств.

<form> новые атрибуты:

  • автозаполнения
  • NOVALIDATE

<Input> Новые свойства:

  • автозаполнения
  • автофокусировка
  • форма
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • высота и ширина
  • список
  • мин и макс
  • множественный
  • шаблон (регулярное выражение)
  • заполнитель
  • требуется
  • шаг

<Форма> / <вход> атрибут автозаполнения

автозаполнения атрибут определяет форму или поле ввода должно иметь автозаполнения.

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

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

Примечание: автозаполнения применяется <форма> тег, и следующие типы <ввод> тег: текст, поиск, URL, телефон , адрес электронной почты, пароль, datepickers, диапазон и цвет.

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


<Форма> NOVALIDATE недвижимость

Логическое свойство NOVALIDATE свойство.

NOVALIDATE атрибут определяет при отправке формы не должны подтверждении правильности формы ввода или домен.



<Input> атрибут автофокусировка

Атрибут автофокусировка является логический атрибут.

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



<Input> форма собственности

атрибут определяет поле формы ввода относится к одной или нескольким формам.

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



<Input> formaction недвижимость

Свойство formaction используется для описания URL представления формы.

Formaction атрибуты переопределение <form> элемент в атрибуте действия.

Примечание: Атрибут formactionтип = «отправить» и тип = «образ».



<Input> свойство formenctype

formenctype атрибут описывает форма передается кодирования данных сервера (только для метода формы вида = «пост» форма)

formenctype Переопределение свойств ENCTYPE атрибутов элементов формы.

Main: Этот тип атрибута = «отправить» и введите = «образ» , используемый в сочетании.



<Input> formmethod недвижимость

formmethod атрибут определяет представление путь формы.

formmethod свойство покрытия <form> атрибут метода элемента.

Примечание: Этот атрибут может использоваться с типом = «отправить» и введите = «образ» , используемый в сочетании.



<Input> formnovalidate недвижимость

NOVALIDATE свойство является Логическое свойство.

NOVALIDATE атрибут описывает элементы <Input> не должны быть проверены, когда форма была отправлена.

formnovalidate атрибуты переопределить NOVALIDATE атрибут <form> элемент.

Примечание: formnovalidate тип атрибута = «отправить для использования с



<Input> formtarget недвижимость

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

В formtarget Переопределение свойств <form> целевой атрибут элемента.

Примечание: formtarget тип атрибута = «отправить» и введите = «образ» , используемый в сочетании.



<Input> высота и ширина атрибуты

высота и ширина атрибуты, заданные для типа изображения из <ввода> высоты и ширины тега изображения.

Примечание: высота и ширина свойства применимы только к типу изображения <ввод> тега.

Совет: Изображение будет обычно определяют высоту и ширину атрибутов. Если изображение установить высоту и ширину пространства, необходимого для изображения при загрузке страницы будут сохранены. Без этих атрибутов, браузер не знает размер изображения, и не может выделить соответствующее место. Фотографии в процессе загрузки будет эффект изменения страницы макета (хотя загрузило изображение).



<Input> Свойства списков

DataList атрибут определяет список полей ввода. DataList список опций для полей ввода.



<Input> минимальные и максимальные атрибуты

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

Примечание: мин, макс, и шаг атрибуты применяются к следующим типам <ввода> тег: выбора даты, числа и дальности полета.



<Input> несколько свойств

множественный атрибут является логический атрибут.

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

Примечание: множественные свойства применимы к следующим типам <ввод> тег: адрес электронной почты и файлов:



<Input> свойство модели

Атрибут шаблон описывает регулярное выражение, используемое для проверки значения элементов <INPUT>.

Примечание: атрибут шаблонприменяется к следующим типам <INPUT> тега: текст, поиск, URL, тел , адрес электронной почты, и пароль.

Совет: Он используется для глобального заголовка атрибута описывает режим.

Совет: Вы можете в нашем JavaScript учебник , чтобы узнать о содержании регулярного выражения



<Input> атрибут заполнитель

Атрибут заполнитель содержит намек (подсказка), описать ожидаемое значение поля ввода.

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

Примечание: атрибут заполнительотносится к следующим типам <INPUT> тега: текст, поиск, URL, телефон , адрес электронной почты и пароль.



<Input> Обязательный атрибут

Обязательный атрибут является логический атрибут.

Обязательный атрибут указывает, что поле ввода должно быть заполнено (не пустой) перед отправкой.

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



<Input> Атрибуты шага

шаг атрибут для поля ввода указывает интервалы номер юридического.

Если шаг = «3», юридические цифры могут быть -3,0,3,6, и т.д.

Совет: Атрибут шагможет создать региональное значение макс и атрибуты мин.

Примечание: число, диапазон, дата, DateTime: шаг типы , используемые в сочетании со следующим типом атрибута , DATETIME-местный, месяц, время и неделю.



HTML5 <ввод> Тег

标签 描述
<form> 定义一个form表单
<input> 定义一个 input 域

— HTML: язык разметки гипертекста

Элемент HTML

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

Можно использовать псевдоклассы CSS : valid и : invalid для стилизации элемента в зависимости от того, допустимы ли элементов внутри формы.

Этот элемент включает глобальные атрибуты.

accept Устарело с HTML5
Типы содержимого, разделенные запятыми, которые принимает сервер.
Примечание

Этот атрибут был удален в HTML5 и не должен использоваться. Вместо этого используйте атрибут accept для элементов .

кодировка приема
Допустимые кодировки символов, разделенные пробелами.Браузер использует их в том порядке, в котором они перечислены. Значение по умолчанию означает ту же кодировку, что и страница.
(В предыдущих версиях HTML кодировки символов также могли быть разделены запятыми.)
autocapitalize Этот API не стандартизирован.
Нестандартный атрибут, используемый iOS Safari, который определяет, как элементы текстовой формы должны быть автоматически преобразованы в заглавные буквы. автокапитализировать атрибутов в элементах формы переопределять его на .Возможные значения:
  • нет : без автоматического использования заглавных букв.
  • предложения (по умолчанию): начинать каждое предложение с заглавной буквы.
  • слова : Начинайте каждое слово с заглавной буквы.
  • символа : все символы должны быть заглавными, т. Е. Прописными.
автозаполнение
Указывает, могут ли значения элементов ввода по умолчанию автоматически заполняться браузером. автозаполнение атрибутов элементов формы переопределяет его на . Возможные значения:
  • выкл. : браузер не может автоматически заполнять записи. (Браузеры обычно игнорируют это при подозрительных формах входа; см. Атрибут автозаполнения и поля входа в систему.)
  • на : браузер может автоматически заполнять записи.
наименование
Имя формы. Не рекомендуется в HTML 4 (используйте вместо него id ).Он должен быть уникальным среди форм в документе, а не пустой строкой, как в HTML5.
отн.
Создает гиперссылку или аннотацию в зависимости от значения, подробности см. В атрибуте rel .

Атрибуты для отправки формы

Следующие атрибуты управляют поведением во время отправки формы.

действие
URL-адрес, по которому обрабатывается отправка формы.Это значение может быть переопределено атрибутом formaction в элементе
enctype
Если значение атрибута method равно post , enctype является MIME-типом отправки формы. Возможные значения:
  • application / x-www-form-urlencoded : значение по умолчанию.
  • multipart / form-data : Используйте это, если форма содержит элементов с type = file .
  • text / plain : введено HTML5 в целях отладки.

Это значение может быть переопределено атрибутами formenctype в элементах

метод
Метод HTTP для отправки формы.Возможные (без учета регистра) значения:

Это значение переопределяется атрибутами formmethod в элементах

novalidate
Этот логический атрибут указывает, что форма не должна проверяться при отправке. Если этот атрибут не установлен (и, следовательно, форма проверена как ), он может быть переопределен атрибутом formnovalidate в
цель
Указывает, где отображать ответ после отправки формы. В HTML 4 это имя / ключевое слово для фрейма. В HTML5 это имя / ключевое слово для контекста просмотра (например, вкладка, окно или iframe). Следующие ключевые слова имеют особое значение:
  • _self (по умолчанию): загрузить в тот же контекст просмотра, что и текущий.
  • _blank : загрузить в новый безымянный контекст просмотра.
  • _parent : загрузить в родительский контекст просмотра текущего. Если нет родителя, ведет себя так же, как _self .
  • _top : загрузить в контекст просмотра верхнего уровня (т. Е. Контекст просмотра, который является предком текущего и не имеет родителя). Если нет родителя, ведет себя так же, как _self .

Это значение может быть переопределено атрибутом formtarget в элементе

HTML

 
<форма>
  <метка> Имя:
    
  
  



<метка> Имя:
Заголовок

Таблицы BCD загружаются только в браузере

  • Руководство по HTML-формам
  • Другие элементы, которые используются при создании форм:

    Попробуй сам "

    Вот как HTML-код выше будет отображаться в браузере:

    Нажми на меня!

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


    Элементы

    и

    Элемент

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

    Элемент определяет заголовок для

    элемент.

    Пример



    Personalia:











    Попробуй сам "

    Вот как HTML-код выше будет отображаться в браузере:


    Элемент

    Элемент определяет список предопределенных опций для элемента .

    Пользователи будут видеть раскрывающийся список предопределенных параметров при вводе данных.

    Атрибут списка элемента должен ссылаться на id атрибут элемента .

    Пример





    Попробуй сам "

    Элемент

    Элемент представляет результат вычисления (например, выполняется по сценарию).

    Пример

    Выполните вычисление и покажите результат в элементе :

    oninput = "x.value = parseInt (a.value) + parseInt (b.value)">
    0

    100 +

    =





    Попробуй сам "

    Упражнения HTML


    Элементы формы HTML

    Тег Описание
    <форма> Определяет HTML-форму для пользовательского ввода
    <вход> Определяет элемент управления вводом

    - Результат приведенного выше примера будет выглядеть примерно так:


    Выбрать боксы

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

      <форма>
        
        
      

    - Результат приведенного выше примера будет выглядеть примерно так:


    Кнопки отправки и сброса

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

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

      

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

    Примечание: Вы также можете создавать кнопки с помощью элемента