Атрибут alt тега <input> — текст кнопки-картинки
Атрибут alt встановлює альтернативний текст для поля із зображенням <input type="image">.
Такий текст дозволяє отримати текстову інформацію про малюнок при відключеному в браузері завантаженні зображень чи, якщо користувач з якихось причин не може переглянути зображення (через повільне з'єднання, помилка в атрибуті src).
Також цей атрибут дозволяє пошуковим системам ідентифікувати та проіндексувати зображення.
автор: с3с
Загальний опис
автор: NagarD
- Нотатка
-
Атрибут
автор: с3сaltможе використовуватися тільки при<input type="image">.
Синтаксис
<input alt="text">Атрибут alt може отримувати єдине значення:
-
text -
Опис зображення
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | ≤12.1 | 12 | 5.5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
HTML
<div class="block1" >
<p>Приклад коли вдалось завантажити зображення</p>
<input src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='88' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Природа" type="image" align="left"/>
<div class = "text">
<p>Природа навесні – це особливий світ, який вражає своєю незвичайністю.<br>
За короткі три весняні місяці природа встигає пережити величезні метаморфози.<br>
</p>
</div>
</div>
<br>
<br>
<div class="block2">
<p>Приклад коли не вдалось завантажити зображення</p>
<input src="data:image/png;base64,ZЗЛАМАНО" alt="Природа" type="image" align="left"/>
<div class = "text">
<p>Природа навесні – це особливий світ, який вражає своєю незвичайністю.<br>
За короткі три весняні місяці природа<br> встигає пережити величезні метаморфози.<br>
</p>
</div>
</div>CSS
*{
text-align:center;
}
.block1 , .block2{
border:1px solid;
float:left;
}
img{
Width:25%;
}Робоча кнопка-зображення й дві зі зламаною картинкою: у першої зі зламаних є alt, і замість малюнка видно саме назву дії; у другої alt немає — браузер підставляє службове «Submit Query», а правило input[type="image"]:not([alt]) підсвічує таку кнопку червоним пунктиром.
HTML
<form>
<p>Робоча кнопка — картинка на місці, alt чекає свого часу:</p>
<input type="image" width="130" height="34" alt="Знайти на сайті"
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='34'%3E%3Crect width='130' height='34' rx='5' fill='%232f6fd0'/%3E%3Ctext x='65' y='22' font-family='sans-serif' font-size='14' fill='white' text-anchor='middle'%3EЗнайти%3C/text%3E%3C/svg%3E">
<p>Та сама кнопка зі зламаною адресою — видно текст alt, і це саме дія, а не опис малюнка:</p>
<input type="image" alt="Знайти на сайті" src="data:image/png;base64,QQ==">
<p>А тут alt забули — браузер підставив службове «Submit Query», і кнопку
підсвічує правило з CSS:</p>
<input type="image" src="data:image/png;base64,QQ==">
<p>На звичайному блоці alt не діє взагалі — браузер про нього просто забуває:</p>
<div class="box" alt="цей текст не побачить і не почує ніхто">блок з атрибутом alt</div>
</form>CSS
p {
margin: 16px 0 6px;
max-width: 520px;
}
input[type="image"] {
padding: 4px 8px;
border: 2px solid #b9c6d8;
border-radius: 5px;
background: #f6f9ff;
color: #1b4f9c;
font: 600 15px/1.4 system-ui, sans-serif;
}
input[type="image"]:not([alt]) {
outline: 3px dashed #d64545;
outline-offset: 2px;
}
.box {
width: 240px;
padding: 8px;
background: #eef3fb;
border: 1px solid #b9c6d8;
}Різниця між HTML 4.01 та HTML5
Немає
Коментарі
Коментарів ще немає — будьте першим!