и
). Для этого применяется набор атрибутов formaction
, formmethod
, formenctype
и formtarget
, которые являются аналогами соответствующих атрибутов без приставки form. В примере 4 показано использование этих атрибутов.Пример 4. Отправка формы
HTML5
IE
Cr
Op
Sa
Fx
Отправка формы
Все новые атрибуты форм не поддерживаются некоторыми браузерами, в частности, Internet Explorer и Safari.
Когда браузеры стали поддерживать JavaScript, за ним быстро закрепились две основные задачи: эффекты при наведении мышью и улучшения для веб-форм. Потом в CSS появился псевдо-класс :hover
и необходимость в скриптах для многих ситуаций первого плана отпала.
Эта история постоянно повторяется. Как только определенный шаблон или задача становятся достаточно популярными, они почти непременно в конце концов упрощаются в техническом плане и делаются более доступными. Именно так в CSS3 появилось много функций для создания простых анимаций , для которых прежде требовался JavaScript.
Говоря о формах, тут возможности CSS довольно ограничены. И теперь на сцену снова выходит HTML5. Следуя тому же принципу, он вводит новые функции, которые на самом деле вовсе не новые, но сделаны проще и удобнее.
Нетрудно догадаться, что прежде они были частью отдельной спецификации WHATWG под названием Web Forms 2.0.
Текст-заглушка
Существует распространенный шаблон для оформления поисковых форм:Если поле пусто - вставить туда текст-заглушку.
Когда поле в фокусе - убрать заглушку.
Если пользователь оставил поле незаполненным и убрал фокус - вернуть ее.
При этом заглушка обычно выделяется немного более светлым цветом, чем вводимый в поле текст, что достигается при помощи CSS , JavaScript, или сочетания обоих.В HTML5 все это реализуется при помощи простого параметра placeholder
:
Your hobbies
Так это будет выглядеть в браузере. Owl stretching
- текст по умолчанию, приведенный в качестве примера.
В тех браузерах, что поддерживают этот атрибут, он работает прекрасно, но их пока не так много. Вам решать, что делать с остальными. В принципе, можно не напрягаться и не делать ничего совсем - данная функция все-таки хоть и удобна и приятна, но не жизненно важна. Но как вариант, можно разработать JavaScript-альтернативу; в этом случае сначала нужно будет убедиться, что браузер действительно не поддерживает placeholder
.Вот пример простой функции, которая проверяет поддержку определенного параметра:
Function elementSupportsAttribute(element,attribute) {
var test = document.createElement(element);
if (attribute in test) {
return true;
} else {
return false;
}
}
Она создает «фантомный» элемент в памяти - не на самой странице, - и затем смотрит, есть ли у прототипа этого элемента свойство с тем же же названием, что и параметр, которые вы проверяете. Функция вернет либо true
, либо false
.
С ее помощью вы можете подсунуть альтернативный код только для тех браузеров, которые не поддерживают данную возможность HTML5:
If (!elementSupportsAttribute("input","placeholder")) {
// Заглушка при помощи JavaScript описывается здесь.
}
Автофокус
«Привет, я функция автофокуса. Я знакома вам по таким ролям, как Google: мне повезет
и Twitter: What’s happening?
»Этот шаблон очень прост и относительно легко реализуется в JavaScript. Суть его в том, что, когда страница загружена, нужно автоматически поставить фокус на определенном поле.
HTML5 позволяет использовать для этого булев параметр autofocus
:
What"s happening?
Проблема только в том, что эта функция может ужасно раздражать. Очень часто, листая страницы в интернете, я использую клавишу пробела для быстрой прокрутки содержимого. На сайтах вроде Твиттера с этим автофокусом, я часто обнаруживаю, что вместо прокрутки заполняю поле пробелами.
Логика того, зачем этот параметр включен в спецификацию, вполне ясна, но он не идеален в плане юзабилити. Потому я советую его использовать аккуратно и только в случае явной пользы и при минимальной вероятности неудобств.
Одним из преимуществ переложения роли выполнения этой функции со скриптов на разметку состоит в том, что теоретически пользователи смогут ее отключать в настройках своего браузера. Ни один браузер, впрочем, пока это не позволяет, но все еще впереди. Как бы там ни было, сейчас она может быть отключена только вместе с JavaScript вообще - не самое лучшее решение ; все равно что выкалывать себе глаза, чтобы избежать слишком яркого света.
Так же как и с параметром placeholder
можно проверить наличие поддержки автофокуса в браузере и, при необходимости, добавить альтернативный код на JavaScript:
If (!elementSupportsAttribute("input","autofocus")){
document.getElementById("status").focus();
}
Параметр autofocus
можно применить не только к элементам input
, но к любым другим типам полей, например textarea
или select
. И, разумеется, только единожды на странице.
Required
JavaScript часто используется для проверки заполненности формы на стороне клиента. Снова, часть этой задачи теперь переложена на HTML5. Теперь можно указать, что определенное поле обязательно к заполнению при помощи булева параметра required
. Ваш пароль
Теоретически, наличие незаполненного поля с этим параметром само себе должно не дать пользователю отправить данные на обработку. Но хотя пока браузеры этого и не делают, его все равно можно интегрировать для привычной обработки форм JavaScript-ом. Просто теперь вместо отбора элементов по, скажем class=«required»
, можно искать их по конкретно параметру required
.
Автозаполнение
Современные браузеры не столько просто отображают веб-страницы, но и стараются повысить юзабилити, безопасность и удобство пользования ими. Функция автозаполнения форм - пример такого подхода. Большую часть времени она довольно полезна, но иногда может немного раздражать или даже быть потенциальным риском для безопасности. Я не против, когда браузер запоминает мои контактные данные, но я бы не хотел, чтобы он хранил логин и пароль от моего банковского счета на случай, если компьютер украдут.HTML5 позволяет отключить автозаполнение как для отдельного поля, так и для целой формы. Параметр autocomplete
- не булев, хоть и принимает всего два значения: on
и off
.