Содержание
Справочник по атрибутам HTML
Элементы в HTML имеют атрибуты; это дополнительные значения, которые настраивают элементы или корректируют их поведение различными способами в соответствии с критериями, которые нужны пользователям.
Список атрибутов
| Имя атрибута | Элементы | Описание |
|---|---|---|
| accept (принять) | <form>,<input> | Список типов, которые принимает сервер, обычно это тип файла. |
| accept-charset | <form> | Список поддерживаемых кодировок. |
| accesskey (ключ доступа) | Глобальный атрибут | Сочетание клавиш для активации или добавления фокуса к элементу. |
| action | <form> | URI программы, которая обрабатывает информацию, отправленную через форму. |
align | <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>,<tr> | Задает горизонтальное выравнивание элемента. |
| allow | <iframe> | Определяет политику функций для iframe. |
| alt | <area>:, <img>,<input> | Альтернативный текст на случай, если изображение не может быть отображено. |
| async | <script> | Выполняет скрипт асинхронно. |
| autocapitalize (авто замена прописных букв) | Глобальный атрибут | Устанавливает, будет ли ввод автоматически капитализироваться при вводе пользователем. |
| autocomplete (автозаполнение) | <form>, <input>, <select>, <textarea> | Указывает, могут ли элементы управления в этой форме по умолчанию автоматически дополнять свои значения браузером. |
| autoplay | <audio>:, <video> | Аудио или видео должно воспроизводиться как можно скорее. |
| background | <body>, <table>, <td>,<th> | Указывает URL-адрес файла изображения. Примечание. Хотя браузеры и почтовые клиенты все еще могут поддерживать этот атрибут, он устарел. Вместо этого используйте CSS background-image. |
| bgcolor | <body>, <col>, <colgroup>, <marquee>:, <table>, <tbody>, <tfoot>, <td>, <th>,<tr> | Цвет фона элемента. Примечание. Это устаревший атрибут. Вместо этого используйте background-colorсвойство CSS. |
| border | img|<img>, <object>, <table> | Ширина границы. Примечание. Это устаревший атрибут. Вместо этого используйте borderсвойство CSS. |
| buffered | <audio>:, <video> | Содержит временной диапазон уже буферизованных медиафайлов. |
| capture (захват) | <input> | Из спецификации Media Capture указывает, что новый файл может быть захвачен. |
| charset | <meta> | Объявляет кодировку символов страницы или скрипта. |
| checked | <input> | Указывает, следует ли проверять элемент при загрузке страницы. |
| cite | <blockquote>, <del>, <ins>, <q> | Содержит URI, указывающий на источник цитаты или изменения. |
| class (класс) | Глобальный атрибут | Часто используется с CSS для стилизации элементов с общими свойствами. |
| color | <font>:,<hr> | Этот атрибут задает цвет текста, используя либо именованный цвет, либо цвет, указанный в шестнадцатеричном формате #RRGGBB. Примечание. Это устаревший атрибут. Вместо этого используйте colorсвойство CSS. |
| cols | <textarea> | Определяет количество столбцов в текстовой области. |
| colspan | <td>,<th> | Атрибут colspan определяет количество столбцов, которые должна занимать ячейка. |
| content | <meta> | Значение, связанное с контекстом http-equivили зависящее от него. |
| contenteditable (редактируемый контент) | Глобальный атрибут | Указывает, доступно ли редактирование содержимого элемента. |
contextmenu  | Глобальный атрибут | Определяет идентификатор элемента <menu>, который будет служить контекстным меню элемента. |
| controls | <audio>:, <video> | Указывает, должен ли браузер показывать пользователю элементы управления воспроизведением. |
| coords | <area>: | Набор значений, определяющих координаты активной области. |
| crossorigin (перекрестное происхождение) | <audio>:, <img>, <link>, <script>, <video> | Как элемент обрабатывает запросы между источниками. |
csp | <iframe> | Указывает политику безопасности содержимого, которую встроенный документ должен применять к себе. |
| data | <object> | Указывает URL-адрес ресурса. |
| data-* (данные-*) | Глобальный атрибут | Позволяет прикреплять пользовательские атрибуты к элементу HTML. |
| datetime | <del>, <ins>, <time> | Указывает дату и время, связанные с элементом. |
| decoding | <img> | Указывает предпочтительный метод декодирования изображения. |
| default | <track> | Указывает, что отслеживание должно быть включено, если в настройках пользователя не указано иное. |
| defer | <script> | Указывает, что сценарий должен быть выполнен после анализа страницы. |
| HTML глобальный атрибут: dir (директория) | Глобальный атрибут | Определяет направление текста. Допустимые значения: ltr (слева направо) или rtl (справа налево). |
| HTML атрибут: dirname (имя каталога) | <input>, <textarea> | |
| HTML атрибут: disabled (отключен) | <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea> | Указывает, может ли пользователь взаимодействовать с элементом. |
| download | <a>,<area>: | Указывает, что гиперссылка должна использоваться для загрузки ресурса. |
| draggable | Глобальный атрибут | Определяет, можно ли перетаскивать элемент. |
| enctype | <form> | Определяет тип содержимого данных формы, когда используется methodPOST. |
| enterkeyhint | <textarea>, <contenteditable> | Определяет enterkeyhint , какую метку действия (или значок) отображать для клавиши ввода на виртуальных клавиатурах. Атрибут можно использовать с элементами управления формой (например, значениями textareaэлементов) или в элементах узла редактирования (например, с помощью <contenteditable>атрибута). |
| HTML атрибут: for (для) | <label>, <output> | Описывает элементы, которые принадлежат этому. |
| form | <button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> | Указывает форму, которая является владельцем элемента. |
| formaction | <input>, <button> | Указывает действие элемента, переопределяя действие, определенное в файле <form>. |
| formenctype | <button>, <input> | Если кнопка/ввод является кнопкой отправки (например type=«submit», ), этот атрибут устанавливает тип кодировки, который будет использоваться при отправке формы. Если этот атрибут указан, он переопределяет атрибут владельца формыenctype кнопки . |
| formmethod | <button>, <input> | Если кнопка/ввод является кнопкой отправки (например, type=«submit»), этот атрибут устанавливает метод отправки, который будет использоваться при отправке формы (GET, POST, и т.д.). Если этот атрибут указан, он переопределяет атрибут владельца формыmethod кнопки . |
| formnovalidate | <button>, <input> | Если кнопка/ввод является кнопкой отправки (например, type=«submit»), этот логический атрибут указывает, что форма не подлежит проверке при ее отправке. Если этот атрибут указан, он переопределяет атрибут владельца формыnovalidate кнопки . |
| formtarget | <button>, <input> | Если кнопка/ввод является кнопкой отправки (например, type=«submit»), этот атрибут определяет контекст просмотра (например, вкладка, окно или встроенный фрейм), в котором отображается ответ, полученный после отправки формы. Если этот атрибут указан, он переопределяет атрибут владельца формыtarget кнопки . |
| headers | <td>,<th> | Идентификаторы элементов <th>, которые применяются к этому элементу. |
| height | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> | Определяет высоту перечисленных здесь элементов. Для всех остальных элементов используйте свойство CSS height. Примечание. В некоторых случаях, например <div>, это устаревший атрибут, и в этом случае height вместо него следует использовать свойство CSS. |
| hidden | Глобальный атрибут | Предотвращает рендеринг данного элемента, сохраняя при этом дочерние элементы, например элементы сценария, активными. |
| high | <meter> | Указывает нижнюю границу верхнего диапазона. |
| href | <a>, <area>:, <base>,<link> | URL связанного ресурса. |
| hreflang | <a>,<link> | Указывает язык связанного ресурса. |
| http-equiv | <meta> | Определяет директиву прагмы. |
| id | Глобальный атрибут | Часто используется с CSS для стилизации определенного элемента. Значение этого атрибута должно быть уникальным. |
| integrity | <link>,<script> | Указывает значение целостности подресурса , которое позволяет браузерам проверять то, что они извлекают. |
| intrinsicsize | <img> | Этот атрибут сообщает браузеру игнорировать фактический внутренний размер изображения и притворяться, что это размер, указанный в атрибуте. |
| inputmode | <textarea>, <contenteditable> | Предоставляет подсказку относительно типа данных, которые могут быть введены пользователем при редактировании элемента или его содержимого. Атрибут можно использовать с элементами управления формой (например, значениями textareaэлементов) или в элементах узла редактирования (например, с помощью contenteditableатрибута). |
| ismap | <img> | Указывает, что изображение является частью карты изображений на стороне сервера. |
| itemprop | Глобальный атрибут | |
| kind | <track> | Указывает тип текстовой дорожки. |
| label | <optgroup>, <option>, <track> | Указывает читаемый пользователем заголовок элемента. |
| lang | Глобальный атрибут | Определяет язык, используемый в элементе. |
| language | <script> | Определяет язык сценария, используемый в элементе. |
| loading | <img>,<iframe> | Указывает, следует ли загружать элемент лениво ( loading=«lazy») или сразу ( loading=«eager»). |
| list | <input> | Определяет список предопределенных параметров, предлагаемых пользователю. |
| loop | <audio>:, <marquee>:, <video> | Указывает, следует ли начинать воспроизведение мультимедиа с самого начала после его завершения. |
| low | <meter> | Указывает верхнюю границу нижнего диапазона. |
| manifest | <html> | Указывает URL-адрес манифеста кэша документа. Примечание. Этот атрибут устарел, используйте <link rel="manifest"> вместо него. |
| HTML атрибут: max (макс) | <input>, <meter>, <progress> | Указывает максимально допустимое значение. |
| HTML атрибут: maxlength (максимальная длина) | <input>, <textarea> | Определяет максимальное количество символов, разрешенное в элементе. |
| HTML атрибут: minlength (минимальная длина) | <input>, <textarea> | Определяет минимальное количество символов, разрешенное в элементе. |
| media | <a>, <area>:, <link>, <source>, <style> | Указывает подсказку о носителе, для которого был разработан связанный ресурс. |
| method | <form> | Определяет, какой метод HTTP использовать при отправке формы. Может быть GET(по умолчанию) или POST. |
| HTML атрибут: min (минимум) | <input>, <meter> | Указывает минимально допустимое значение. |
| multiple | <input>, <select> | Указывает, можно ли ввести несколько значений во входные данные типа emailили file. |
| muted | <audio>:, <video> | Указывает, будет ли звук изначально отключен при загрузке страницы. |
| name | <button>, <form>, <fieldset>, <iframe>, <input>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>: | Имя элемента. Например, используется сервером для идентификации полей при отправке формы. |
| novalidate | <form> | Этот атрибут указывает, что форма не должна проверяться при отправке. |
| open | <details>, <dialog> | Указывает, видимо ли в данный момент содержимое (в случае элемента <details>) или диалоговое окно активно и с ним можно взаимодействовать (в случае элемента <dialog>). |
| optimum | <meter> | Указывает оптимальное числовое значение. |
| pattern | <input> | Определяет регулярное выражение, по которому будет проверяться значение элемента. |
| ping | <a>,<area>: | Атрибут pingуказывает разделенный пробелами список URL-адресов, которые будут уведомлены, если пользователь перейдет по гиперссылке. |
| placeholder | <input>, <textarea> | Предоставляет пользователю подсказку о том, что можно ввести в поле. |
| playsinline | <video> | Логический атрибут, указывающий, что видео должно воспроизводиться «встроенно»; то есть в области воспроизведения элемента. Обратите внимание: отсутствие этого атрибута не означает, что видео всегда будет воспроизводиться в полноэкранном режиме. |
| poster | <video> | URL-адрес, указывающий фрейм плаката, который будет отображаться, пока пользователь не начнет играть или искать. |
| preload | <audio>:, <video> | Указывает, следует ли предварительно загружать весь ресурс, его части или ничего. |
| readonly | <input>, <textarea> | Указывает, можно ли редактировать элемент. |
| referrerpolicy | <a>, <area>:, <iframe>, <img>, <link>,<script> | Указывает, какой реферер отправляется при получении ресурса. |
| rel | <a>, <area>:, <link> | Указывает связь целевого объекта с объектом ссылки. |
| required | <input>, <select>, <textarea> | Указывает, является ли данный элемент обязательным для заполнения или нет. |
| reversed | <optgroup> | Указывает, должен ли список отображаться в порядке убывания, а не в порядке возрастания. |
| role | Глобальный атрибут | Определяет явную роль элемента для использования вспомогательными технологиями. |
| rows | <textarea> | Определяет количество строк в текстовой области. |
| rowspan | <td>,<th> | Определяет количество строк, которые должна охватывать ячейка таблицы. |
| sandbox | <iframe> | Запрещает документу, загруженному в iframe, использовать определенные функции (например, отправку форм или открытие новых окон). |
| scope | <th> | Определяет ячейки, thк которым относится тест заголовка (определенный в элементе). |
| scoped | <style> | |
| selected | <option> | Определяет значение, которое будет выбрано при загрузке страницы. |
| shape | <a>,<area>: | |
| size | <input>, <select> | Определяет ширину элемента (в пикселях). Если атрибут элемента typeравен textили, passwordто это количество символов. |
| sizes | <link>, <img>, <source> | |
| slot | Глобальный атрибут | Назначает элементу слот в теневом дереве теневого DOM. |
| span | <col>, <colgroup> | |
| spellcheck | Глобальный атрибут | Указывает, разрешена ли для элемента проверка орфографии. |
| src | <audio>:, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> | URL-адрес встраиваемого контента. |
| srcdoc | <iframe> | |
| srclang | <track> | |
| srcset | <img>,<source> | Один или несколько вариантов адаптивного изображения. |
| attributes | <optgroup> | Определяет первое число, если оно отлично от 1. |
| step | <input> | |
| style | Глобальный атрибут | Определяет стили CSS, которые будут переопределять ранее установленные стили. |
| summary | <table> | |
| tabindex | Глобальный атрибут | Переопределяет порядок табуляции браузера по умолчанию и следует указанному вместо него. |
| target | <a>, <area>:, <base>,<form> | Указывает, где открыть связанный документ (в случае элемента <a>) или где отобразить полученный ответ (в случае элемента <form>). |
| title | Глобальный атрибут | Текст, который будет отображаться во всплывающей подсказке при наведении курсора на элемент. |
| translate | Глобальный атрибут | Укажите , следует ли переводить значения атрибутов элемента и значения его дочерних узлов при локализации страницы или оставить их без изменений. |
| type | <button>, <input>, <embed>, <object>, <optgroup>, <script>, <source>, <style>, <menu>, <link> | Определяет тип элемента. |
| usemap | <img>, <input>, <object> | |
| value | <button>, <data>, <input>, <li>, <meter>, <option>, <progress>, <param>: | Определяет значение по умолчанию, которое будет отображаться в элементе при загрузке страницы. |
| width | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> | Для перечисленных здесь элементов это устанавливает ширину элемента. Примечание. Для всех других экземпляров, таких как <div>, это устаревший атрибут, и в этом случае widthвместо него следует использовать свойство CSS. |
| wrap | <textarea> | Указывает, следует ли переносить текст. |
Содержимое и атрибуты IDL
В HTML большинство атрибутов имеют две стороны: атрибут содержимого и атрибут IDL (язык определения интерфейса) .
Атрибут содержимого — это атрибут, установленный вами из содержимого (HTML-кода), и вы можете установить его или получить с помощью element. setAttribute() или element. getAttribute(). Атрибут содержимого всегда является строкой, даже если ожидаемое значение должно быть целым числом. Например, чтобы установить <input>для элемента maxlength значение 42 с помощью атрибута содержимого, вы должны вызвать setAttribute(«maxlength», «42») этот элемент.
Атрибут IDL также известен как свойство JavaScript. Это атрибуты, которые вы можете прочитать или установить с помощью свойств JavaScript, таких как element.foo. Атрибут IDL всегда будет использовать (но может преобразовывать) базовый атрибут контента, чтобы вернуть значение, когда вы его получите, и сохранит что-то в атрибуте контента, когда вы его установите. Другими словами, атрибуты IDL, по сути, отражают атрибуты контента.
В большинстве случаев атрибуты IDL возвращают свои значения в том виде, в котором они действительно используются. Например, по умолчанию typeдля <input>элементов используется «текст», поэтому, если вы установите input. type=«foobar», <input> элемент будет иметь тип текста (по внешнему виду и поведению), но значение атрибута содержимого «type» будет «foobar». Однако typeатрибут IDL вернет строку «текст».
Атрибуты IDL не всегда являются строками; например, input. maxlength число (длинное со знаком). При использовании атрибутов IDL вы читаете или устанавливаете значения желаемого типа, поэтому input. maxlength он всегда будет возвращать число, а когда вы устанавливаете input. maxlength, ему требуется число. Если вы передаете другой тип, он автоматически преобразуется в число, как указано стандартными правилами JavaScript для преобразования типов.
Атрибуты IDL могут отражать другие типы , такие как unsigned long, URL-адреса, логические значения и т. д. К сожалению, нет четких правил, и то, как атрибуты IDL ведут себя в сочетании с соответствующими атрибутами содержимого, зависит от атрибута. В большинстве случаев он будет следовать правилам, изложенным в спецификации , но иногда это не так. Спецификации HTML стараются сделать это как можно более удобным для разработчиков, но по разным причинам (в основном историческим) некоторые атрибуты ведут себя странно (select. size например, ), и вам следует прочитать спецификации, чтобы понять, как именно они ведут себя.
Логические атрибуты
Некоторые атрибуты контента (например required, readonly, disabled) называются логическими атрибутами . Если логический атрибут присутствует, его значение равно true , а если он отсутствует, его значение равно false .
HTML определяет ограничения на допустимые значения логических атрибутов: если атрибут присутствует, его значение должно быть либо пустой строкой (эквивалентно, атрибут может иметь неназначенное значение), либо значением, которое представляет собой соответствие ASCII без учета регистра для каноническое имя атрибута без начальных и конечных пробелов. Следующие примеры являются допустимыми способами разметки логического атрибута:
- HTML
<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» не допускаются в логических атрибутах. Чтобы представить ложное значение, атрибут должен быть полностью опущен. Это ограничение проясняет некоторые распространенные недоразумения: например checked=«false», атрибут элемента checked будет интерпретироваться как истинный , поскольку атрибут присутствует.
Атрибуты обработчика событий
Предупреждение. Использование атрибутов содержимого обработчика событий не рекомендуется. Сочетание HTML и JavaScript часто приводит к созданию неподдерживаемого кода, а выполнение атрибутов обработчика событий также может быть заблокировано политиками безопасности контента.
В дополнение к атрибутам, перечисленным в таблице выше, глобальные обработчики событий , такие как onclick, также могут быть указаны в качестве атрибутов содержимого для всех элементов.
Все атрибуты обработчика событий принимают строку. Строка будет использоваться для синтеза функции JavaScript , например function name(/*args*/) {body}, где name— имя атрибута, а body— значение атрибута. Обработчик получает те же параметры, что и его аналог обработчика событий JavaScript — большинство обработчиков получают только один eventпараметр, а onerrorполучают пять: event, source, lineno, colno, error. Это означает, что вы, как правило, можете использовать eventпеременную внутри атрибута.
Примечание
- Устаревший. Не для использования на новых web-сайтах.
- Экспериментальный. Возможно изменение в будущем.
- Нестандартный. Проверьте поддержку браузером.
Смотрите также HTML-элементы
Обсуждение