A- A A+
HTML5

В HTML5 появились новые атрибуты и элементы, некоторые из которых даже позволяют отказаться от использования JavaScript. Итак, встречайте: datalist, hidden, prefetch, autofocus.

Список вариантов - datalist

Элемент datalist создает в опросах список, который становится доступным при наборе в поле текста и позволяет выбирать варианты ответов.

Синтаксис:

<input list="id-1">
	<datalist id="id-1">
		<option value="Спартак">
            	<option value="Динамо">
            	<option value="Боруссия">
            	<option value="Барселона">
        </datalist>

Обратите внимание, что значение идентификатора элемента datalist должно совпадать со значением атрибута list.

HTML5

Проверяем результат.

HTML5

Предзагрузка страницы - prefetch

Prefetch является элементом атрибута rel, который указывает отношения между страницей, на которой он расположен и контентом, на который ведет ссылка, заданная href.

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

Синтаксис:

	<a href="http://site.ru" rel="prefetch">
Страница 2</a>
HTML5

Скрытие контента - hidden

Атрибут hidden скрывает любое содержимое от просмотра. Такой контент не отображается на странице, но может быть доступен с помощью скрипта.

Значение данного атрибута может быть пустым hidden="" или с названием самого атрибута hidden="hidden".

В качестве примера вставляем атрибут в div и скрываем заключенный в нем текст.

	<div hidden="hidden">Прячем текст</div> 
HTML5

Автофокус - autofocus

Атрибут autofocus автоматически в поле формы устанавливает фокус. Таким образом, нет необходимости начинать набор текста только после щелчка курсором мыши в поле формы.

Синтаксис:

	<input type="text">
	<input type="text" autofocus>  
HTML5

Теперь автофокус находится во втором поле.

HTML5
 
 

Добавить комментарий

Защитный код Обновить

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

МОЙ TELEGRAM-КАНАЛ

ПОДПИСАТЬСЯ!


Перенос на хостинг

Перенос на хостинг

Бесплатный видео-курс по переносу готового сайта на одну из лучших хостинг-площадок РУнета.

Смотреть (бесплатно)

Бессмертный сайт

Бессмертный сайт

2 урока, 16 минут, и Ваш сайт - БЕССМЕРТНЫЙ!

Узнать подробности!