Атрибут src тега <input>
Описание
Атрибут src указывает URL изображения, которое будет использоваться в качестве графической кнопки отправки формы. Применяется только для <input type="image">.
<form action="/submit" method="post">
<input type="text" name="search" placeholder="Поиск...">
<input type="image" src="search-button.png" alt="Найти">
</form>
Особенности работы:
| Атрибут | Обязательность | Описание |
|---|---|---|
src |
Обязательный | Путь к изображению кнопки |
alt |
Обязательный | Альтернативный текст для доступности |
width/height |
Необязательный | Размеры изображения в пикселях |
Пример с указанием размеров:
<form action="/order">
<!-- Другие поля формы -->
<input type="image" src="order-button.jpg" alt="Оформить заказ"
width="200" height="50">
</form>
Рекомендации:
- Всегда указывайте атрибут
altдля доступности - Оптимизируйте изображения для веба (формат JPEG, PNG или WebP)
- Используйте CSS для hover-эффектов вместо замены изображения
- Для адаптивного дизайна задавайте размеры через CSS
- Проверяйте отображение на разных устройствах
Пример с CSS-стилизацией:
<style>
.custom-image-btn {
width: 150px;
height: auto;
border: none;
transition: opacity 0.3s;
}
.custom-image-btn:hover {
opacity: 0.8;
cursor: pointer;
}
</style>
<form action="/subscribe">
<input type="email" name="email" placeholder="Ваш email">
<input type="image" src="subscribe-btn.png" alt="Подписаться"
class="custom-image-btn">
</form>
Особенности отправки данных:
- При нажатии отправляет координаты клика (x, y)
- Передает имя элемента (атрибут name) с суффиксами .x и .y
- Работает как submit-кнопка, отправляя всю форму
Пример обработки координат:
<form action="/clickmap">
<input type="image" src="map.png" alt="Выберите область"
name="map" width="400" height="300">
</form>
<!-- На сервере будут доступны параметры: map.x и map.y -->
Ограничения:
- Не поддерживает SVG в IE8 и ниже
- Изображение должно быть доступно по указанному URL
- Для сложных интерактивных кнопок лучше использовать
<button> - Менее гибкий, чем CSS-стилизованные кнопки
Примечание: Хотя элемент <input type="image"> с атрибутом src всё ещё поддерживается, в современной веб-разработке для графических кнопок чаще используют <button> с CSS-стилизацией или <input type="submit"> с фоновым изображением, что обеспечивает лучшую гибкость и доступность.