Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.
- Из элемента
<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 сделайте ползунок для выбора чисел в указанном диапазоне
В предыдущем уроке познакомились с тегом <button>. В этом уроке разберемся с самым полезным тегом формы.
Для чего нужен тег <input>?
Самый распространенный тег в формах. Он очень универсальный. При помощи его можно создавать различные текстовые поля, кнопки, переключатели и таким образом обеспечить взаимодействие с пользователем.
Тег <input> необязательно помещать внутрь тега <form>, но если вам нужно отправить данные на сервер, то придется разместить в форме.
Рассмотрим самый главный атрибут – type. У него есть масса значений, и именно они определяют стиль универсального тега <input>.
Основные значения тега type
Рассмотрим таблицу:
Значение атрибута type |
Внешний вид элемента |
|---|---|
text |
Текстовое поле |
password |
Поле с паролем |
radio |
Переключатель |
checkbox |
Флажок |
hidden |
Скрытое поле |
button |
Кнопка |
submit |
Кнопка для отправки формы |
reset |
Кнопка для очистки формы |
file |
Поле для отправки файла |
image |
Кнопка с изображением |
Пример текстового поля:
<input type = "text">
Пример поля с паролем:
<input type = "password">
Пример переключателя:
<input type = "radio">
Пример флажка:
<input type = "radio">
Пример кнопки:
<input type = "button" value = "Кнопка">
Пример поля для отправки файла на сервер:
<input type = "file">
Далее рассмотрим значения, которые были добавлены в HTML5.
Дополнительные значения тега type (появились в HTML5)
Значение атрибута type |
Внешний вид элемента |
|---|---|
color |
Виджет для выбора цвета |
date |
Поле для выбора календарной даты |
datetime |
Указание даты и времени |
datetime-local |
Указание местной даты и времени |
email |
Для адресов электронной почты |
number |
Ввод чисел |
range |
Ползунок для выбора чисел в указанном диапазоне |
search |
Поле для поиска |
tel |
Для телефонных номеров |
time |
Для времени |
url |
Для веб-адресов |
month |
Выбор месяца |
week |
Выбор недели |
Пример виджета для выбора цвета:
<input type = "color">
Пример виджета для выбора даты:
<input type = "date">
Пример поля для указания местной даты и времени:
<input type = "datetime-local">
Пример поля для ввода чисел:
<input type = "number">
Пример ползунка для выбора чисел в указанном диапазоне:
<input type = "range" min = "0" max = "100" value = "90" step = "10">
Пример поля для телефонных номеров:
<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>
Пример подсказки по заполнению:
<input type = "text" placeholder = "Введите логин">
Заключение
В этом уроке подробно изучили значения атрибута type и познакомились с атрибутами тега <input>. Добавляйте этот урок в закладки, чтобы периодически к нему возвращаться. В следующем уроке познакомимся с многострочным полем для текста в HTML.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу HTML.
