Универсальные атрибуты и атрибуты-события
http://belarusweb.net
Основы создания сайтов

Универсальные атрибуты и атрибуты-события

Универсальные атрибуты html-элементов

В HTML 5 присутствует довольно значительное число атрибутов. Все они перечислены в официальной документации на сайте W3C, на который можно перейти здесь или из нашего раздела 'Ссылки'. Осуществив переход по указанному адресу, вы легко найдете четвертый раздел, в котором описываются элементы и соответствующие им атрибуты. Легко заметить, что некоторые атрибуты применимы только к одному тегу, а некоторые сразу к нескольким. Например, атрибут charset применяется только к тегу <meta>, в то время как атрибут loop сразу к двум тегам: <audio> и <video>. Также среди атрибутов встречаются и такие, которые применимы практически ко всем тегам. Их называют универсальными атрибутами.

Универсальных атрибутов 13:

  • accesskey – в качестве значения принимает клавишу доступа ('key' ), т.е. латинскую букву из диапазона a-z (раскладка клавиатуры должна быть переключена в режим английского языка) или цифру из диапазона 0-9, и позволяет получить доступ к элементу при помощи комбинации клавиш, которая зависит от используемого браузера:
    • 'alt'+'key'  для   Opera Google Chrome  и   Яндекс.Браузер,
    • 'shift'+'alt'+'key'  для   Mozilla Firefox.

    Несмотря на то, что атрибут является универсальным, свои функции он надежно выполняет только для ссылок, различных кнопок и полей, которые формируются, например, тегами <a>, <area>, <button>, <input>, <label>, <legend>, <textarea>. В результате нажатия соответствующей браузеру комбинации клавиш совместно с указанной клавишей доступа элемент получает фокус и далее, в зависимости от вида элемента, может выполняться какое-нибудь действие, например, переход по ссылке, если фокус получает элемент 'a' (см. пример 1.5).

  • class – используется для указания имени класса стилевого оформления, который будет применяться к элементу, сформированному данным тегом. Если в качестве значения атрибута указывается сразу несколько классов, то они перечисляются через пробел. Также отметим, что использовать русские буквы в именах классов нельзя. Используются латинские буквы, регистр которых имеет значение, цифры 0-9, символ дефиса '-' и знак подчеркивания '_'. Данный атрибут мы будем активно использовать при изучении CSS (от англ. Cascading Style Sheetsкаскадные таблицы стилей) – формального языка, предназначенного для описания внешнего вида html-документов.
  • contenteditable – разрешает редактирование текста прямо в браузере. Может принимать два значения: contenteditable="true" и contenteditable="false". Разрешается вообще не указывать значение. Если атрибут присутствует, то значение подразумевается "true", иначе используется значение по умолчанию.
  • dir (от англ. direction) – задает направление и отображение текста. Может принимать два значения: dir="ltr", т.е. как обычно слева направо, и dir="rtl", т.е. справа налево, как принято, например, в арабских языках.
  • draggable – разрешает перетаскивание элемента используя Drag and Drop API.
  • hidden – скрывает содержимое элемента от просмотра. При этом сам элемент не отображается на странице, а его место занимают другие, видимые элементы. Этот атрибут не имеет значения. Одно его присутствие уже означает, что элемент будет скрыт.
  • id (от англ. identifier) – задает уникальное имя элемента, по которому к нему могут обращаться скрипты или задаваться именной (т.е. использующийся только для этого элемента) класс CSS. Как следует из определения, использование двух элементов с одинаковым значением id на странице не допустимо. Использовать русские буквы при определении идентификатора нельзя. Также, как и при определении имени класса, используются только латинские буквы, регистр которых имеет значение, цифры 0-9, символ дефиса '-' и знак подчеркивания '_'. Но начинаться идентификатор должен только с латинского символа!
  • lang (от англ. language) – указывает браузеру, на каком языке написан текст внутри данного элемента. Это позволяет браузеру правильно отображать некоторые символы и языковые особенности.
  • spellcheck – указывает браузеру о необходимости проверки орфографии в тексте. Понятно, что применение атрибута имеет смысл для редактируемых элементов, для которых атрибут contenteditable = "true", или элементов, которые предназначены для ввода текста пользователем. При этом в браузере должна быть включена проверка орфографии. Может принимать два значения: spellcheck="true" и spellcheck="false".
  • style – предназначен для определения стиля элемента при помощи правил CSS. В качестве значений атрибута style указываются стилевые правила CSS: вначале следует имя стилевого свойства, затем через двоеточие его значение. Если к элементу применяются сразу несколько стилевых свойств, то они разделяются между собой точкой с запятой. Данный атрибут не стоит путать с парным тегом <style>, который мы рассмотрим позже.
  • tabindex – определяет последовательность получения фокуса при переходе между элементами с помощью клавиши 'Tab'. В качестве значения атрибут принимает любое положительное целое число или нуль. По умолчанию у всех элементов значение принимается равным нулю. Поэтому, когда мы нажимаем клавишу 'Tab', браузер начинает передавать фокус элементам в порядке их появления в коде. Если же значение атрибута tabindex некоторых элементов отлично от нуля, то браузер начинает передавать фокус от элементов с меньшим значением к элементам, у которых значение атрибута больше. При этом допускается пропускать некоторые цифры. В любом случае браузер будет искать элемент со следующим наименьшим значением tabindex. Когда все элементы со значением атрибута отличным от нуля закончатся, браузер начнет передавать фокус элементам, у которых атрибут tabindex не задан или равен нулю, при чем в той последовательности, в которой они встречаются в коде.
  • title – создает всплывающую подсказку к элементу, которая появляется при наведени курсора на элемент. В качестве значения принимает обычную строку. Также не стоит путать его с парным тегом <title>.
  • translate – сообщает браузеру о том, что содержимое данного элемента переводить не нужно. Это требуется в ситуации, когда на странице присутствует сразу несколько языков или, например, при переводе инструкции по использованию бытовой техники с английского языка на русский, когда не требуется перевод названия кнопок, поскольку все они подписаны на английском. В качестве значений данный атрибут принимает translate="yes", которое установлено по умолчанию для всех элементов, и translate="no".

Код с использованием наиболее важных для нас тегов показан в примере 1.5.

<!DOCTYPE html>

<html>
<head>
	<meta charset="utf-8">	
	<!-- Это элемент 'title', а не атрибут -->
	<title>Используем универсальные атрибуты</title>
	</head>
<body>
	<p contenteditable="true" tabindex="5" spellcheck="false">
		Я &ndash; абзац, который можно редактировать.<br>
		Проверка орфографии отключена.
	</p>
	
	<textarea tabindex="0" accesskey="s">
         Я &ndash; текстовое поле. Чтобы передать мне фокус,<br>
		нажмите спецкомбинацию клавиш текущего браузера + клавишу 's'.
    </textarea>
	
	<p tabindex="1" title="Мой tabindex равен единице!">
		<span hidden>А я показан не буду.</span>
		Наведите на меня курсор и подождите)))<br>
		Кстати, при нажатии <span style="color: green">'Tab'</span>
		я первым <br>получаю фокус, т.к. у меня наименьшее значение<br>
		<span style="color: red">tabindex</span> из тех, что больше нуля.
	</p>
</body>
</html>	

Пример 1.5. Использование универсальных атрибутов

Одиночный тег <br> формирует пустой элемент разметки 'br', который вставляет в данное место кода принудительный разрыв строки, заставляя браузер продолжить выводить данные на новой строке. А парный тег <span> формирует элемент 'span', который предназначен в основном для выделения небольших текстовых фрагментов строк или изображений. Это универсальный элемент, который никак не изменяет свое содержимое (в качестве примера посмотрите на второе предложение второго абзаца), зато легко приобретает дополнительные свойства объединяясь со стилями CSS через атрибуты class или id.

Что касается атрибута style, то мы в качестве значения атрибута использовали CSS-свойство color (цвет) и значения цвета "red" и "blue". Если бы мы указывали еще какие-нибудь свойства CSS в одном атрибуте style, то пришлось бы разделять их точкой с запятой.

Атрибуты-события

Кроме универсальных атрибутов выделяется еще одна обширная группа так называемых атрибутов-событий (смотреть), которые используются для вызова специальных скриптов – обработчиков событий. Обработчик события запускается в тот момент, когда происходит событие, которое представляет данный атрибут. Так, например, если в открывающем теге <p> указать атрибут-событие onclick="hidden()", то при клике левой кнопкой мыши по абзацу выполнится некоторая гипотетическая функция hidden(), в результате чего абзац станет невидимым на странице.