61. Универсальный тег в HTML форме - тег INPUT
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
В предыдущем уроке познакомились с тегом <button>
. В этом уроке разберемся с самым полезным тегом формы.
Для чего нужен тег <input>
?
Самый распространенный тег в формах. Он очень универсальный. При помощи его можно создавать различные текстовые поля, кнопки, переключатели и таким образом обеспечить взаимодействие с пользователем.
Тег <input>
необязательно помещать внутрь тега <form>
, но если вам нужно отправить данные на сервер, то придется разместить в форме.
Рассмотрим самый главный атрибут – type
. У него есть масса значений, и именно они определяют стиль универсального тега <input>
.
Основные значения тега type
Рассмотрим таблицу:
Значение атрибута type | Внешний вид элемента |
---|---|
text | Текстовое поле |
password | Поле с паролем |
radio | Переключатель |
checkbox | Флажок |
hidden | Скрытое поле |
button | Кнопка |
submit | Кнопка для отправки формы |
reset | Кнопка для очистки формы |
file | Поле для отправки файла |
image | Кнопка с изображением |
Пример текстового поля:
<input type = "text">
Для доступа необходимо авторизоваться на сайте Codebra.
Пример поля с паролем:
<input type = "password">
Для доступа необходимо авторизоваться на сайте Codebra.
Пример переключателя:
<input type = "radio">
Для доступа необходимо авторизоваться на сайте Codebra.
Пример флажка:
<input type = "radio">
Для доступа необходимо авторизоваться на сайте Codebra.
Пример кнопки:
<input type = "button" value = "Кнопка">
Для доступа необходимо авторизоваться на сайте Codebra.
Пример поля для отправки файла на сервер:
<input type = "file">
Для доступа необходимо авторизоваться на сайте Codebra.
Далее рассмотрим значения, которые были добавлены в HTML5.
Дополнительные значения тега type
(появились в HTML5)
Значение атрибута type | Внешний вид элемента |
---|---|
color | Виджет для выбора цвета |
date | Поле для выбора календарной даты |
datetime | Указание даты и времени |
datetime-local | Указание местной даты и времени |
email | Для адресов электронной почты |
number | Ввод чисел |
range | Ползунок для выбора чисел в указанном диапазоне |
search | Поле для поиска |
tel | Для телефонных номеров |
time | Для времени |
url | Для веб-адресов |
month | Выбор месяца |
week | Выбор недели |
Пример виджета для выбора цвета:
<input type = "color">
Для доступа необходимо авторизоваться на сайте Codebra.
Пример виджета для выбора даты:
<input type = "date">
Для доступа необходимо авторизоваться на сайте Codebra.
Пример поля для указания местной даты и времени:
<input type = "datetime-local">
Для доступа необходимо авторизоваться на сайте Codebra.
Пример поля для ввода чисел:
<input type = "number">
Для доступа необходимо авторизоваться на сайте Codebra.
Пример ползунка для выбора чисел в указанном диапазоне:
<input type = "range" min = "0" max = "100" value = "90" step = "10">
Для доступа необходимо авторизоваться на сайте Codebra.
Пример поля для телефонных номеров:
<input type = "tel" pattern = "+7 [0-9]{3} [0-9]{3}-[0-9]{4}">
Другие примеры предлагаю запустить и посмотреть результат вам самостоятельно.
Атрибуты тега <input>
Атрибут | Значение |
---|---|
accept | Устанавливает фильтр на типы отправляемых файлов |
accesskey | Переход к элементу при помощи комбинации клавиш |
alt | Альтернативный текст для элемента с изображением |
autocomplete | Включение и выключение автозаполнения |
autofocus | После загрузки страницы, фокус на этом элементе |
border | Толщина рамки вокруг изображения |
checked | Заранее нажатый флажок или переключатель |
disabled | Запрещает доступ и изменение элемента |
form | Связь поле с формой по ее уникальному имени |
formaction | Указывается адрес обработчика |
list | Список вариантов, которые можно выбирать во время ввода текста |
max | Максимальное значение для ввода числа и даты |
maxlength | Максимальная длина текста для ввода |
min | Минимальное значение для ввода числа и даты |
multiple | Разрешение на загрузку нескольких файлов |
name | Имя для идентификации обработчиком |
pattern | Установка шаблона ввода |
placeholder | Подсказка по заполнению |
readonly | Поле не может изменяться |
required | Поле должно быть обязательно заполнено |
size | Ширина текстового поля |
src | Адрес на изображение |
step | Шаг увеличения числового поля |
tabindex | Порядок перехода при нажатии на TAB |
type | Сообщает браузеру тип элемента |
value | Начальное значение элемента |
Примеры использования атрибутов тега <input>
Пример использования атрибута list
в теге <input>
:
<input type = "text" list = "list">
<datalist id = "list">
<option>Урок 1</option>
<option>Урок 2</option>
<option>Урок 3</option>
</datalist>
Для доступа необходимо авторизоваться на сайте Codebra.
Пример подсказки по заполнению:
<input type = "text" placeholder = "Введите логин">
Для доступа необходимо авторизоваться на сайте Codebra.
Заключение
В этом уроке подробно изучили значения атрибута type
и познакомились с атрибутами тега <input>
. Добавляйте этот урок в закладки, чтобы периодически к нему возвращаться. В следующем уроке познакомимся с многострочным полем для текста в HTML.
Похожие уроки Codebra
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
- Из элемента
<input>
с id = 1 сделайте поле для поиска - Из элемента
<input>
с id = 2 сделайте переключатель - Из элемента
<input>
с id = 3 сделайте выбор недели - Из элемента
<input>
с id = 4 сделайте текстовое поле - Из элемента
<input>
с id = 5 сделайте поле для отправки файла - Из элемента
<input>
с id = 6 сделайте кнопку для отправки формы - Из элемента
<input>
с id = 7 сделайте скрытое поле - Из элемента
<input>
с id = 8 сделайте поле для выбора календарной даты - Из элемента
<input>
с id = 9 сделайте поле для времени - Из элемента
<input>
с id = 10 сделайте поле для веб-адресов - Из элемента
<input>
с id = 11 сделайте флажок - Из элемента
<input>
с id = 12 сделайте поле с паролем - Из элемента
<input>
с id = 13 сделайте поле для указание местной даты и времени - Из элемента
<input>
с id = 14 сделайте поле для указание адресов электронной почты - Из элемента
<input>
с id = 15 сделайте ползунок для выбора чисел в указанном диапазоне
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.
Это займет не больше минуты.