- Автор темы
- #1
Пару полезных атрибутов ХТМЛ5, которых я практически никогда не встречал, но они очень удобные в использовании:
autofocus
Атрибут autofocus позволяет вам переключить фокус на любой элемент, такой как, например, текстовое поле, или кнопка. Фокус устанавливается на элемент после того, как страница будет полностью загружена. Раньше для реализации подобной фичи нам приходилось использовать JavaScript, но теперь есть HTML5, который позволяет нам сделать это очень быстро и просто. Весьма полезно для конверсионной последней страницы, например оформление заказа и тп.
download
Атрибут download позволяет нам установить имя загружаемого файла. Теперь нам не нужно делать этого на серверной стороне. Например, у нас есть файл hello.js, который мы можем запросто сохранить под именем README. Всё делается очень просто: атрибут download используется в связке с атрибутом href, с помощью которого мы задаём путь до файла. Позволяет сделать правильное хранилище файлов, а не давать пользователю файлы типа 12СA9AFF012E.zip
prefetch (!!!)
Атрибут prefetch позволяет браузеру заранее загрузить нужную нам страницу для того, чтобы отобразить её сразу при переходе по ссылке, а не ждать утомительной и долгой загрузки. Например, статья поделена на несколько частей (каждая часть располагается на своей странице. /page1 и /page2). Теперь мы можем загрузить вторую страницу заранее, пока занимаемся прочтением первой. Делается это очень просто.
hidden (!!!!!)
Как вы уже, возможно, догадались, атрибут hidden используется для того, чтобы спрятать какой-либо элемент на странице. Данный атрибут выполняет сходную роль значения hidden атрибута type элемента input. Все мы помним спрятанные текстовые поля, которые хранились для сохранения данных, которых пользователю видеть не обязательно. Что же, с атрибутом hidden мы можем спрятать любой элемент, не создавая доп. класс.
spellcheck
Атрибут spellcheck позволяет нам проверять орфографические ошибки при вводе данных. Работает данный атрибут со всеми инпутами (читай, текстовыми полями) и редактируемыми div'ами (contenteditable div, если кто не помнит).
datalist (!!!)
Тег datalist позволяет нам предлагать варианты слов при вводе текста в поле конечным пользователем. Например, мы хотим устроить опрос на тему, услугами какого мобильного оператора пользуется наш абонент. Если он не помнит, как он называется, а помнит лишь, скажем, первую букву в его названии, то мы можем предложить ему все доступные варианты.
autofocus
Атрибут autofocus позволяет вам переключить фокус на любой элемент, такой как, например, текстовое поле, или кнопка. Фокус устанавливается на элемент после того, как страница будет полностью загружена. Раньше для реализации подобной фичи нам приходилось использовать JavaScript, но теперь есть HTML5, который позволяет нам сделать это очень быстро и просто. Весьма полезно для конверсионной последней страницы, например оформление заказа и тп.
download
Атрибут download позволяет нам установить имя загружаемого файла. Теперь нам не нужно делать этого на серверной стороне. Например, у нас есть файл hello.js, который мы можем запросто сохранить под именем README. Всё делается очень просто: атрибут download используется в связке с атрибутом href, с помощью которого мы задаём путь до файла. Позволяет сделать правильное хранилище файлов, а не давать пользователю файлы типа 12СA9AFF012E.zip
prefetch (!!!)
Атрибут prefetch позволяет браузеру заранее загрузить нужную нам страницу для того, чтобы отобразить её сразу при переходе по ссылке, а не ждать утомительной и долгой загрузки. Например, статья поделена на несколько частей (каждая часть располагается на своей странице. /page1 и /page2). Теперь мы можем загрузить вторую страницу заранее, пока занимаемся прочтением первой. Делается это очень просто.
hidden (!!!!!)
Как вы уже, возможно, догадались, атрибут hidden используется для того, чтобы спрятать какой-либо элемент на странице. Данный атрибут выполняет сходную роль значения hidden атрибута type элемента input. Все мы помним спрятанные текстовые поля, которые хранились для сохранения данных, которых пользователю видеть не обязательно. Что же, с атрибутом hidden мы можем спрятать любой элемент, не создавая доп. класс.
spellcheck
Атрибут spellcheck позволяет нам проверять орфографические ошибки при вводе данных. Работает данный атрибут со всеми инпутами (читай, текстовыми полями) и редактируемыми div'ами (contenteditable div, если кто не помнит).
datalist (!!!)
Тег datalist позволяет нам предлагать варианты слов при вводе текста в поле конечным пользователем. Например, мы хотим устроить опрос на тему, услугами какого мобильного оператора пользуется наш абонент. Если он не помнит, как он называется, а помнит лишь, скажем, первую букву в его названии, то мы можем предложить ему все доступные варианты.
HTML:
<input list="provlist" name="list" >
<datalist id="provlist">
<option value="МТС">
<option value="Мегафон">
<option value="Билайн">
<option value="ТЕЛЕ2">
<option value="БобрДобр">
</datalist>
