HTML Типы входных данных
В этой главе описываются различные типы входных данных для элемента <input>.
Текст типа ввода
<input type="text"> определяет одно строчное текстовое поле ввода:
Пример
<form>
Имя:<br>
<input type="text" name="firstname"><br>
Фамилия:<br>
<input type="text" name="lastname">
</form>
Таким образом, HTML-код выше будет отображаться в браузере:
Имя:Фамилия:
Пароль типа ввода
<input type="password"> Определяет поле пароля:
Пример
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>
Таким образом, HTML-код выше будет отображаться в браузере:
Имя пользователя:Пароль пользователя:
Символы в поле пароля замаскированы (отображаются как звездочки или круги).
Тип ввода отправить
<input type="submit"> Определяет кнопку для
Отправка данных формы в обработчик форм.
Обработчик форм обычно является серверной страницей со сценарием для обработки входных данных.
Обработчик формы указан в атрибуте action формы:
Пример
<form action="/action_page.php">
First name:<br>
<input type="text"
name="firstname" value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit"
value="Submit">
</form>
Таким образом, HTML-код выше будет отображаться в браузере:
Если опустить атрибут value кнопки Submit, кнопка получит текст по умолчанию:
Пример
<form action="/action_page.php">
First name:<br>
<input type="text"
name="firstname" value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit">
</form>
Сброс типа ввода
<input type="reset"> Определяет кнопку сброса , которая сбрасывает все значения формы в значения по умолчанию:
Пример
<form action="/action_page.php">
First name:<br>
<input type="text"
name="firstname" value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit"
value="Submit">
<input type="reset">
</form>
Таким образом, HTML-код выше будет отображаться в браузере:
При изменении входных значений и нажатии кнопки "Сброс" данные формы будут сброшены на значения по умолчанию.
Тип входного сигнала радио
<input type="radio"> Определяет переключатель.
Переключатели позволяют пользователю выбрать только одно из ограниченного числа вариантов:
Пример
<form>
<input type="radio" name="gender" value="male"
checked> Male<br>
<input
type="radio" name="gender" value="female"> Female<br>
<input
type="radio" name="gender" value="other"> Other
</form>
Таким образом, HTML-код выше будет отображаться в браузере:
MaleFemale
Other
Флажок "тип ввода"
<input type="checkbox"> Определяет CheckBox.
Флажки позволяют пользователю выбрать ноль или более вариантов ограниченного числа вариантов.
Пример
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
Таким образом, HTML-код выше будет отображаться в браузере:
I have a bikeI have a car
Кнопка ввода типа
<input type="button"> Определяет кнопку:
Пример
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Таким образом, HTML-код выше будет отображаться в браузере:
Типы входных данных HTML5
HTML5 добавил несколько новых типов ввода:
- color
- date
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Новые типы ввода, которые не поддерживаются старыми веб-обозревателями, будут вести себя как <input type="text"> .
Цвет входного типа
<input type="color"> используется для полей ввода, которые должны содержать цвет.
В зависимости от поддержки обозревателя в поле ввода может отображаться палитра цветов.
Пример
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>
Тип ввода Дата
<input type="date"> используется для полей ввода, которые должны содержать дату.
В зависимости от поддержки обозревателя в поле ввода может отображаться выбор даты.
Пример
<form>
Birthday:
<input type="date" name="bday">
</form>
Можно также использовать атрибуты min и max для добавления ограничений дат:
Пример
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>
Входной тип DateTime-локальный
<input type="datetime-local"> задает поле ввода даты и времени без часового пояса.
В зависимости от поддержки обозревателя в поле ввода может отображаться выбор даты.
Пример
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>
Тип ввода электронной почты
<input type="email"> используется для полей ввода, которые должны содержать адрес электронной почты.
В зависимости от поддержки браузера, адрес электронной почты может быть автоматически проверен при отправке.
Некоторые смартфоны распознавать тип электронной почты и добавляет ". com" на клавиатуре для сопоставления ввода электронной почты.
Пример
<form>
E-mail:
<input type="email" name="email">
</form>
Тип входного месяца
<input type="month"> позволяет пользователю выбрать месяц и год.
В зависимости от поддержки обозревателя в поле ввода может отображаться выбор даты.
Пример
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
Тип входного номера
<input type="number"> определяет
Числовое поле ввода.
Вы также можете установить ограничения на то, какие номера принимаются.
В следующем примере отображается числовое поле ввода, в котором можно ввести значение от 1 до 5:
Пример
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
Ограничения ввода
Ниже приведен список некоторых распространенных ограничений ввода (некоторые из них являются новыми в HTML5):
| Атрибут | Описание |
|---|---|
| disabled | Указывает, что поле ввода должно быть отключено |
| max | Задает максимальное значение для поля ввода |
| maxlength | Указывает максимальное число символов для поля ввода |
| min | Задает минимальное значение для поля ввода |
| pattern | Задает регулярное выражение для проверки входного значения на |
| readonly | Указывает, что поле ввода предназначено только для чтения (не может быть изменено) |
| required | Указывает, что поле ввода является обязательным (должно быть заполнено) |
| size | Задает ширину (в символах) поля ввода |
| step | Задает юридические интервалы номеров для поля ввода |
| value | Задает значение по умолчанию для поля ввода |
Подробнее об ограничениях ввода вы узнаете в следующей главе.
В следующем примере отображается числовое поле ввода, в котором можно ввести значение от 0 до 100 в шагах 10. Значение по умолчанию равно 30:
Пример
<form>
Quantity:
<input type="number" name="points"
min="0" max="100" step="10" value="30">
</form>
Диапазон входного типа
<input type="range"> определяет элемент управления для ввода числа, точное значение которого не имеет значения (например, элемент управления Slider). Диапазон по умолчанию — от 0 до 100. Однако можно установить ограничения на то, какие номера принимаются с атрибутами min, max и step:
Пример
<form>
<input type="range" name="points" min="0" max="10">
</form>
Поиск типа ввода
<input type="search"> используется для полей поиска (поле поиска работает как обычное текстовое поле).
Пример
<form>
Search Google:
<input type="search" name="googlesearch">
</form>
Тип ввода тел
<input type="tel"> используется для полей ввода, которые должны содержать телефонный номер.
Примечание: Тип Tel в настоящее время поддерживается только в Safari 8.
Пример
<form>
Telephone:
<input type="tel" name="usrtel">
</form>
Время ввода типа
<input type="time"> позволяет пользователю выбрать время (без часового пояса).
В зависимости от поддержки обозревателя в поле ввода может отображаться средство выбора времени.
Пример
<form>
Select a time:
<input type="time" name="usr_time">
</form>
URL-адрес типа ввода
<input type="url"> используется для полей ввода, которые должны содержать URL-адрес.
В зависимости от поддержки браузера, поле URL может быть автоматически проверено при отправке.
Некоторые смартфоны распознают тип URL-адреса и добавляют ". com" к клавиатуре для сопоставления ввода URL-адреса.
Пример
<form>
Add your homepage:
<input type="url" name="homepage">
</form>
Тип ввода неделя
<input type="week"> позволяет пользователю выбрать неделю и год.
В зависимости от поддержки обозревателя в поле ввода может отображаться выбор даты.
Пример
<form>
nbsp;
Select a week:
<input type="week" name="week_year">
</form>
Атрибут типа ввода HTML
| Тег | Описание |
|---|---|
| <input type=""> | Указывает тип ввода для отображения |