Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

61. Универсальный тег в HTML форме - тег INPUT

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

В предыдущем уроке познакомились с тегом <button>. В этом уроке разберемся с самым полезным тегом формы.

Для чего нужен тег <input>?

Самый распространенный тег в формах. Он очень универсальный. При помощи его можно создавать различные текстовые поля, кнопки, переключатели и таким образом обеспечить взаимодействие с пользователем.

Тег <input> необязательно помещать внутрь тега <form>, но если вам нужно отправить данные на сервер, то придется разместить в форме.

Рассмотрим самый главный атрибут – type. У него есть масса значений, и именно они определяют стиль универсального тега <input>.

Основные значения тега type

Рассмотрим таблицу:

Значение атрибута type Внешний вид элемента
text Текстовое поле
password Поле с паролем
radio Переключатель
checkbox Флажок
hidden Скрытое поле
button Кнопка
submit Кнопка для отправки формы
reset Кнопка для очистки формы
file Поле для отправки файла
image Кнопка с изображением

Пример текстового поля:

Пример (html)
<input type = "text"> 

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

Пример поля с паролем:

Пример (html)
<input type = "password"> 

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

Пример переключателя:

Пример (html)
<input type = "radio"> 

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

Пример флажка:

Пример (html)
<input type = "radio"> 

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

Пример кнопки:

Пример (html)
<input type = "button" value = "Кнопка"> 

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

Пример поля для отправки файла на сервер:

Пример (html)
<input type = "file"> 

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

Далее рассмотрим значения, которые были добавлены в HTML5.

Дополнительные значения тега type (появились в HTML5)

Значение атрибута type Внешний вид элемента
color Виджет для выбора цвета
date Поле для выбора календарной даты
datetime Указание даты и времени
datetime-local Указание местной даты и времени
email Для адресов электронной почты
number Ввод чисел
range Ползунок для выбора чисел в указанном диапазоне
search Поле для поиска
tel Для телефонных номеров
time Для времени
url Для веб-адресов
month Выбор месяца
week Выбор недели

Пример виджета для выбора цвета:

Пример (html)
<input type = "color"> 

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

Пример виджета для выбора даты:

Пример (html)
<input type = "date"> 

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

Пример поля для указания местной даты и времени:

Пример (html)
<input type = "datetime-local"> 

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

Пример поля для ввода чисел:

Пример (html)
<input type = "number"> 

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

Пример ползунка для выбора чисел в указанном диапазоне:

Пример (html)
<input type = "range" min = "0" max = "100" value = "90" step = "10"> 

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

Пример поля для телефонных номеров:

Пример (html)
<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>:

Пример (html)
<input type = "text" list = "list">
<datalist id = "list">
    <option>Урок 1</option>
    <option>Урок 2</option>
    <option>Урок 3</option>
</datalist> 

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

Пример подсказки по заполнению:

Пример (html)
<input type = "text" placeholder = "Введите логин"> 

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

Заключение

В этом уроке подробно изучили значения атрибута type и познакомились с атрибутами тега <input>. Добавляйте этот урок в закладки, чтобы периодически к нему возвращаться. В следующем уроке познакомимся с многострочным полем для текста в HTML.

Похожие уроки Codebra

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
Что такое HTML-формаФормы в HTML
Введение в курс по PHPКурс по PHP
Кнопки в HTML - тег BUTTONФормы в HTML
Метки в HTML формах - LABELФормы в HTML
Раскрывающийся список на HTML - тег SELECTФормы в HTML
Группировка элементов в HTML-формах (FIELDSET, LEGEND)Формы в HTML
Заголовок (тег CAPTION) HTML-таблицТаблицы в HTML
Тег TD в HTML таблицахТаблицы в HTML
Тег TR в HTML таблицахТаблицы в HTML
Раздел «Формы в HTML»
58. УРОК: 1. Что такое HTML-форма
59. УРОК: 2. Как создать форму в HTML и ее атрибуты
60. УРОК: 3. Кнопки в HTML - тег BUTTON
УРОК 61. 4. Универсальный тег в HTML форме - тег INPUT
Вы здесь
62. УРОК: 5. Многострочное поле для текста – TEXTAREA
63. УРОК: 6. Метки в HTML формах - LABEL
64. УРОК: 7. Раскрывающийся список на HTML - тег SELECT
65. УРОК: 8. Для чего нужен тег KEYGEN
66. УРОК: 9. Группировка элементов в HTML-формах (FIELDSET, LEGEND)
67. УРОК: 10. Группировка элементов списка в HTML (OPTGROUP)
68. ТЕСТ: 11. Тест по разделу «Формы в HTML»
Другие разделы
Раздел 1. Знакомство с HTML
Раздел 2. Разметка текста в HTML
Раздел 3. Ссылки в HTML
Раздел 4. Изображения в HTML
Раздел 5. Таблицы в HTML
Раздел 7. HTML5
Раздел 8. Остальное
Раздел 9. Знакомство с CSS
Раздел 10. Селекторы в CSS
Раздел 11. Структура и каскад
Раздел 12. Единицы измерения
Раздел 13. Шрифт
Раздел 14. Свойства текста
Раздел 15. Форматирование
Раздел 16. Отступы, рамки, поля
Раздел 17. Цвета и фон
Раздел 18. Позиционирование
Раздел 19. Верстка таблиц
Раздел 20. Списки
Раздел 21. Анимация
Раздел 22. Знакомство с Flexbox
Раздел 23. Практика с htmlbook.ru
Раздел 24. Элементы сайта
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию и компьютерной безопасности. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Пентесту Active Directory, Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно