Атрибут height тега <input>
Описание
Атрибут height для элемента <input> задаёт высоту элемента в пикселях. Применяется только для <input type="image"> и определяет высоту изображения-кнопки.
<form action="/search">
<input type="text" name="query" placeholder="Поиск...">
<!-- Кнопка-изображение с указанием высоты -->
<input type="image" src="search-button.png" alt="Найти" height="40">
</form>
Особенности работы:
| Атрибут | Применение | Влияние |
|---|---|---|
height |
Только для type="image" | Задаёт высоту изображения в пикселях |
width |
Только для type="image" | Задаёт ширину изображения (часто используется вместе с height) |
Пример с адаптивным изображением:
<form action="/upload">
<!-- Кнопка с сохранением пропорций -->
<input type="image" src="upload-btn.png" alt="Загрузить"
height="50" style="object-fit: contain;">
</form>
Рекомендации:
- Всегда указывайте атрибут
altдля доступности - Для адаптивного дизайна лучше использовать CSS (max-height, width: auto)
- Сохраняйте пропорции оригинального изображения
- Оптимизируйте изображения для веба перед использованием
Пример с CSS-стилизацией:
<style>
.custom-btn {
height: 60px;
width: auto;
transition: transform 0.2s;
}
.custom-btn:hover {
transform: scale(1.05);
}
</style>
<form action="/order">
<input type="image" src="order-now.png" alt="Заказать"
class="custom-btn" height="60">
</form>
Важно:
- Атрибут не работает для других типов input (текст, checkbox и т.д.)
- Для изменения высоты других элементов используйте CSS
- При указании только height или width изображение может исказиться
- В современных версиях HTML рекомендуется использовать CSS вместо этих атрибутов
Примечание: Хотя атрибут height всё ещё поддерживается, в современной веб-разработке предпочтительнее использовать CSS-свойства для управления размерами элементов, так как они предоставляют больше гибкости и возможностей адаптации под разные устройства.