HTML5 и даже более интересные формы

Хотите автоматически сфокусировать поле в форме при загрузке страницы? Вы больше не полагаетесь на JavaScript. Теперь вы можете добавить один атрибут в поле формы, и браузер выполнит всю работу:

  <input type = "text" autofocus = "true" /> 

Итак, не все браузеры поддерживают его на момент написания, но не бойтесь, вот небольшой jQuery для обратной совместимости со старыми браузерами:

  inputEl = document.createElement ('input'); if !! ('autofocus' в inputEl) {$ ('input [autofocus = "true"'). eq (0) .focus ();}; 

Этот фрагмент создает поле ввода, а затем проверяет, поддерживается ли атрибут autofocus полем. Если поддержки нет, то он ищет первое поле с атрибутом autofocus="true" и фокусируется.

Вам когда-нибудь приходилось добавлять в поле текст-заполнитель? Возможно, вы использовали JavaScript для достижения этой цели. Если это так, вам понравится новый атрибут placeholder . С атрибутом- placeholder вы можете приложить все усилия с помощью встроенного семантического совершенства HTML5.

Вот пример для поля почтового индекса:

  <input type = "text" name = "postcode" id = "postcode" placeholder = "A1A 1A1" /> 

Вы изо всех сил пытаетесь получить код формы, чтобы улучшить впечатления посетителей до последних и самых лучших? Вы можете подумать, что если вы используете CMS, которая автоматически выводит формы, вам не повезло. Ранее в этой статье мы увидели, как с товаром появилось небольшое прогрессивное улучшение JavaScript, и предоставили нам возможность использовать атрибуты autofocus и placeholder сегодня. Использование новых типов полей не должно отличаться, поэтому здесь есть некоторый код, чтобы сделать все это возможным. Код ищет правила проверки, применяемые с плагином jQuery Validation, и, когда он находит числовое правило или правило проверки по электронной почте, заменяет базовое поле для нового типа ввода HTML5:

  / * * Подключите метод проверки для автоматического обновления полей до HTML 5 * / $ ('input'). Each (function () {// Извлечение правил проверки для текущего элемента ввода var inputEl = this, rules = $ (inputEl). rules (); // Остановитесь прямо здесь, если к этому элементу не применены правила if (rules == undefined) {return $ (this);} // Выполните правила проверки и обновите поля до соответствующих типов ввода // Электронная почта, если (rules.email == true) {inputEl.setAttribute ('type', 'email');} // Номер другого if (rules.digits == true) {inputEl.setAttribute ('type', 'number'); // Если существуют правила проверки для минимальной и максимальной длины, устанавливаем соответствующие атрибуты if (rules.rangelength! = Undefined) {inputEl.setAttribute ('min', rules.rangelength [0]); inputEl.setAttribute ('min', rules.rangelength [1]);} else {if (rules.minlength! = undefined) {inputEl.setAttribute ('min', rules.minlength);} if (rules.maxlength! = undefined) {inputEl.setAttribute (' max ', rules.maxlength);}}} // URL иначе if (rules.url == true) {  inputEl.setAttribute ( 'типа', 'URL');  }}); 

Используя этот код, посетители Mobile Safari получат клавиатуру, соответствующую каждому полю.

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