HTML Тег <input>
HTML форма с тремя полями ввода; два текстовых поля и одна кнопка отправки:
<form action="/action_page.php">
<label for="fname">Имя:</label>
<input type="text"
id="fname" name="fname"><br><br>
<label for="lname">Фамилия:</label>
<input type="text"
id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
Попробуйте сами »Определение и использование <input>
Тег <input>
указывает поле ввода, в которое пользователь может вводить данные.
Тег <input>
- это самый важный элемент формы.
Тег <input>
может быть отображен несколькими способами, в зависимости от типа атрибута.
Различные типы входных данных следующие:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
(значение по умолчанию)<input type="time">
<input type="url">
<input type="week">
Посмотрите на атрибут type для просмотра примеров для каждого типа входных данных!
Совет: Всегда используйте тег <label> определения меток для
<input type="text">
,
<input type="checkbox">
,
<input type="radio">
,
<input type="file">
,
и <input type="password">
.
Поддержка браузеров <input>
Элемент | |||||
---|---|---|---|---|---|
<input> | Да | Да | Да | Да | Да |
Атрибуты <input>
Атрибут | Значение | Описание |
---|---|---|
accept | file_extension audio/* video/* image/* media_type |
Задает фильтр для типов файлов, которые пользователь может выбрать в диалоговом окне ввода файла (только для type="file") |
alt | text | Задает альтернативный текст для изображений (только для type="image") |
autocomplete | on off |
Указывает, должен ли элемент <input> иметь функцию автозаполнения |
autofocus | autofocus | Указывает, что элемент <input> должен автоматически получать Фокус при загрузке страницы |
checked | checked | Указывает, что элемент <input> должен быть предварительно выбран при загрузке страницы (для type="checkbox" или type="radio") |
dirname | inputname.dir | Указывает, что текстовое направление будет отправлено |
disabled | disabled | Указывает, что элемент <input> должен быть отключен |
form | form_id | Указывает форму, к которой принадлежит элемент <input> |
formaction | URL | Указывает URL файла, который будет обрабатывать входной элемент управления при отправке формы (для type="submit" и type="image") |
formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
Указывает, как данные формы должны быть закодированы при отправке их на сервер (для type="submit" и type="image") |
formmethod | get post |
Определяет метод HTTP для отправки данных на URL действия (для type="submit" и type="image") |
formnovalidate | formnovalidate | Определяет, что элементы формы не должны проверяться при отправке |
formtarget | _blank _self _parent _top framename |
Указывает, где будет отображаться ответ, полученный после отправки формы (для type="submit" и type="image") |
height | pixels | Задает высоту элемента <input> (только для type="image") |
list | datalist_id | Относится к элементу <datalist>, содержащий предварительно определенные параметры для элемента <input> |
max | number date |
Задает максимальное значение для элемента <input> |
maxlength | number | Задает максимальное количество символов, разрешенных в элементе <input> |
min | number date |
Задает минимальное значение для элемента <input> |
minlength | number | Задает минимальное количество символов, требуемых в элементе <input> |
multiple | multiple | Указывает, что пользователь может ввести более одного значения в элемент <input> |
name | text | Задает имя элемента <input> |
pattern | regexp | Указывает регулярное выражение, по которому проверяется значение элемента <input> |
placeholder | text | Задает короткую подсказку, описывающую ожидаемое значение элемента <input> |
readonly | readonly | Указывает, что поле ввода доступно только для чтения |
required | required | Указывает, что перед отправкой формы необходимо заполнить поле ввода |
size | number | Задает ширину элемента <input> в символах |
src | URL | Указывает URL изображения, которое будет использоваться в качестве кнопки отправки (только для type="image") |
step |
number any |
Задает интервал между юридическими числами в поле ввода |
type | button checkbox color date datetime-local file hidden image month number password radio range reset search submit tel text time url week |
Указывает тип элемента <input> для отображения |
value | text | Задает значение элемента <input> |
width | pixels | Задает ширину элемента <input> (только для type="image") |
Глобальные атрибуты <input>
Тег <input>
также поддерживает Глобальные атрибуты в HTML.
События атрибутов <input>
Тег <input>
также поддерживает События атрибутов в HTML.
Связные страницы <input>
HTML учебник:
HTML DOM справочник:
- Объект Input Button
- Объект Input Checkbox
- Объект Input Color
- Объект Input Date
- Объект Input Datetime
- Объект Input DatetimeLocal
- Объект Input Email
- Объект Input FileUpload
- Объект Input Hidden
- Объект Input Image
- Объект Input Month
- Объект Input Number
- Объект Input Password
- Объект Input Range
- Объект Input Radio
- Объект Input Reset
- Объект Input Search
- Объект Input Submit
- Объект Input Text
- Объект Input Time
- Объект Input URL
- Объект Input Week
Настройки CSS по умолчанию <input>
Нет.