input¶
Поле ввода информации
disabled¶
Отключает элемент формы
Данные элемента не уйдут с запросом
<input type="time" disabled />
form¶
Идентификатор формы, на которую ссылается элемент
<form id="form1"></form>
<input type="text" form="form1" />
maxlength¶
Максимальная длина значения элемента
Применяется для text, password, url, search, telephone, email
min, max¶
Диапазон допустимых значений для дат, number и range.
<input type="time" min="17:00" max="22:00" />
pattern¶
Регулярка для валидации
<input
type="color"
pattern="#[0-9A-Fa-f]{6}"
placeholder="#ffffff"
title="color" />
<input
type="text"
pattern="[0-9]{13,16}"
title="13 или 16 цифр кредитки"
placeholder="номер карты" />
required¶
Помечает поле как обязательное
Не используется для buttons, range, color, hidden
<input type="email" required />
type¶
Тип поля
button - кнопка, ничего не делает, используется для навешивания различных обработчиков
<input type="button" value="кнопка" />
checkbox - флажок
<input type="checkbox" name="remember" value="true" />
colour - поле выбора цвета
<input name="clr" type="color" placeholder="#0 00000" pattern="#[0-9A-Fa-f]{6}" required />
date - поле ввода даты
<input name="date" type="date" placeholder="YYYY-MM-DD" min="1900-01-01" required />
datetime - поле ввода даты со временем в системе utc
<input name="datetime" type="datetime" placeholder="YYYY-MM-DD" min="2010-01-01T00:00Z" max="2011-12-31T23:59Z" required />
datetime-local - поле ввода даты со временем
email - поле ввода электронной почты
Доступные атрибуты
autocomplete
autofocus
disabled
form
list
maxlength
multiple - несколько значений через запятые
name
pattern
placeholder
readonly
required
size
<input type="email" name="email" />
file - поле для закачки файла
Доступные атрибуты:
accept - список допустимых файлов
autofocus
capture
disabled
multiple
name
required
<input type="file" name="image" accept="image/*" capture /> <input type="file" name="video" accept="video/*" capture /> <input type="file" name="audio" accept="audio/*" capture />
hidden - скрытое поле
<input type="hidden" name="user_id" value="1" />
image -
month - поле ввода месяца с годом
<input name="month" type="month" placeholder="YYYY-MM" min="2010-01" max="2020-01" step="6" required />
number - поле ввода числовых данных
<input type="number" min="0" step="5"> <input type="number" p laceholder="100 to 999" pattern="[1-9][0-9]{2}" min="100" max="999" required />
password - пароль
<input type="password" name="password" id="password" />
radio - переключатель
<input type="radio" name="color" value="red" /> <input type="radio" name="color" value="green" />
range - ползунок
reset - кнопка сброса
<input type="reset" value="Очистить эту форму" />
search - поле поиска
submit - кнопка отправки
<input type="submit" value="Отправить эту форму" />
tel - используется для ввода телефонного номера.
<input type="tel" placeholder="XXX-XXX-XXXX" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required />
text - обычное текстовое поле
autocomplete
autofocus
disabled
form
list - идентификатор на список возможных значений, datalist
maxlength
name
pattern
placeholder
readonly
required
size
<input type="text" name="username" id="username" />
time - поле ввода времени
<input type="time" min="09:00" max="17:00" name="time" step="900" placeholder="12:00" required />
url - поле ввода веб адреса
<input type="url" pattern="^(http|https|ftp)\://[a-zA-Z0-9\-\.]+\.[a-zA-Z]*" placeholder="http://www.domain.com" required />
week - поле ввода номера недели
<input type="week" name="week" min="2010-W01" max="2020-W02" required />
value¶
Значение поля
examples¶
<!-- использование с выпадающим списком -->
<input list="data-list-id" />
<datalist id="data-list-id">
<option value="1 элемент выпадающего списка" />
<option value="2 элемент выпадающего списка" />
<option value="3 элемент выпадающего списка" />
</datalist>