пример
HTML форма с двумя различными типами входов; текст и представить:
<form action="demo_form.asp">
Username: <input type="text" name="usrname"><br>
<input type="submit" value="Submit">
</form>
Попробуй сам " Больше "Попробуйте сами" примеры ниже.
Определение и использование
type атрибута определяет тип <input> элемента для отображения.
По умолчанию используется тип: text .
Совет: Это не является обязательным атрибутом, но мы думаем , что вы всегда должны включить его.
Поддержка браузеров
| Атрибут | |||||
|---|---|---|---|---|---|
| type | да | да | да | да | да |
Примечание: type атрибута работает во всех основных браузерах. Тем не менее, не все различные типы входов работает во всех основных браузерах.
Посмотрите ниже , чтобы увидеть поддержку браузера для каждого типа входного сигнала.
Отличия между HTML 4.01 и HTML5
HTML5 имеет следующие новые типы входных данных: color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel - url color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel - color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel , и url - url .
Синтаксис
<input type="value">
значения атрибутов
| Стоимость | Описание |
|---|---|
| button | Определяет кнопку кликабельны (в основном используется с JavaScript для активации скрипта) |
| checkbox | Определяет флажок |
| color | Определяет цветовую палитру |
| date | Определяет элемент управления даты (год, месяц и день (нет времени)) |
| datetime | Тип ввода даты и времени был удален из стандарта HTML. Вместо этого используйте DateTime локальное. |
| datetime-local | Определяет дату и время контроля (год, месяц, день, час, минута, секунда, и доли секунды (без часового пояса) |
| Определяет поле для электронной почты | |
| file | Определяет поле файла-выберите и кнопку "Обзор ..." (для загрузки файлов) |
| hidden | Определяет скрытое поле ввода |
| image | Определяет изображение как кнопку отправки |
| month | Определяет месяц и год контроль (без часового пояса) |
| number | Определяет поле для ввода номера |
| password | Определяет поле пароля (символы маскируются) |
| radio | Определяет кнопку радио |
| range | Определяет элемент управления для ввода номера точное значение которого не имеет значения (например, элемент управления слайдер) |
| reset | Определяет кнопку сброса (сбрасывает все значения формы значения по умолчанию) |
| search | Определяет текстовое поле для ввода строки поиска |
| submit | Определяет кнопку отправки |
| tel | Определяет поле для ввода телефонного номера |
| text | По умолчанию. Определяет текстовое поле из одной строки (ширина по умолчанию составляет 20 символов) |
| time | Определяет элемент управления для ввода времени (без часового пояса) |
| url | Определяет поле для ввода URL |
| week | Определяет в неделю и год контроль (без часового пояса) |
Примеры
Тип входа: button
пример
Интерактивными кнопка, которая активирует JavaScript при щелчке:
<input type="button" value="Click me" onclick="msg()">
Попробуй сам " Тип входа: checkbox
пример
Флажки позволяют пользователю выбрать один или несколько вариантов из ограниченного числа вариантов:
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
Попробуй сам " Тип входа: color
пример
Выберите цвет из палитры цветов:
Select your favorite color: <input type="color" name="favcolor"> Попробуй сам " Тип входа: date
пример
Определение элемента управления даты:
Birthday: <input type="date" name="bday"> Попробуй сам " Тип входа: datetime и datetime
пример
Определить элемент управления даты и времени (с часовым поясом):
Birthday (date and time): <input type="datetime" name="bdaytime"> Попробуй сам " Тип ввода даты и времени был удален из стандарта HTML. Вместо этого используйте DateTime локальное.
Тип входа: datetime-local
пример
Определить дату и контроль времени (без часового пояса):
Birthday (date and time): <input type="datetime-local" name="bdaytime"> Попробуй сам " Тип входа: email
пример
Определите поле для адреса электронной почты (будет автоматически подтверждено при представлении):
E-mail: <input type="email" name="usremail"> Попробуй сам " Совет: Safari на iPhone распознает тип электронной почты, а также изменение экранной клавиатуры , чтобы соответствовать его (добавляет @ и .com опции).
Тип ввода: file
пример
Определите поле файла-выберите и кнопку "Обзор ..." (для загрузки файлов):
Select a file: <input type="file" name="img">
Попробуй сам " Тип входа: hidden
пример
Определить скрытое поле (он не виден пользователю).
Скрытое поле часто сохраняет значение по умолчанию, или может быть его значение изменилось с помощью JavaScript:
<input type="hidden" name="country" value="Norway">
Попробуй сам " Тип входа: image
пример
Определить изображение как кнопку отправки:
<input type="image" src="img_submit.gif" alt="Submit">
Попробуй сам " Тип входа: month
пример
Определить месяц и год контроль (без часового пояса):
Birthday (month and year): <input type="month" name="bdaymonth"> Попробуй сам " Тип входа: number
пример
Определите поле для ввода номера (Вы можете также установить ограничения на какие номера принимаются):
Quantity (between 1 and 5): <input type="number" name="quantity" min="1"
max="5"> Попробуй сам " Используйте following атрибуты для указания ограничений:
- max - определяет максимальное допустимое значение
- min - определяет минимальное допустимое значение
- step - указывает интервалы номер юридического
- value - задает значение по умолчанию
Тип входа: password
пример
Определить поле пароля (символы маскируются)
<input type="password" name="pwd">
Попробуй сам " Тип входа: radio
пример
Радио кнопки позволяют пользователю выбрать только один из ограниченного числа вариантов:
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other">
Other
Попробуй сам " Тип входа: range
пример
Определить элемент управления для ввода номера точное значение которого не имеет значения (как ползунком). Вы можете также установить ограничения на то, что принимаются номера:
<input type="range" name="points" min="0" max="10"> Попробуй сам " Используйте following атрибуты для указания ограничений:
- max - определяет максимальное допустимое значение
- min - определяет минимальное допустимое значение
- step - указывает интервалы номер юридического
- value - задает значение по умолчанию
Тип входа: reset
пример
Определить кнопку сброса (сбрасывает все значения формы значения по умолчанию):
<input type="reset"> Попробуй сам " Совет: внимательно Используйте кнопку сброса!Это может раздражать пользователей, которые случайно активировать кнопку сброса.
Тип входа: search
пример
Определить поле поиска (например, поиск по сайту, или поиск Google):
Search Google: <input type="search" name="googlesearch"> Попробуй сам " Тип входа: submit
Тип входа: tel
пример
Определите поле для ввода телефонного номера:
Telephone: <input type="tel" name="usrtel"> Попробуй сам " Тип входа: text
пример
Определите два текстовых поля одной строки, которые пользователь может вводить текст в:
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
Попробуй сам " Тип входа: time
пример
Определить элемент управления для ввода времени (без часового пояса):
Select a time: <input type="time" name="usr_time"> Попробуй сам " Тип входа: url
пример
Определите поле для ввода URL:
Add your homepage: <input type="url" name="homepage"> Попробуй сам " Совет: Safari на iPhone распознает тип ввода URL - адреса, а также изменение экранной клавиатуры , чтобы соответствовать его (добавляет опции .com).
Тип входа: week
пример
Определение недели и года контроль (без часового пояса):
Select a week: <input type="week" name="week_year"> Попробуй сам "