Справочник по атрибутам HTML

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

Список атрибутов

Атрибуты содержимого и атрибуты IDL

В HTML у большинства атрибутов есть две формы: атрибут содержимого и атрибут IDL (языка описания интерфейсов).

Атрибут содержимого — это атрибут, который задаётся в содержимом (коде HTML); его можно задать или получить с помощью element.setAttribute() или element.getAttribute(). Атрибут содержимого всегда является строкой, даже если ожидаемое значение должно быть целым числом. Например, чтобы задать атрибут maxlength элемента <input> равным 42 с помощью атрибута содержимого, нужно вызвать для этого элемента setAttribute("maxlength", "42").

Атрибут IDL также известен как свойство JavaScript. Это атрибуты, которые можно считывать или задавать с помощью свойств JavaScript, например element.foo. Атрибут IDL при получении значения всегда использует базовый атрибут содержимого (но может преобразовать его), а при задании сохраняет в атрибуте содержимого некоторое значение. Иными словами, атрибуты IDL по сути отражают атрибуты содержимого.

В большинстве случаев атрибуты IDL возвращают значения в том виде, в котором они фактически используются. Например, для элементов <input> значением type по умолчанию является "text". Поэтому, если задать input.type="foobar", элемент <input> будет иметь тип text (как по внешнему виду, так и по поведению), но значением атрибута содержимого "type" будет "foobar". Однако атрибут IDL type вернёт строку "text".

Атрибуты IDL не всегда являются строками; например, input.maxlength — это число (знаковое длинное целое). При использовании атрибутов IDL значения считываются и задаются в нужном типе, поэтому input.maxlength всегда возвращает число, а для input.maxlength требуется число. Если передать значение другого типа, оно автоматически преобразуется в число согласно стандартным правилам преобразования типов JavaScript.

Атрибуты IDL могут отражать другие типы, например беззнаковые длинные целые числа, URL-адреса, логические значения и т. д. К сожалению, чётких правил нет, а поведение атрибутов IDL в сочетании с соответствующими атрибутами содержимого зависит от самого атрибута. В большинстве случаев оно соответствует правилам, изложенным в спецификации, но иногда это не так. Спецификации HTML стремятся сделать это поведение максимально удобным для разработчиков, однако по разным причинам (в основном историческим) некоторые атрибуты ведут себя необычно (например, select.size), поэтому следует изучить спецификации, чтобы точно понять их поведение.

Логические атрибуты

Некоторые атрибуты содержимого (например, required, readonly, disabled) называются логическими атрибутами. Если логический атрибут присутствует, его значение — true; если он отсутствует — false.

HTML накладывает ограничения на допустимые значения логических атрибутов: если атрибут присутствует, его значением должна быть либо пустая строка (то есть атрибут может быть без заданного значения), либо строка, совпадающая с каноническим именем атрибута без учёта регистра ASCII и не содержащая начальных или конечных пробелов. Ниже приведены допустимые способы записи логического атрибута:

<div itemscope>This is valid HTML but invalid XML.</div>
<div itemscope=itemscope>This is also valid HTML but invalid XML.</div>
<div itemscope="">This is valid HTML and also valid XML.</div>
<div itemscope="itemscope">
  This is also valid HTML and XML, but perhaps a bit verbose.
</div>

Для ясности: значения "true" и "false" недопустимы для логических атрибутов. Чтобы представить значение false, атрибут нужно полностью опустить. Это ограничение устраняет распространённые недоразумения: например, при checked="false" атрибут checked элемента будет интерпретирован как true, поскольку атрибут присутствует.

Атрибуты обработчиков событий

<div onclick="console.log(new URL(location))">Bad Example</div>

function onclick(event) {
  with (this.ownerDocument) {
    with (this) {
      console.log(new URL(location)); // 'URL' now resolves to document.URL instead of window.URL
      // TypeError: URL is not a constructor
    }
  }
}

Помимо перечисленных выше атрибутов, глобальные обработчики событий — например, onclick — также можно задавать как атрибуты содержимого для всех элементов.

Все атрибуты обработчиков событий принимают строку. Эта строка используется для создания функции JavaScript, например function name(/*args*/) {body}, где name — имя атрибута, а body — его значение. Обработчик получает те же параметры, что и соответствующий обработчик события JavaScript: большинство обработчиков получают только один параметр event, тогда как onerror получает пять: event, source, lineno, colno, error. Это означает, что обычно внутри атрибута можно использовать переменную event.

<div onclick="console.log(event)">Click me!</div>
<!-- The synthesized handler has a name; you can reference itself -->
<div onclick="console.log(onclick)">Click me!</div>

См. также

• Элементы HTML