Довідка атрибутів HTML
{{HTMLSidebar("Attributes")}}
Елементи в 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> |
Задає feature-policy для вбудованого фрейму. |
alt
|
<area>,
<img>, <input>
|
Альтернативний текст на випадок того, що зображення не може бути показане. |
as
|
<link>
|
Задає тип вмісту, який завантажується зв'язком. |
async
|
<script> |
Виконує сценарій асинхронно. |
autocapitalize
|
Глобальний атрибут | Задає те, чи додаються автоматично великі літери до введення користувача |
autocomplete
|
<form>, <input>,
<select>,
<textarea>
|
Позначає те, чи контрольні елементи в формі повинні усталено автоматично доповнюватися браузером. |
autoplay
|
<audio>,
<video>
|
Аудіо чи відео повинно відтворюватися якомога скоріше. |
background |
<body>, <table>,
<td>, <th>
|
Задає URL файлу зображення.
Примітка: Попри те, що браузери та клієнти електронної пошти досі можуть підтримувати цей атрибут, він є застарілим. Замість нього слід використовувати CSS |
bgcolor |
<body>, <col>,
<colgroup>,
<marquee>,
<table>,
<tbody>,
<tfoot>, <td>,
<th>, <tr>
|
Колір фону елемента.
Примітка: Це історичний атрибут. Замість нього слід використовувати властивість CSS |
border |
<img>, <object>,
<table>
|
Ширина межі.
Примітка: Це історичний атрибут. Будь ласка, використовуйте замість нього властивість CSS |
capture
|
<input> |
Атрибут зі специфікації Медіазахоплення, що задає, що можна захопити новий файл. |
charset
|
<meta>
|
Оголошує кодування символів сторінки або сценарію. |
checked
|
<input>
|
Позначає, чи повинен елемент мати позначку при завантаженні сторінки. |
cite
|
<blockquote>,
<del>, <ins>,
<q>
|
Містить URI, який вказує на джерело цитати чи зміни. |
class
|
Глобальний атрибут | Нерідко застосовується вкупі з CSS для оформлення елементів загальними властивостями. |
color |
<font>, <hr>
|
Цей атрибут задає колір тексту за допомогою або назви кольору, або кольору, заданого в шістнадцятковому форматі #RRGGBB.
Примітка: Це історичний атрибут. Будь ласка, використовуйте замість нього властивість CSS |
cols
|
<textarea> |
Визначає число колонок у текстовій області. |
colspan
|
<td>, <th>
|
Атрибут колонкової протяжності визначає число колонок, які повинна охоплювати комірка. |
content
|
<meta> |
Значення, пов'язане з http-equiv або name, в залежності від контексту.
|
contenteditable
|
Глобальний атрибут | Позначає те, чи доступний вміст елемента для редагування. |
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> |
Позначає те, що сценарій повинен бути виконаний після того, як сторінка буде розібрана. |
dir
|
Глобальний атрибут | Визначає напрям тексту. Дозволені значення: ltr (зліва направо) й rtl (справа наліво). |
dirname
|
<input>,
<textarea>
|
|
disabled
|
<button>,
<fieldset>,
<input>,
<optgroup>,
<option>,
<select>,
<textarea>
|
Позначає те, чи може користувач взаємодіяти з елементом. |
download
|
<a>, <area> |
Позначає те, що гіперпосилання призначене для завантаження ресурсу. |
draggable
|
Глобальний атрибут | Визначає те, чи може елемент бути перетягнутий. |
enctype
|
<form> |
Визначає тип вмісту даних форми, коли method має значення POST.
|
enterkeyhint
|
<textarea>,
contenteditable
|
enterkeyhint задає те, який підпис дії (або піктограма) повинен бути показаний для клавіші введення на віртуальних клавіатурах. Цей атрибут може бути використаний на формових елементах (наприклад, як значення елементів textarea), або на елементах в режимі редагування (наприклад, з використанням атрибута contenteditable).
|
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 |
hidden
|
Глобальний атрибут | Запобігає візуалізації елемента, при цьому залишаючи дочірні елементи, наприклад, елементи сценаріїв, активними. |
high
|
<meter> |
Позначає нижню межу верхнього діапазону. |
href
|
<a>, <area>,
<base>, <link>
|
URL зв'язаного ресурсу. |
hreflang
|
<a>, <link>
|
Задає мову зв'язаного ресурсу. |
http-equiv
|
<meta> |
Визначає директиву pragma. |
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 маніфесту кешу документа.
Примітка: Цей атрибут застарів, замість нього слід використовувати |
max
|
<input>,
<meter>,
<progress>
|
Позначає максимальне дозволене значення. |
maxlength
|
<input>,
<textarea>
|
Визначає максимальне число символів, дозволене в елементі. |
minlength
|
<input>,
<textarea>
|
Визначає мінімальну кількість символів, дозволену в елементі. |
media
|
<a>, <area>,
<link>, <source>,
<style>
|
Задає підказку щодо засобу візуалізації, для якого створений зв'язаний ресурс. |
method
|
<form> |
Визначає те, який метод HTTP повинен використовуватися при поданні форми. Може бути GET (усталено) або POST.
|
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
|
<ol> |
Позначає те, чи повинен список відображатися у зворотному порядку, а не у звичайному. |
role
|
Глобальний атрибут | Визначає явну роль елемента для використання допоміжними технологіями. |
rows
|
<textarea> |
Визначає число рядків у текстовій області. |
rowspan
|
<td>, <th>
|
Визначає число рядків, які повинна охоплювати комірка таблиці. |
sandbox
|
<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>
|
Одне чи більше зображень-кандидатів. |
start
|
<ol> |
Визначає номер першого пункту, якщо це не 1. |
step
|
<input> |
|
style
|
Глобальний атрибут | Визначає стилі CSS, які відкидають раніше задані стилі. |
summary
|
<table> |
|
tabindex
|
Глобальний атрибут | Відкидає усталений порядок табулювання браузера і використовує замість нього заданий. |
target
|
<a>, <area>,
<base>, <form>
|
Задає те, де відкривати пов'язаний документ (у випадку елемента <a>) або де відображати отриману відповідь (у випадку елемента <form>).
|
title
|
Глобальний атрибут | Текст для виведення в спливній підказці при наведенні на елемент курсора. |
translate
|
Глобальний атрибут |
Задає те, чи повинні перекладатися значення атрибутів елемента та значення його дочірніх вузлів Text при локалізації сторінки, чи залишатися незмінними.
|
type
|
<button>,
<input>,
<embed>,
<object>,
<ol>,
<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>
|
Для елементів, перерахованих тут, це встановлює їх ширину. |
wrap
|
<textarea> |
Позначає те, чи може текст переноситися на новий рядок. |
Атрибути вмісту та атрибути IDL
У HTML більшість атрибутів має дві сторони: атрибут вмісту та атрибут IDL (мови визначення інтерфейсу).
Атрибут вмісту – це атрибут, заданий зі вмісту (коду HTML), і його можна задати чи отримати за допомогою element.setAttribute() або element.getAttribute(). Атрибут вмісту завжди є рядком, навіть якщо очікуване значення повинно бути цілим числом. Наприклад, щоб задати атрибут maxlength елемента <input> значенням 42 за допомогою атрибута вмісту, необхідно викликати setAttribute("maxlength", "42") на відповідному елементі.
Атрибут IDL також відомий як властивість JavaScript. Це атрибути, які можна зчитати чи задати за допомогою властивостей JavaScript виду element.foo. Атрибут IDL завжди буде використовувати (але може перетворювати) базовий атрибут вмісту для повернення значення при його отриманні, і зберігатиме щось в атрибуті вмісту при своєму заданні. Іншими словами, атрибути IDL, по суті, відображають атрибути вмісту.
У більшості випадків атрибути IDL повертають свої значення в такому вигляді, в якому вони фактично використовують. Наприклад, усталений type елементів <input> – це "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>Це дійсний HTML, але недійсний XML.</div>
<div itemscope=itemscope>Це також дійсний HTML, але недійсний XML.</div>
<div itemscope="">Це дійсний HTML, а також дійсний XML.</div>
<div itemscope="itemscope">
Це також дійсний HTML і XML, але, можливо, трохи задовгий.
</div>
Для ясності слід додати, що значення "true" та "false" не дозволені для булевих атрибутів. Щоб представити значення false, атрибут повинен бути взагалі відсутнім. Це обмеження роз'яснює деякі поширені непорозуміння: наприклад, з checked="false" атрибут checked елемента буде розтлумачено як true, оскільки атрибут присутній.
Атрибути обробників подій
Застереження: Використання атрибутів обробників подій не рекомендується. Суміш HTML та JavaScript нерідко призводить до непідтримуваного коду, а виконання атрибутів обробників подій також може бути заблоковано політиками безпеки вмісту.
На додачу до атрибутів, перелічених у таблиці вище, на всіх елементах також можуть бути задані глобальні обробники подій, такі як onclick, як атрибути вмісту.
Усі атрибути обробників подій приймають рядок. Цей рядок використовується для синтезування функції JavaScript у вигляді function name(/*args*/) {body}, де name – це назва атрибута, а body – його значення. Обробник отримує ті ж параметри, що і його JavaScript-аналог – більшість обробників отримують лише один параметр event, тоді як onerror отримує п'ять: event, source, lineno, colno, error. Це означає, що ви можете, загалом, використовувати змінну event всередині атрибута.
<div onclick="console.log(event)">Клацни мене!</div>
<!-- Синтезований обробник має назву; можна посилатися за нею -->
<div onclick="console.log(onclick)">Клацни мене!</div>