Пример
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="Отправить">
</form>
Попробуйте сами »Определение и использование
Тег <input> определяет поле ввода, куда пользователь может ввести данные.
Элемент <input> является наиболее важным элементом формы.
Элемент <input> может отображаться несколькими способами в зависимости от атрибута type.
Различные типы ввода следующие:
<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> | Да | Да | Да | Да | Да |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| accept | расширение_файла audio/* video/* image/* тип_носителя |
Определяет фильтр для типов файлов, которые пользователь может выбрать в диалоговом окне выбора файла (только для type="file") |
| alt | текст | Определяет альтернативный текст для изображений (только для type="image") |
| autocomplete | on off |
Определяет, должен ли элемент <input> иметь включенное автозаполнение |
| autofocus | autofocus | Определяет, что элемент <input> должен автоматически получать фокус при загрузке страницы |
| checked | checked | Определяет, что элемент <input> должен быть предварительно выбран при загрузке страницы (для type="checkbox" или type="radio") |
| dirname | имя_ввода.dir | Определяет, что направление текста будет отправлено |
| disabled | disabled | Определяет, что элемент <input> должен быть отключен |
| form | идентификатор_формы | Определяет форму, к которой принадлежит элемент <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 имя_фрейма |
Определяет, где отображать ответ, полученный после отправки формы (для type="submit" и type="image") |
| height | пиксели | Определяет высоту элемента <input> (только для type="image") |
| list | идентификатор_списка_данных | Ссылается на элемент <datalist>, который содержит предопределенные варианты для элемента <input> |
| max | число дата |
Определяет максимальное значение для элемента <input> |
| maxlength | число | Определяет максимальное количество символов, разрешенное в элементе <input> |
| min | число дата |
Определяет минимальное значение для элемента <input> |
| minlength | число | Определяет минимальное количество символов, требуемое в элементе <input> |
| multiple | multiple | Определяет, что пользователь может ввести более одного значения в элемент <input> |
| name | текст | Определяет имя элемента <input> |
| pattern | регулярное_выражение | Определяет регулярное выражение, с которым проверяется значение элемента <input> |
| placeholder | текст | Определяет короткую подсказку, описывающую ожидаемое значение элемента <input> |
| popovertarget | идентификатор_элемента | Определяет, какой всплывающий элемент вызывать (только для type="button") |
| popovertargetaction | hide show toggle |
Определяет, что происходит со всплывающим элементом при нажатии кнопки (только для type="button") |
| readonly | readonly | Определяет, что поле ввода доступно только для чтения |
| required | required | Определяет, что поле ввода должно быть заполнено перед отправкой формы |
| size | число | Определяет ширину элемента <input> в символах |
| src | URL | Определяет URL изображения, используемого в качестве кнопки отправки (только для type="image") |
| step |
число 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 | текст | Определяет значение элемента <input> |
| width | пиксели | Определяет ширину элемента <input> (только для type="image") |
Глобальные атрибуты
Тег <input> также поддерживает глобальные атрибуты в HTML.
Атрибуты событий
Тег <input> также поддерживает атрибуты событий в HTML.
Связанные страницы
Учебник 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 по умолчанию
Нет.