🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Когда пользователю нужно что-то ввести или выбрать на странице, скорее всего, вы будете использовать <input>. Тег <input> настраивается с помощью атрибута type.
text и password. Это, наверное, самые часто используемые типы полей ввода. Это простые текстовые поля. password отличается тем, что скрывает введенные символы.
<input type="text" name="username" placeholder="Юзернейм">
<input type="password" name="password" placeholder="Пароль">
radio и checkbox. С помощью radio пользователи выбирают один вариант из нескольких, а с помощью checkbox — ставят галочку, это может быть как одиночный выбор, так и множественный. Очень важно, чтобы у радиокнопок было одинаковое имя (name), чтобы группировать их.
<input type="radio" name="animal" value="cat"> Кошка
<input type="radio" name="animal" value="dog"> Собака
<input type="checkbox" name="subscribe"> Подписаться на новости
submit — кнопка для отправки формы. Обычно ставится в конце формы. Хотя на практике часто используют <button type="submit">, так как кнопку проще стилизовать.
<input type="submit" value="Отправить">
Если пользователю нужно загрузить файл, используйте тип <file>. Но помните про безопасность и валидацию загружаемых файлов на сервере!
<input type="file" name="userphoto">
Тип <hidden> используется, когда вы хотите передать какие-то скрытые данные, которые не должны отображаться пользователю. Такое поле не видно на странице.
<input type="hidden" name="userid" value="12345">
number, date, range полезны, когда нужно предоставить пользователю возможность ввода числа, даты или выбора значения из диапазона. Но будь осторожен: браузеры могут отображать их по-разному, и не всегда это выглядит хорошо без дополнительной стилизации.
Есть и другие типы, такие как tel, email, url, но на практике они используются реже. Их основная идея — обеспечить ввод для конкретных данных.
Важные атрибуты
С помощью атрибута name сервер определяет, какие именно данные пришли.
placeholder полезен для коротких подсказок. Но это не замена для <label>. Всегда используйте подписи у полей ввода!
Если поле обязательно для заполнения, добавьте атрибут required.
Атрибут value устанавливает начальное значение поля.