Урок с практикой по HTML (Онлайн курсы)
Выбрать другой урок из курса
Теория урока

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

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

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

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

Первая часть. HTML
text Текстовое поле
password Поле с паролем
radio Переключатель
checkbox Флажок
hidden Скрытое поле
button Кнопка
submit Кнопка для отправки формы
reset Кнопка для очистки формы
file Поле для отправки файла
image Кнопка с изображением
Вторая часть. HTML5 (новые)
color Виджет для выбора цвета
date Поле для выбора календарной даты
datetime Указание даты и времени
datetime-local Указание местной даты и времени
email Для адресов электронной почты
number Ввод чисел
range Ползунок для выбора чисел в указанном диапазоне
search Поле для поиска
tel Для телефонных номеров
time Для времени
url Для веб-адресов
month Выбор месяца
week Выбор недели

А теперь рассмотрим все атрибуты тега <input>

Атрибуты <input> - краткая информация (таблица составлена на материалах htmlbook.ru)
accept Устанавливает фильтр на типы отправляемых файлов
accesskey Переход к элементу при помощи комбинации клавиш
alt Альтернативный текст для элемента с изображением
autocomplete Включение и выключение автозаполнения
autofocus После загрузки страницы, фокус на этом элементе
border Толщина рамки вокруг изображения
checked Заранее нажатый флажок или переключатель
disabled Запрещает доступ и изменение элемента
form Связь поле с формой по ее уникальному имени
formaction Указывается адрес обработчика
list Список вариантов, которые можно выбирать во время ввода текста
Код HTML
<input type = "text" list = "list">
<datalist id = "list">
<option>Урок 1</option>
<option>Урок 2</option>
<option>Урок 3</option>
</datalist>
max Максимальное значение для ввода числа и даты
maxlength Максимальная длина текста для ввода
min Минимальное значение для ввода числа и даты
multiple Разрешение на загрузку нескольких файлов
name Имя для идентификации обработчиком
pattern Установка шаблона ввода
placeholder Подсказка по заполнению
readonly Поле не может изменяться
required Поле должно быть обязательно заполнено
size Ширина текстового поля
src Адрес на изображение
step Шаг увеличения числового поля
tabindex Порядок перехода при нажатии на TAB
type Сообщает браузеру тип элемента
value Начальное значение элемента
<
×
>
Внимание! Впервые на этом сайте?

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Вы можете начать изучение прямо сейчас, кликнув на ссылки: HTML, CSS, JavaScript, C++, PHP, jQuery, Python, Bootstrap 3

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

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

Закрыть окно