Типы входных данных
В этой главе описаны типы входных данных на <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 :
Это как HTML код выше будет отображаться в браузере:
HTML5 Input типы
HTML5 добавил несколько новых input типов:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Input типы, которые не поддерживаются старыми браузерами, будет вести себя как input типа текста.
Input Тип: number
<input type="number"> используется для полей ввода , которые должны содержать числовое значение.
Вы можете установить ограничения на числа.
В зависимости от типа браузера, ограничения могут применяться к полю ввода.
пример
<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 ограничениях в следующей главе.
пример
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form> Попробуй сам " Input Тип: date
<input type="date"> используется для полей ввода , которые должны содержать дату.
В зависимости от типа браузера, выбор даты может отображаться в поле ввода.
Вы можете добавить ограничения на input :
пример
<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"> используется для полей ввода , которые должны содержать цвет.
В зависимости от поддержки браузера, выбор цвета может отображаться в поле ввода.
пример
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form> Попробуй сам " Input Тип: Диапазон
<input type="range"> используется для полей ввода , которые должны содержать значение в пределах диапазона.
В зависимости от поддержки браузера, поле ввода может отображаться в качестве контроля ползунка.
Вы можете использовать following атрибуты для указания ограничений: мин, макс, шаг, значение.
Input данные Тип: month
<input type="month"> позволяет пользователю выбрать месяц и год.
В зависимости от типа браузера, выбор даты может отображаться в поле ввода.
пример
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form> Попробуй сам " Input Тип: week
<input type="week"> позволяет пользователю выбрать неделю и год.
В зависимости от типа браузера, выбор даты может отображаться в поле ввода.
Input Тип: time
<input type="time"> позволяет пользователю выбрать время (no time zone) .
В зависимости от типа браузера, время выбор может отображаться в поле ввода.
Input Тип: datetime и datetime
<input type="datetime"> позволяет пользователю выбрать дату и время (with time zone) .
пример
<form>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</form> Попробуй сам "  | Тип ввода даты и времени удаляется из стандарта HTML. Используйте вместо даты и времени локального. |
|---|
Тип входа: Дата и время-местная
<input type="datetime-local"> позволяет пользователю выбрать дату и время (no time zone) .
В зависимости от типа браузера, выбор даты может отображаться в поле ввода.
пример
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form> Попробуй сам " Тип входа: электронная почта
<input type="email"> используется для полей ввода , которые должны содержать адрес электронной почты.
В зависимости от поддержки браузера, адрес электронной почты может быть автоматически подтверждено при представлении.
Некоторые смартфоны распознавать тип электронной почты, и добавляют ".com" на клавиатуру , чтобы соответствовать вводу электронной почты.
Тип входа: поиск
<input type="search"> используется для поиска полей (a search field behaves like a regular text field) .
Тип входа: тела
<input type="tel"> используется для полей ввода , которые должны содержать номер телефона.
Тип тел в настоящее время поддерживается только в Safari 8.
Тип входа: URL
<input type="url"> используется для полей ввода , которые должны содержать адрес URL.
В зависимости от типа браузера, поле URL может быть автоматически проверяется при представлении.
Некоторые смартфоны распознают тип URL - адрес, и добавляют ".com" на клавиатуру , чтобы соответствовать URL - адрес ввода.
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »