Функция автозаполнения вызывает радость и восторг в Интернете. Если в поле формы что-то вводится, браузер предлагает список слов, если данная функция активирована и поддерживается браузером.
Такие приложения теперь можно очень легко реализовать. Для этого присваивается атрибут autocomplete элементу input.
<input type="text" autocomplete="on" />
Значением on активируется автозаполнение для поля. Теперь браузер запоминает значения, введенные в поле, и позже предлагает их через выпадающий список. Таким образом, формы можно заполнять значительно быстрее.
Однако такое поведение не требуется для каждого поля. В таких случаях автозаполнение можно явно деактивировать. Для этого присваивается атрибуту autocomplete значение off.
<input type="text" autocomplete="off" />
Также можно добавить атрибут autocomplete к элементу form. В зависимости от того, используется ли значение on или off, будет активирована или деактивирована функция автозаполнения для всей формы.
<form autocomplete="on"> .. </form>
Однако в случае противоречивых указаний в пределах формы применяются последние указания.
<form autocomplete="on"> Name: <input type="text" name="vname" autocomplete="off" /><br /> Vorname: <input type="text" name="nname" /><br /> Postleitzahl: <input type="text" name="plz" /><br /> Ort: <input type="text" name="ort" /> </form>
В этом примере автозаполнение будет применено ко всем полям формы, так как значение autocomplete элемента form было установлено в on. Единственным исключением является поле vname, так как там авто-заполнение было явно деактивировано.
Для корректной работы автозаполнения это функция должна быть поддержана соответствующим браузером и не должна быть деактивирована. Кроме того, в списке предложений выводятся только те значения, которые были введены ранее.
Чтобы действительно влиять на значения в списке предложений, в HTML5 был введен элемент datalist. Этот элемент не выводится на экране. Значения для списков предложений задаются через дочерние элементы option. Например:
<div> Язык: <br /> <input type="text" autocomplete="on" list="sprache" /> </div> <datalist id="sprache"> <option value="HTML5"></option> <option value="XHTML"></option> <option value="PHP"></option> <option value="JavaScript"></option> </datalist>
По атрибуту list элемента input устанавливается логическая связь между полем ввода и элементом datalist. Для этого значения атрибутов list и id элемента datalist должны совпадать.
Установление фокуса
Фокус автоматически может быть установлен на поле формы при загрузке страницы. Такая функция известна, например, с главной страницы Google. Если эту страницу открывать, можно сразу начать вводить поисковый запрос, не устанавливая курсор в поле поиска вручную.
В HTML5 для таких случаев существует атрибут autofocus. Этот атрибут гарантирует, что поле формы, к которому он применяется, автоматически получает фокус при загрузке страницы.
Пример:
<form> <input name="suchfeld" autofocus="autofocus" /> <input type="submit" value="Suche" /> </form>
Браузеры, которые не знают атрибут autofocus, просто его игнорируют. Это игнорирование не оказывает негативного воздействия. (Хотя в таком случае поле не будет сфокусировано).
Проверка ввода
До сих пор проверка ввода в формы средствами HTML была невозможна. Если, например, требовалось проверить, ввел ли пользователь действительно адрес электронной почты в поле формы, обычно для этого использовался JavaScript или PHP. В HTML5 подобные "танцы" с условиями уже не нужны. Потому что теперь HTML включает в себя API валидации. И это имеет весомое значение. Теперь ввод в формах можно проверять с минимальными усилиями.
У HTML5 есть несколько правил, определяющих способы проверки полей. Например, поля ввода типа email проверяются на наличие правильного синтаксиса адреса электронной почты.
• url – Проверка на URL
• email – Проверка на адрес электронной почты
• range – Проверка на число с плавающей запятой
• number – Проверка на число с плавающей запятой
Чтобы отметить поле как обязательное, ему присваивается атрибут required.
<input id="vname" name="vname" type="text" required="required" />
Поле, помеченное таким образом, должно быть заполнено, поэтому не должно быть пустым.
Но будьте осторожны: для проверки полей должны соблюдаться определенные требования.
• Элементу должен быть присвоен атрибут name.
• Элемент должен находиться внутри элемента form, таким образом, он должен находиться внутри HTML-формы. Кроме того, связь с формой также может быть установлена через атрибут form.
• Элемент не должен иметь атрибутов readonly или disabled.
Правильное применение должно выглядеть следующим образом:
<form action="form.php">
<input id="vname" name="vname" type="text" required="required" />
<input type="submit" />
</form>
В этом случае браузер проверит, было ли поле заполнено. Если поле пусто и тем не менее пытается отправить форму, браузер должен выдать сообщение об ошибке.
В ходе этого ряда уже несколько раз упоминалось о типах полей формы email, range, number, tel и url. Эти поля проверяются не только на наличие значения, но также на корректность введенного значения.
<form action="form.php">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Так, например, для полей типа email проверяется, является ли введенное значение действительным адресом электронной почты. Если это не так, браузер выдаст сообщение об ошибке.
На вывод сообщения об ошибке отвечают браузеры.
Не автоматизировать проверку полей
Не во всех случаях желательно проводить автоматическую проверку ввода данных. Если необходимо отключить проверку всей формы, в начальном элементе form присваивается атрибут novalidate.
<form action="form.php" novalidate>
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Кроме того, атрибут formnovalidate может быть добавлен к кнопке отправки. Это может быть полезно, например, если одновременно с кнопкой отправки предлагается кнопка для временного сохранения формы.
<form action="form.cgi" method="post">
<input id="email" name="email" type="email" />
<input type="submit" name="submit" value="Senden" />
<input type="submit"
formnovalidate="formnovalidate" value="Speichern" />
<input type="submit"
formnovalidate="formnovalidate" value="Ausloggen" />
</form>
В этом случае форма будет проверяться только после нажатия первой кнопки отправки. Другие две кнопки служат для сохранения и выхода из учетной записи. При этом проверка в этих случаях не требуется.
