Последние учебники веб-разработки
×

HTML5 Руководство

HTML ГЛАВНАЯ HTML Введение HTML редакторы HTML базовый HTML элементы HTML Атрибуты HTML Заголовки HTML Пункты HTML Стили HTML форматирование HTML цитаты HTML Компьютерный код HTML Комментарии HTML Цвета HTML CSS HTML связи HTML Изображений HTML таблицы HTML Списки HTML Блок и строковые элементы HTML Классы HTML раскладка HTML отзывчивый HTML Iframes HTML JavaScript HTML Глава HTML юридические лица HTML Символы HTML Charset HTML URL шифровать HTML XHTML

HTML формы

HTML формы HTML Форма Элементы HTML Типы входных данных HTML Входные атрибуты

HTML5

HTML5 вступление HTML5 Поддержка HTML5 элементы HTML5 Семантика Миграция HTML5 HTML5 Гид по стилю

HTML Графика

HTML холст HTML SVG

HTML СМИ

HTML СМИ HTML видео HTML аудио HTML Плагины HTML YouTube

HTML APIs

HTML Geolocation HTML Перетаскивания HTML Локальное хранилище HTML App кэш HTML Web Workers HTML SSE

HTML Примеры

HTML Примеры HTML викторина HTML5 викторина HTML Резюме

HTML Рекомендации

HTML Список тегов HTML Атрибуты HTML События HTML холст HTML Аудио Видео HTML DOCTYPEs HTML Цвета HTML Наборы символов HTML URL шифровать HTML Языковые коды HTTP Сообщения HTTP методы PX to EM конвертер Горячие клавиши

HTML Типы входных данных


Типы входных данных

В этой главе описаны типы входных данных на <input> элемента.


Тип входа: текст

<input type="text"> определяет поле ввода одной строки для ввода текста:

пример

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<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 код выше будет отображаться в браузере:

Имя пользователя:

Пользовательский пароль:

Символы в поле пароля замаскированы (shown as asterisks or circles) в (shown as asterisks or circles) .


Тип входа: отправить

<input type="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" value="Submit">
</form>
Попробуй сам "

Это как HTML код выше будет отображаться в браузере:

Имя:

Фамилия:



Если опустить значение атрибута кнопки отправки, кнопка получит текст по умолчанию:

пример

<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>
Попробуй сам "

Тип входа: radio

<input type="radio"> определяет radio кнопку.

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 код выше будет отображаться в браузере:

мужчина
женский
Другие


Тип входа: checkbox

<input type="checkbox"> определяет checkbox .

Checkboxes позволяют пользователю выбрать ноль или более вариантов ограниченного числа вариантов.

пример

<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 код выше будет отображаться в браузере:

у меня есть байк
у меня есть машина


Тип входа: button

<input type="button"> определяет button :

пример

<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Попробуй сам "

Это как HTML код выше будет отображаться в браузере:


HTML5 Input типы

HTML5 добавил несколько новых input типов:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Input типы, которые не поддерживаются старыми браузерами, будет вести себя как input типа текста.


Input Тип: number

<input type="number"> используется для полей ввода , которые должны содержать числовое значение.

Вы можете установить ограничения на числа.

В зависимости от типа браузера, ограничения могут применяться к полю ввода.

OperaSafariChromeFirefoxInternet Explorer

пример

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>
Попробуй сам "

Input ограничения

Вот список некоторых общих input ограничений (some are new in HTML5) :

Атрибут Описание
disabled Указывает, что поле ввода должно быть отключено
max Задает максимальное значение для поля ввода
>maxlength Задает максимальное количество символов для поля ввода
min Определяет минимальное значение для поля ввода
pattern Задает регулярное выражение для проверки значения ввода против
readonly Указывает , что поле ввода только для чтения (cannot be changed)
required Указывает , что требуется поле ввода (must be filled out)
size Определяет ширину (in characters) поля ввода
step Определяют интервалы юридических номерных для поля ввода
value Задает значение по умолчанию для поля ввода

Вы узнаете больше о input ограничениях в следующей главе.

OperaSafariChromeFirefoxInternet Explorer

пример

<form>
  Quantity:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>
Попробуй сам "

Input Тип: date

<input type="date"> используется для полей ввода , которые должны содержать дату.

В зависимости от типа браузера, выбор даты может отображаться в поле ввода.

OperaSafariChromeFirefoxInternet Explorer

пример

<form>
  Birthday:
  <input type="date" name="bday">
</form>
Попробуй сам "

Вы можете добавить ограничения на input :

OperaSafariChromeFirefoxInternet Explorer

пример

<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>
Попробуй сам "

Input Тип: Цвет

<input type="color"> используется для полей ввода , которые должны содержать цвет.

В зависимости от поддержки браузера, выбор цвета может отображаться в поле ввода.

OperaSafariChromeFirefoxInternet Explorer

пример

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>
Попробуй сам "

Input Тип: Диапазон

<input type="range"> используется для полей ввода , которые должны содержать значение в пределах диапазона.

В зависимости от поддержки браузера, поле ввода может отображаться в качестве контроля ползунка.

OperaSafariChromeFirefoxInternet Explorer

пример

<form>
  <input type="range" name="points" min="0" max="10">
</form>
Попробуй сам "

Вы можете использовать following атрибуты для указания ограничений: мин, макс, шаг, значение.


Input данные Тип: month

<input type="month"> позволяет пользователю выбрать месяц и год.

В зависимости от типа браузера, выбор даты может отображаться в поле ввода.

OperaSafariChromeFirefoxInternet Explorer

пример

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>
Попробуй сам "

Input Тип: week

<input type="week"> позволяет пользователю выбрать неделю и год.

В зависимости от типа браузера, выбор даты может отображаться в поле ввода.

OperaSafariChromeFirefoxInternet Explorer

пример

<form>
  Select a week:
  <input type="week" name="week_year">
</form>
Попробуй сам "

Input Тип: time

<input type="time"> позволяет пользователю выбрать время (no time zone) .

В зависимости от типа браузера, время выбор может отображаться в поле ввода.

OperaSafariChromeFirefoxInternet Explorer

пример

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>
Попробуй сам "

Input Тип: datetime и datetime

<input type="datetime"> позволяет пользователю выбрать дату и время (with time zone) .

OperaSafariChromeFirefoxInternet Explorer

пример

<form>
  Birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>
Попробуй сам "
Заметка Тип ввода даты и времени удаляется из стандарта HTML. Используйте вместо даты и времени локального.

Тип входа: Дата и время-местная

<input type="datetime-local"> позволяет пользователю выбрать дату и время (no time zone) .

В зависимости от типа браузера, выбор даты может отображаться в поле ввода.

OperaSafariChromeFirefoxInternet Explorer

пример

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>
Попробуй сам "

Тип входа: электронная почта

<input type="email"> используется для полей ввода , которые должны содержать адрес электронной почты.

В зависимости от поддержки браузера, адрес электронной почты может быть автоматически подтверждено при представлении.

Некоторые смартфоны распознавать тип электронной почты, и добавляют ".com" на клавиатуру , чтобы соответствовать вводу электронной почты.

OperaSafariChromeFirefoxInternet Explorer

пример

<form>
  E-mail:
  <input type="email" name="email">
</form>
Попробуй сам "

Тип входа: поиск

<input type="search"> используется для поиска полей (a search field behaves like a regular text field) .

OperaSafariChromeFirefoxInternet Explorer

пример

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>
Попробуй сам "

Тип входа: тела

<input type="tel"> используется для полей ввода , которые должны содержать номер телефона.

Тип тел в настоящее время поддерживается только в Safari 8.

OperaSafariChromeFirefoxInternet Explorer

пример

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>
Попробуй сам "

Тип входа: URL

<input type="url"> используется для полей ввода , которые должны содержать адрес URL.

В зависимости от типа браузера, поле URL может быть автоматически проверяется при представлении.

Некоторые смартфоны распознают тип URL - адрес, и добавляют ".com" на клавиатуру , чтобы соответствовать URL - адрес ввода.

OperaSafariChromeFirefoxInternet Explorer

пример

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>
Попробуй сам "


Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »