Пример
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>
Нет.