Атрибуты input в HTML
Типы input выбрали лицо через type. Атрибуты input уточняют поведение на том же теге: подсказки, обязательность, диапазоны, длина, шаблоны, блокировки. Каталог повседневных помощников — не вторая карта type и не трюк form= дальше.
Почему атрибуты важны
Верный type всё ещё оставляет дыры: пустые обязательные поля, возраст вне диапазона, длинные коды. Атрибуты дают лёгкие проверки браузера. В реальных приложениях проверяйте и на сервере.
Прямой ответ
1) Держите name, id, value. 2) placeholder — короткая подсказка, не замена label. 3) required для обязательных. 4) min/max/step для числа/даты; maxlength для текста; иногда pattern. 5) readonly виден и обычно отправляется; disabled блокирует и обычно не отправляется. 6) Атрибуты уточняют type — не заменяют его; отдельно от form=.
📊 Handy input attributes
| Attribute | Role | Beginner tip |
|---|---|---|
| placeholder | Hint text in an empty field | Not a label — always keep a real label |
| required | Must be filled before submit | Browser may block empty submit |
| min / max / step | Limits for number/date-like types | Match the type you already chose |
| maxlength | Max characters for text-like types | Soft cap in the UI; still check on the server |
| pattern | Allowed character pattern | Keep patterns simple for beginners |
| disabled | Not usable; usually not submitted | Do not disable fields you still need to send |
| readonly | Visible, not editable; still submitted | Good for fixed display values |
Профиль: обязательность, подсказки, длина
Маленькая форма: имя required с placeholder, логин с maxlength/pattern, город по желанию.
<form action="/profile" method="post">
<label for="fullname">Full name</label>
<input id="fullname" name="fullname" type="text"
placeholder="Ada Lovelace" required>
<label for="user">Username</label>
<input id="user" name="user" type="text"
maxlength="12" pattern="[A-Za-z0-9_]+"
placeholder="ada_lovelace" required>
<label for="city">City</label>
<input id="city" name="city" type="text"
placeholder="Optional">
<button type="submit">Save</button>
</form>
Читаем демо профиля
- required на имени и логине
- placeholder только пока пусто — имя из label
- maxlength=12
- pattern буквы/цифры/_
- город без required
- type=text уже выбран; атрибуты уточняют
Бронь: диапазоны и блокировки
Число и дата обретают смысл с min/max/step. Код readonly виден и обычно уходит; promo disabled обычно нет.
<form action="/book" method="post">
<label for="guests">Guests</label>
<input id="guests" name="guests" type="number"
min="1" max="8" step="1" value="2" required>
<label for="night">Night</label>
<input id="night" name="night" type="date"
min="2026-10-01" max="2026-12-31" required>
<label for="code">Booking code</label>
<input id="code" name="code" type="text"
value="BK-1042" readonly>
<label for="promo">Promo (staff only)</label>
<input id="promo" name="promo" type="text"
value="STAFF" disabled>
<button type="submit">Book</button>
</form>
Читаем демо брони
- min/max/step для гостей и ночи
- value=2 стартовое значение
- readonly сохраняет код и обычно шлёт
- disabled блокирует правку и часто отправку
- лимиты даты с type=date
- дальше: связь через form=id
Выбор помощников
- Обязательно: required
- Подсказка пустого: placeholder (+ label)
- Границы числа/даты: min max step
- Потолок символов: maxlength
- Простой формат: pattern
- Видно, не править, отправить: readonly
- Блокировать, часто не слать: disabled
- Связка: name id value
- type здесь не выбирать заново
Практика — ужесточить поля атрибутами
- Профиль; снимите required и верните
- Уберите placeholder; оставьте label
- maxlength до 20
- Гости вне min/max
- Переключите readonly у кода
- Сравните отправку кода и promo
- Фраза: атрибуты уточняют; type выбрал лицо
Частые ошибки
- placeholder вместо label
- disable поля, которое нужно отправить
- только проверки браузера
- min/max на типах, что их игнорируют
- слишком сложный pattern
- путаница с каталогом type
- рано прыгать к form=
Итог
- Атрибуты уточняют после type
- Повседневное: required, placeholder, диапазоны, maxlength, pattern
- readonly обычно отправляется; disabled нет
- placeholder подсказывает; label именует
- Держите name/id/value
- Далее: form-атрибуты input
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху