Атрибут size тега <input>
Описание
Атрибут size задаёт видимую ширину текстового поля в символах. Влияет только на отображение, не ограничивая фактическое количество вводимых символов (для этого используйте maxlength).
<!-- Поле с указанной шириной -->
<label for="zipcode">Почтовый индекс:</label>
<input type="text" id="zipcode" name="zipcode" size="6" maxlength="6">
<!-- Поле для короткого ввода -->
<label for="age">Возраст:</label>
<input type="text" id="age" name="age" size="3" maxlength="2">
Поддерживаемые типы input:
| Тип | Применение | Рекомендации |
|---|---|---|
| text | Задаёт ширину текстового поля | Сочетайте с maxlength |
| password | Ширина поля для пароля | Не раскрывайте длину пароля |
| Ширина поля для email | Учитывайте среднюю длину email | |
| tel | Ширина для телефонного номера | Подбирайте под формат номера |
| search | Ширина поискового поля | Обычно делают шире |
| url | Ширина для веб-адреса | Учитывайте длину типичных URL |
Пример с адаптивным размером:
<style>
.adaptive-input {
width: auto;
min-width: 50px;
max-width: 300px;
}
</style>
<label for="dynamic-field">Адаптивное поле:</label>
<input type="text" id="dynamic-field" name="dynamic"
size="10" class="adaptive-input">
Рекомендации:
- Используйте
sizeкак ориентировочную ширину - Для точного контроля размеров предпочтительнее CSS
- Сочетайте с
maxlengthдля ограничения ввода - Учитывайте среднюю длину ожидаемых данных
- Тестируйте отображение в разных браузерах
Пример с CSS-стилизацией:
<style>
.custom-sized {
width: 150px;
padding: 8px;
font-size: 16px;
transition: width 0.3s;
}
.custom-sized:focus {
width: 250px;
}
</style>
<label for="search">Поиск:</label>
<input type="search" id="search" name="q"
size="15" class="custom-sized"
placeholder="Искать...">
Ограничения:
- Точная ширина зависит от шрифта и браузера
- В современных версиях HTML рекомендуется использовать CSS
- Не работает для типов checkbox, radio, file и других нетекстовых
- Не влияет на фактическое ограничение ввода
Пример с разными размерами полей:
<form action="/contact">
<label for="name">Имя:</label>
<input type="text" id="name" name="name" size="20"><br>
<label for="phone">Телефон:</label>
<input type="tel" id="phone" name="phone" size="12"><br>
<label for="zip">Индекс:</label>
<input type="text" id="zip" name="zip" size="6" maxlength="6">
</form>
Примечание: Хотя атрибут size всё ещё поддерживается, в современной веб-разработке для контроля размеров полей ввода рекомендуется использовать CSS-свойства (width, min-width, max-width), которые обеспечивают более точное и гибкое управление отображением.