Placeholders

Прежде мы должны были использовать немного JavaScript, чтобы создать указатели заполнения для текстовых полей (это – своего рода подсказки, отображаемые внутри текстовых полей). Несомненно, вы можете первоначально установить атрибут value, как вы считаете нужным, но как только пользователь удалит этот текст и кликнет вне поля, поле ввода вновь останется пустым. Атрибут placeholder исправляет это.

1.<input name="email" type="email" placeholder="[email protected]" />

Опять же, поддержка является теневой в лучшем случае через браузеры, однако, это продолжит улучшаться с каждым новым выпуском. Кроме того, если браузер, как Firefox и Opera, не поддерживает атрибут placeholder, это не принесет никакого вреда.

Атрибут Required

Формы учитывают новый атрибут required, который определяет, обязательно ли заполнение данного поля. В зависимости от ваших предпочтений, вы можете назначить этот атрибут двумя способами:

view sourceprint?

1.<input type="text" name="someInput" required>

Или более структурно:

view sourceprint?

1.<input type="text" name="someInput" required="required">

Любой метод работает. С этим кодом, и в браузере, который поддерживает эту технологию, форма не может быть подтверждена, если поле "someInput" пусто. Вот быстрый пример; мы также добавим атрибут placeholder, поскольку нет никаких причин не делать этого.

view sourceprint?

1.<form method="post" action="">

2.<label for="someInput"> Your Name: </label>

3.<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>

4.<button type="submit">Go</button>

5.</form>

Если поле оставят пустым и будет нажата кнопка подтверждения формы, текстовое поле будет подсвечено.

Атрибут Autofocus

Снова HTML5 отбрасывает потребность в решениях JavaScript. Если определённое поле должно быть "выбрано" или сфокусировано, по умолчанию мы теперь можем использовать атрибут autofocus.

view sourceprint?

1.<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>

Интересно, что в то время как я лично более склонен к подходу XHTML (использование кавычек и т.д.), устанавливая "autofocus=autofocus", я чувствую себя странно. Также, мы будем придерживаться этого подхода, когда ключевое слово имеет только один вариант.

Регулярные выражения

Как часто вы пишете какие-то беглые регулярные выражения для проверки определённого текстового поля? Благодаря новому атрибуту pattern, мы можем вставлять регулярные выражения прямо в нашу разметку.

view sourceprint?

01.<form action="" method="post">

02.<label for="username">Create a Username: </label>

03.<input type="text"

04.name="username"

05.id="username"

06.placeholder="4 <> 10"

07.pattern="[A-Za-z]{4,10}"

08.autofocus

09.required>

10.<button type="submit">Go </button>

11.</form>

Если вы знакомы с регулярными выражениями, вы знаете, что этот шаблон: [A-Za-z]{4,10} вводит только заглавные и строчные буквы. Также эта строка должна содержать не менее 4 и не более 10 символов.

Обратите внимание, что мы начинаем комбинировать все эти новые удивительные атрибуты!

Определение поддержки атрибутов

Как хороши эти атрибуты, если вы не можете определить, распознаёт ли их браузер? Есть несколько способов понять это. Мы обсудим два. Первый способ использует превосходную библиотеку Modernizr. Кроме этого, мы можем создать и проанализировать эти элементы, чтобы определить, на что способны браузеры. Например, в нашем предыдущем примере, если мы хотим узнать, может ли браузер осуществить атрибут pattern, мы должны добавить немного JavaScript на нашу страницу:

view sourceprint?

1.alert('pattern' in document.createElement('input')) // boolean;

Фактически, это популярный метод определения совместимости браузеров. Библиотека jQuery использует эту уловку. Выше, мы создаем новый элемент input и определяем, распознан ли браузером атрибут pattern. Если так, браузер поддерживает эти функции. В противном случае – нет.

view sourceprint?

1.<script>

2.if (!'pattern' in document.createElement('input')) {

3.// do client/server side validation

4.}

5.</script>

Имейте в виду, что это реализовано на JavaScript.

Элемент <mark>

Думайте об элементе <mark> как о выделителе. Строка, обёрнутая в этот тег, должна относиться к текущим действиям пользователя. Например, если бы я искал "Откройте свой разум" на каком-то блоге, я мог бы использовать JavaScript, чтобы обернуть каждое слово этой строки в тег.

view sourceprint?

1.<h3> Search Results </h3>

2.<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>

Когда использовать <div>

Некоторые из нас первоначально задались вопросом, когда мы должны использовать div. Теперь, когда мы имеем доступ к header, article, section, и footer, есть ли у нас время использовать …div? Абсолютно.

«Div’ы должны использоваться, когда нет лучших элементов для работы»

Например, если вы находите, что вам нужно обернуть блок кода в элемент, чтобы позиционировать контент, <div> имеет совершенный смысл. Однако, если вы вместо этого оборачиваете новый пост блога, или, возможно, список ссылок в нижнем колонтитуле, лучше использовать элементы <article> и <nav> соответственно. Они более семантичны.

Атрибут Data

У нас теперь официально есть поддержка custom attribute в пределах всех элементов HTML. В то время, как прежде мы могли осуществить это как:

view sourceprint?

1.<h1 id=someId customAttribute=value> Thank you, Tony. </h1>

…валидатор поднял бы суету! Но теперь, если мы снабжаем наш атрибут предисловием “data,” мы можем официально использовать этот метод. Если вы когда-либо прикрепляли важные данные к чему-то вроде атрибута class, вероятно для использования JavaScript, это будет большой помощью!