В этой главе ставятся две основные цели: во-первых, освоить особенности создания форм в HTML5, во-вторых, упростить разметку форм для множества устройств с применением самых последних возможностей CSS.
В этой главе вы научитесь:
• легко и просто добавлять замещаемый текст в соответствующие поля ввода формы;
• отключать при необходимости автозавершение в полях формы;
• устанавливать обязательность заполнения конкретных полей перед отправкой формы;
• указывать различные типы ввода, например электронные адреса, телефонные номера и URL-адреса;
• создавать ползунки диапазонов чисел для упрощенного выбора значений;
• помещать в форму панели выбора дат и цветовых решений;
• использовать регулярные выражения для определения в формах допустимых значений;
• создавать стилевое оформление форм с помощью Flexbox.
Формы HTML5
Полагаю, что легче всего освоить формы HTML5 путем проработки конкретного примера. Из лучших примеров дневных телепередач у меня есть в запасе один ранее припасенный сценарий. Здесь нужно сделать небольшое введение.
Есть два обстоятельства: во-первых, я люблю кино, во-вторых, у меня всегда собственное мнение о том, какой фильм хороший, а какой — нет.
Каждый год, когда объявляют номинантов на премию «Оскар», я не могу избавиться от ощущения, что одобрение академии получают совсем не те фильмы. Поэтому мы начнем с формы HTML5, позволяющей киноманам выразить свое недовольство постоянным выдвижением недостойных фильмов в номинацию на эту премию.
Форма состоит из нескольких элементов fieldset, в которые мы включим основные типы ввода и атрибуты формы HTML5. Кроме стандартных полей ввода формы и областей ввода текста, у нас будут поле ввода чисел с возможностью прокрутки их последовательности, ползунок диапазона и замещаемый текст для многих полей.
Вот как эта форма выглядит в браузере Chrome без примененных к ней стилей.
Если установить фокус на первое поле и приступить к вводу текста, замещаемый текст исчезнет. Если убрать фокус и оставить поле нетронутым, ее раз щелкнув за пределами поля ввода, замещаемый текст останется в поле. Если отправить данные формы, не вводя вообще ничего, произойдет следующее.
Самое интересное, что все эти элементы пользовательского интерфейса, включая вышеупомянутые ползунок, замещаемый текст и поле с прокруткой чисел, а также функция проверки допустимости введенных данных реализуются самим браузером с применением HTML5 и без участия кода JavaScript. Пока что функция проверки правильности заполнения формы не имеет всесторонней поддержки со стороны браузеров, но вскоре этот недостаток будет устранен. Прежде всего разберемся со всеми новыми свойствами HTML5, имеющими отношение к формам и предоставляющими все эти возможности. Как только мы поймем всю механику, можно будет перейти к приданию форме стилевого оформления.
Основные сведения о компонентах формы HTML5
В нашей форме HTML5 содержится множество улучшений, поэтому разберемся со всем этим по порядку. У нас имеются три раздела формы, каждый из которых заключен в набор полей fieldset с соответствующей легендой legend:
<fieldset>
<legend>About the offending film (part 1 of 3)</legend>
<div>
<label for="film">The film in question?</label>
<input id="film" name="film" type="text" placeholder="e.g. King Kong" required>
</div>
В предыдущем фрагменте кода можно увидеть, что каждый элемент ввода формы также заключен в контейнер div с надписью, связанной с каждым полем ввода (при желании элемент ввода тоже можно заключить в элемент надписи). Пока что все как всегда. Но внутри этого первого элемента ввода нам уже встречается самая первая особенность формы, создаваемой с помощью HTML5. После обычных атрибутов ID, name и type появился атрибут placeholder.
placeholder
Атрибут placeholder имеет следующий вид:
placeholder="e.g. King Kong"
Текст-заместитель в полях формы стал общепринятым требованием, и создатели HTML5 решили, что он должен стать стандартным свойством HTML. Просто включите атрибут placeholder в поле ввода, и его значение будет по умолчанию показываться в поле до тех пор, пока в него не начнется ввод данных. Если данные в поле не введены, а фокус переведен в другое место, текст-заместитель останется в поле.
Придание стиля тексту-заместителю. Придать стиль тексту атрибута placeholder можно с помощью псевдоселектора :placeholder-shown. Следует иметь в виду, что этот селектор претерпел множество переработок, поэтому, чтобы задействовать его альтернативные варианты для уже реализованных версий, воспользуйтесь инструментальным средством, добавляющим префиксы производителей:
input:placeholder-shown {
color: #333;
}
В предыдущем фрагменте кода следующей особенностью формы HTML5 после атрибута placeholder выступает атрибут required.
required
Атрибут required имеет следующий вид:
required
Добавление булева атрибута (это означает, что вы либо включаете этот атрибут, либо нет) required в элемент ввода в тех браузерах, которые поддерживают HTML5, показывает, что значение в поле ввода является обязательным. Если форма будет отправлена без заполненного поля, в котором должна содержаться обязательная информация, на экран будет выведено предупредительное сообщение. Каким именно будет выводимое на экран сообщение (как по текстовому содержанию, так и по оформлению), зависит как от применяемого браузера, так и от типа незаполненного поля ввода.
Мы уже видели, как выглядит сообщение, касающееся обязательного для заполнения поля, в браузере Chrome. А следующая копия экрана показывает, как такое же сообщение выглядит в браузере Firefox.
Чтобы гарантировать ввод данных, значение required можно использовать совместно с полями для ввода многих типов данных. Исключениями являются элементы ввода range, color, button и скрытые поля ввода, поскольку они практически всегда должны иметь значение по умолчанию.
autofocus
HTML5-атрибут autofocus позволяет иметь в форме поле, готовое к пользовательскому вводу, на которое уже установлен фокус. Следующий код является примером поля ввода, заключенного в контейнер div с добавленным в конце атрибутом autofocus:
<div>
<label for="search">Search the site...</label>
<input id="search" name="search" type="search" placeholder="Wyatt Earp"
autofocus>
</div>
При использовании этого атрибута нужно проявлять осмотрительность. Если атрибут autofocus добавлен сразу к нескольким полям, браузеры могут прореагировать на это по-разному. Например, если autofocus добавлен к нескольким полям, то при загрузке страницы в Safari фокус получит последнее из полей с автофокусом. А вот в Firefox и Chrome все получится наоборот и фокус получит первое из таких полей.
Стоит также принять в расчет то, что для быстрого прохождения по содержимому веб-страницы после ее загрузки некоторые пользователи используют клавишу пробела. На странице с формой, у которой установлен автофокус, такой возможности не будет, вместо этого символ пробела будет добавлен в то поле ввода, у которого будет фокус. Нетрудно догадаться, что ничего, кроме раздражения, это у пользователей не вызовет.
При использовании атрибута autofocus нужно убедиться в том, что он используется в форме только один раз и вы представляете себе последствия его применения для тех, кто пользуется клавишей пробела для прокрутки страницы.
autocomplete
По умолчанию большинство браузеров помогают пользователю вводить данные с применением функции автозавершения значений в полях формы там, где это возможно. Хотя пользователь сам может отключить или включить эту функцию в браузере, теперь мы также можем показать браузеру, что не желаем применения функции автозавершения для формы или поля. Это пригодится не только при вводе важных данных (например, номеров банковских счетов), но и при желании обратить внимание пользователя и заставить его ввести что-либо вручную. Например, во многих заполняемых мною формах там, где требовался номер телефона, я вводил вымышленный номер. Я знал, что так поступаю не я один (вы ведь тоже так делали?), но путем установки в соответствующем поле ввода значения off для атрибута autocomplete я могу гарантировать, что пользователи не введут фиктивный номер, часть которого за них введет функция автозавершения. В следующем примере кода показано поле с атрибутом autocomplete, установленным в off:
<div>
<label for="tel">Telephone (so we can berate you if you're wrong)</label>
<input id="tel" name="tel" type="tel" placeholder="1-234-5 46758"
autocomplete="off" required>
</div>
Автозавершение можно отключить также для всей формы (но не для набора полей), воспользовавшись в объявлении формы атрибутом autocomplete:
<form id="redemption" method="post" autocomplete="off">
Атрибут list и связанный с ним элемент datalist
Атрибут list и связанный с ним элемент datalist позволяют ряду вариантов выбора быть представленными пользователю сразу же, как только он начнет вводить значение в поле. В следующем примере кода атрибут list используется вместе со связанным с ним элементом datalist, и все это заключено в контейнер div:
