АТРИБУТЫ HTML5 с примерами

HTML5 атрибут "autofocus"

Атрибут autofocus позволяет автоматически сфокусироваться на элементах input, button или textarea как только страница загрузится. Раньше пришлось бы использовать javascript для реализации таких решений.

<input autofocus="autofocus" />

⇨ пример

HTML5 атрибут "download"

Атрибут download позволяет разработчикам создать ссылку на скачивание файла, вместо того, чтобы переходить к его определенной странице. Больше не нужно полагаться на сервер, чтобы заставить файл загружаться. Это может быть большим прорывом для веб-приложений. В href вы добавляете расположение файла, который вы хотите скачать, в атрибуте download, вы указываете его имя. В примере ниже файл будет называться «MyPDFReport.pdf».

 <a href="/my.pdf" download="MyPDFReport">Скачать PDF</a>

⇨ пример

HTML5 Link Prefetching

Атрибут Prefetching позволяет браузеру загружать другую страницу или другие средства на заднем плане. Это может быть полезно для постраничного материала. Например, в то время как вы находитесь на странице 1, и установлено‘link prefetch’ – это приведет к загрузке страницы 2 почти мгновенно, так как она уже предварительно была загружена. Это также может использоваться для других целей, таких как изображения ползунков или реализации фотоальбом несколько похоже на Facebook Фото просмотра работ.

 <link rel="prefetch" href="http://www.aaronlumsden.com/page2">

 

Элемент HTML5 – hidden

Атрибут hidden работает аналогично CSS ‘display:none’. Он в основном скрывает элемент. Он может быть описан как:

Скрытый атрибут может также использоваться для скрытия от пользователя элемента до тех пор, пока некоторое условие не выполнено (например, выбор checkbox и т.д.). Затем можно удалить скрытый атрибут JavaScript и сделать элемент видимым.

 <input type="hidden" hidden="hidden" />

⇨ пример

HTML5 Spellcheck

Атрибут spellcheck (проверка правописания) работает на любых объектах ввода, таких как textarea и редактирования контента в div (за исключением паролей). Он определяет, должен ли браузер проверять текст, который он содержит.

 <input type="text" spellcheck="true|false">

 

Элемент HTML5 – Datalist

Это полезное дополнение к нашей web-разработке. Элемент управления datalist HTML5 создаёт список вариантов, которые можно выбирать при наборе в текстовом поле. Изначально этот список скрыт и становится доступным при получении полем фокуса.

<form action="form.php" method="get">
    <input list="mylist" name="mylist" >
    <datalist id="mylist">
      <option value="CSS">
      <option value="HTML">
      <option value="PHP">
      <option value="Jquery">
      <option value="Wordpress"> 
    </datalist>
    <input type="submit" />
  </form>

 

Элемент HTML5 – output

Элемент output действует как поле ввода, за исключением того, что он не принимает ввод данных. Это хорошо для приложений, таких как калькулятор, где будет использоваться элемент output для результата суммы вычислений. Официальное определение для элемента output:

Элемент output представляет результат вычисления.

Вот как мы определяем элемент output:

 <output name="output"></output>

 

⇨ другие примеры