От автора: данная статья является выдержкой из книги HTML5 и CSS3 для реального мира, 2-е издание за авторством Алексиса Гольдштейна, Луи Лазариса и Эстель Вейль. Книгу можно найти в магазинах по всему миру, а также купить цифровую версию.
Атрибут pattern
Атрибут pattern задает регулярное выражение, которому должны удовлетворять вводимые пользователем данные, чтобы быть валидными. С помощью атрибута pattern можно ограничить данные на все поля, где доступен ввод текста в произвольной форме.
Язык регулярных выражений в шаблонах по синтаксису тот же, что и в JS на основе Perl за исключением того, что атрибут pattern должен удовлетворять всему значению, а не какому-то внутреннему набору. При использовании шаблонов пользователю необходимо сообщать разрешенные символы.
Глобальный атрибут title имеет особое значение в паре с pattern. В настоящий момент браузеры отображают значение атрибута title при наведении курсора в виде тултипа. Инструкции же в шаблоне более детальны, чем плейсхолдеры, и формируют более связное разъяснение. Атрибут title будет отображаться с сообщением об ошибке по умолчанию в браузерах с поддержкой нативной валидации. Об это мы поговорим в следующей главе.
Заметка: регулярные выражения
Регулярные выражения – функция большинства языков программирования, с помощью которой разработчики могут задавать шаблоны символов и проверять, подходит ли заданная строка под этот шаблон. Для новичков регулярные выражения просто темный лес. Например, выражение для проверки строки на значение цвета в формате hex выглядит следующим образом: #[A-Fa-f0-9]{6}.
Полный урок по синтаксису регулярных выражений лежит за пределами данной книги, но в сети множество замечательных ресурсов, уроков и шпаргалок. Или же можно просто погуглить нужный шаблон или спросить на форумах.
В качестве базового примера давайте добавим атрибут pattern на поле с паролем в нашей форме. Нужно, чтобы пароль был минимум 6 символов без пробелов:
|
1 2 3 4 5 6 |
<li> <label for="password">I would like my password to be:</label> <p>(at least 6 characters, no spaces)</p> <input type="password" id="password" name="password" required title="(at least 6 characters, no spaces)" pattern="\S{6,}"> </li> |
Запись \S означает «любой символ кроме пробела», а {6,} значит «минимум 6 раз». Хотите обозначить максимальное количество символов, можно использовать интервал, например, \S{6,10}.
Как и required, атрибут pattern запрещает отправку формы, если есть несоответствия с шаблоном. Также выскочит сообщение с ошибкой.
Если вы задали неправильное регулярное выражение, оно будет проигнорировано в целях валидации.
Атрибут pattern поддерживается в некоторой степени во всех браузерах, начиная с Firefox 4, Safari 5, Chrome 10, Opera 11, IE10 и Android 2.3. Под «в некоторой степени» понимается, что сейчас все браузеры поддерживают pattern. Однако Safari и Android до версии 4.4 позволяют отправку форм с невалидными данными.
Кроме того, как с placeholder и required, вы можете использовать значение этого атрибута для JS валидации в браузерах без поддержки.
Атрибут disabled
Булев атрибут disabled появился задолго до HTML5, но в этой спецификации он был значительно расширен. Атрибут работает со всеми полями формы за исключением нового output. В отличие от предыдущих версий HTML спецификация HTML5 позволяет устанавливать атрибут disabled на тег fieldset, тем самым применяя его ко всем тегам внутри набора.
Как правило, контент полей с disabled выделен серым цветом по умолчанию. Браузеры не разрешают полям с disabled получать фокус. С помощью этого атрибута часто отключают кнопку отправки формы до тех пор, пока не будут правильно заполнены все поля.
Стилизовать отключенные поля можно с помощью псевдокласса :disabled, активные поля с помощью :enabled или :not(:disabled).
Поля с атрибутом disabled не отправляются на сервер, т.е. вы не сможете их обработать. Если необходимо, чтобы пользователь видел значение и мог его отправлять, но не редактировал его, используйте атрибут readonly.
Атрибут readonly
Атрибут readonly похож на disabled: пользователю запрещается редактирование поля. Но в отличие от disabled такое поле может получить фокус, и его значение передается на сервер.
В форме комментариев можно добавить поля с URL страницы или заголовком статьи, на которую оставляется комментарий, давая пользователю понять, что мы собираем эту информацию без возможности ее менять:
|
1 2 |
<label for="about">Article Title</label> <input type="text" name="about" id="about" readonly value="//www.thehtml5herald.com/register.html"> |
Атрибут multiple
Наличие атрибута multiple указывает на то, что в поле можно вбить несколько значений. Атрибут был доступен и в предыдущих версиях HTML, но применялся только к тегу select. В HTML5 атрибут можно применять к типам file, email и range. Если атрибут есть, то можно выбрать более одного файла, прописать несколько адресов электронной почты через запятую. У диапазона в таком случае будет два слайдера.
Атрибут multiple для типа file поддерживается во всех браузерах с mobile Safari 7 и IE10, но на полях типа range на момент написания статьи данный атрибут еще не поддерживается ни в одном браузере.
Заметка: пробелы или запятые?
Вы могли заметить, что на клавиатуре на iOS в полях типа email разрешен пробел. Пробелы недопустимы в адресах, но браузеры разрешают разделять несколько адресов с помощью пробела и обязательной запятой. Изначально пробелы были запрещены в некоторых браузерах, но позже в спецификацию включили возможность добавления пробела после запятой.
Атрибут form
Не путать с тегом form. Атрибут form в HTML5 позволяет связать элементы с формами, в которые они не вложены. То есть теперь можно ассоциировать набор полей или одно поле с любой другой формой в документе. Этот атрибут решает старую проблему с невозможностью вкладывать формы. Сами формы все еще вкладывать нельзя, но можно ассоциировать «вложенные» поля с формой, которая не является им прямым родителем.
В качестве значения атрибут form принимает ID тега form, с которым нужно ассоциировать набор или одно поле.
Если атрибут отсутствует, поле будет передано вместе с той формой, в которую оно вложено. Если атрибут form был сначала добавлен, а потом удален, используйте el.removeAttribute(‘form’), а не el.setAttribute(‘form’, »). Если атрибут form вставлен, но пустой или ведет на неверный ID формы, поле будет исключено из отправки из всех форм, в том числе и из формы-предка.
Атрибут поддерживается во всех браузерах с Android 4 и IE 11.
Атрибут autocomplete
Атрибут autocomplete отвечает за то, будет ли форма или ее поля заполняться автоматически. Для большинства полей функционал реализуется через выпадающий список, который появляется, как только пользователь начинает печатать. С полями типа password атрибут сохраняет пароль в браузер.
Если autocomplete не указан в форме или полях, то значение по умолчанию ставится в on. Вы могли заметить это, когда последний раз заполняли форму. Для отключения автозаполнения используйте autocomplete=»off». Отличная идея для такой чувствительной информации, как номера кредитных карт или данные, которые нельзя повторно использовать, например, CAPTCHA.
Автозаполнение контролируется браузером и игнорирует настройки разработчика. По умолчанию стоит значение on, однако браузер должен активировать автозаполнение для своей работы. Однако если задать autocomplete в off, это переписывает значение on для соответствующих полей формы.
Элемент datalist и атрибут list
Списки данных поддерживаются во всех браузерах, начиная с IE10 и Android 4.4.3 за исключением Safari. В стандартной форме они выполняют общие требования: текстовое поле с заданными опциями автозаполнения. В отличие от select пользователи могут вбить любое значение, но оно будет представлено с помощью заданного набора опций.
Рисунок 1 элемент datalist в Firefox
Для некоторых типов полей типа text и date выпадающий список опций появляется только после начала ввода, как показано на рисунке 4.4. Для типа range браузер будет показывать маленькую засечку возле слайдера, указывая на то, где найдены предлагаемые опции. Для типа color представлены образцы цвета с опцией переключения на стандартный пикер цвета для устройства, если нужно выбрать другой цвет.
Тег datalist, как и select, является списком опций, которые расположены в тегах option. Datalist ассоциируется с input с помощью атрибута list на инпуте. В качестве значения атрибут list принимает ID тега datalist. Тег datalist можно привязать к нескольким полям.
На практике это выглядело бы так:
|
1 2 3 4 5 6 7 8 |
<label for="favcolor">Favorite Color</label> <input type="color" list="colors" id="favcolor" name="favcolor"> <datalist id="colors"> <option value="#0000FF" label="blue"> <option value="#008000" label="green"> <option value="#ff0000" label="red"> <option value="#663399" label="RebeccaPurple"> </datalist> |
Атрибут autofocus
Булев атрибут autofocus моментально присваивает полю формы фокус. Получить автофокус может только один элемент на странице. Для лучшего пользовательского опыта и доступности лучше не использовать данный атрибут.
Поля типа input поддерживают очень много атрибутов, некоторые из которых созданы для определенных типов. Среди них: alt,src, height и width для типа image и step, min и max для числового типа, в том числе дат и диапазонов. Dirname говорит серверу о направленности поля формы. formaction, formenctype, formmethod, formnovalidate и formtarget задают методы перезаписи атрибутов формы. Inputmode говорит браузеру, какую клавиатуру показать, когда устройство может отобразить динамическую клавиатуру. minlength и maxlength задают длину поля. checked, name, size, type и value должны быть вам уже знакомы, а вот псевдоклассы :checked и :default могут быть новыми для вас. В следующей статье мы расскажем вам про некоторые из этих атрибутов и их поля.
Автор: Alexis Goldstein, Estelle Weyl, Louis Lazaris
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
