САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

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 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 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
email
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> также поддерживает Глобальные атрибуты в HTML.


События атрибутов

Тег <input> также поддерживает События атрибутов в HTML.


Связные страницы

HTML учебник:

HTML DOM справочник:


Настройки CSS по умолчанию

Нет.