Атрибут src тега <input> — зображення кнопки
Атрибут src (HTML тега <input>) задає URL-адресу зображення, яке використовується в якості кнопки відправки.
Використовується тільки з елементами управління, які визначають графічну кнопку "відправити форму" (<input type = "image">).
Атрибут src є обов'язковим атрибутом.
Загальний опис
автор: NagarD
- Нотатка
-
Атрибут
автор: с3сsrcможе бути використаний тільки з<input type="image">.
Синтаксис
<input src="URL">Атрибут src може отримувати єдине значення:
-
URL -
Визначає URL-адресу зображення, яке використовується в якості кнопки відправки. Допускається використання як абсолютних, так і відносних адрес.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | ≤12.1 | 12 | 5.5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
<form>
<p><b>Використання атрибута scr</b></p>
<input id="image" type="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' 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="Зима" width = "150" height = "150"/>
</form>Кнопка input type="image" і сучасна заміна — button з картинкою всередині
HTML
<div class="poruch">
<form class="karta">
<h3><code><input type="image"></code></h3>
<input type="image" name="go" width="120" height="40" alt="Знайти"
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Crect width='120' height='40' rx='4' fill='%230172ad'/%3E%3Ctext x='60' y='26' fill='%23fff' text-anchor='middle' font-family='sans-serif' font-size='15'%3E%D0%97%D0%BD%D0%B0%D0%B9%D1%82%D0%B8%3C/text%3E%3C/svg%3E">
<p><small>Відправить <code>go.x</code> і <code>go.y</code> — координати кліку, а не <code>go=…</code>. Наведення нічого не змінює.</small></p>
</form>
<form class="karta">
<h3><code><button type="submit"></code></h3>
<button type="submit" name="go" value="poshuk">
<img width="16" height="16" alt=""
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M11 11 L15 15' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E">
Знайти
</button>
<p><small>Відправить <code>go=poshuk</code>, читається читалкою й має нормальні стани — наведіть мишею.</small></p>
</form>
</div>CSS
.poruch {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.karta {
flex: 1 1 260px;
border: 1px solid #d0d0d0;
border-radius: 6px;
padding: 10px 14px;
}
.karta h3 {
margin: 0 0 10px;
font-size: 15px;
}
.karta small {
color: #6b6b6b;
}
button {
display: inline-flex;
align-items: center;
gap: 6px;
font: inherit;
padding: 8px 14px;
border: 0;
border-radius: 4px;
background: #0172ad;
color: #fff;
cursor: pointer;
}
button:hover {
background: #015b8a;
}
button:focus-visible {
outline: 3px solid #ffbf47;
}Коментарі
Коментарів ще немає — будьте першим!