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

Универсальный тег в 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 Начальное значение элемента
<
×
>
Раздел «Формы»
Урок 1.1. Что такое формы в HTML
Урок 2.1. Как создать форму в HTML и ее атрибуты
Урок 3.1. Кнопки в HTML - тег BUTTON
Урок 5.1. Многострочное поле для текста – TEXTAREA
Урок 6.1. Метки в HTML формах - LABEL
Урок 7.1. Раскрывающийся список на HTML - тег SELECT
Урок 8.1. Для чего нужен тег KEYGEN
Урок 9.1. Группировка элементов в HTML формах
Урок 10.1. Группировка элементов списка в HTML
Другие разделы
Раздел 1. Знакомство с HTML
Раздел 2. Разметка текста
Раздел 3. Ссылки
Раздел 4. Изображения
Раздел 5. Таблицы
Раздел 7. HTML5
Раздел 8. Остальное
Раздел 9. Знакомство с CSS
Раздел 10. Селекторы в CSS
Раздел 11. Структура и каскад
Раздел 12. Единицы измерения
Раздел 13. Шрифт
Раздел 14. Свойства текста
Раздел 15. Форматирование
Раздел 16. Отступы, рамки, поля
Раздел 17. Цвета и фон
Раздел 18. Позиционирование
Раздел 19. Верстка таблиц
Раздел 20. Списки
Раздел 21. Анимация
Раздел 22. Практика с htmlbook.ru
Раздел 23. Элементы сайта
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.