Урок с практикой по 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 Начальное значение элемента
<
×
>
Курс «Формы»
Урок 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.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.