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

75. Универсальный тег в 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 Начальное значение элемента

Похожие уроки и записи блога

Первое знакомство с PythonЗнакомство с Python
Свойство background для работы с фономЦвета и фон
Написание модулей в PythonЗнакомство с Python
Работа с файлами в Python Знакомство с Python
Обработка исключений (try/except) в PythonЗнакомство с Python
Универсальные атрибуты в HTMLРазметка текста
Урок 3. Генерация SSH-ключа для работы с GitHubБлог
Раскрывающийся список на HTML - тег SELECTФормы
Типы данных в PythonЗнакомство с Python
<
×
>
Раздел «Формы»
71. УРОК: Что такое формы в HTML
72. УРОК: Как создать форму в HTML и ее атрибуты
73. ТЕСТ: Вводный тест по формам в HTML
74. УРОК: Кнопки в HTML - тег BUTTON
УРОК 75. Универсальный тег в HTML форме - тег INPUT
Вы здесь
76. УРОК: Многострочное поле для текста – TEXTAREA
77. УРОК: Метки в HTML формах - LABEL
78. УРОК: Раскрывающийся список на HTML - тег SELECT
79. УРОК: Для чего нужен тег KEYGEN
80. УРОК: Группировка элементов в HTML формах
81. УРОК: Группировка элементов списка в HTML
82. ТЕСТ: Заключительный тест по формам в 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. Элементы сайта
Раздел 24. Знакомство с Flexbox
Впервые на сайте Codebra?

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

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

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

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

Закрыть окно