html.okpython.net
HTML и CSS для начинающих

HTML :: Тег <input>

В HTML тег <input> (от англ. input – ввод) предназначен для создания различных элементов интерфейса форм, позволяющих принимать от пользователя данные для дальнейшей передачи их на сервер. Элемент <input> довольно универсален. С его помощью, например, могут быть созданы различные кнопки, ползунки, переключатели, текстовые и скрытые поля.

Синтаксис

	<input> 		             								(закрывающий тег не требуется)

Атрибуты

  • accept – используется для поля отправки файлов на сервер (type="file") и устанавливает для него фильтр на типы отправляемых файлов. В качестве значений принимает через запятую список MIME-типов разрешенных для отправки файлов (ознакомиться с полным списком mime-типов можно на сайте Мозилы здесь или на Википедии здесь). Если файл не соответствует фильтру, то пользователь не увидит его в окне выбора файлов. Если атрибут не применяется, то в окне выбора файлов будут показываться все файлы, доступные для просмотра.
  • alt – устанавливает альтернативный текст для графической кнопки (type="image").
  • autocomplete – позволяет отключать автозаполнение полей формы, которое происходит при повторном вводе одинаковых данных. Принимает два значения "on" (по умолчанию) и "off". При этом, если автозаполнение отключено в настройках самого браузера, то данный атрибут игнорируется. Кроме того, значение атрибута может быть переопределено таким же атрибутом autocomplete, но у конкретных элементов формы, например, в случае необходимости не сохранять важные данные вроде паролей, номеров банковских карт и т.д.
  • autofocus – данный логический атрибут автоматически устанавливает фокус в данное поле формы при загрузке страницы. Если атрибут задан сразу для нескольких полей, то фокус будет передан первому из них. Атрибут по умолчанию выключен и значений не принимает.
  • checked – применяется для переключателей и предварительно активирует их. Для радиокнопок (type="radio") атрибут можно использовать только для одного элемента группы, для переключателей в виде флажков (type="checkbox") атрибут можно использовать хоть для всех элементов сразу. Атрибут по умолчанию выключен и значений не принимает.
  • disabled – данный логический атрибут блокирует доступ к полю формы. Это может потребоваться, например, когда нужно, чтобы поле стало доступным только после заполнения предварительных полей. Пользователь не сможет взять его в фокус и изменить содержимое. При этом само поле имеет серый фон, а его значение на сервер не передается. Атрибут по умолчанию выключен и значений не принимает.
  • form – связывает данное поле с формой по ее идентификатору. В качестве значения принимает соответствующее значение атрибута id формы, с которой необходимо связать данное поле. Это может потребоваться в случае, когда поле расположено за пределами формы.
  • formnovalidate – данный логический атрибут отменяет встроенную проверку данных вводимых пользователем в поля формы на ошибки. Значений не принимает и по умолчанию выключен.
  • formaction – в качестве значения принимает полный или относительный путь к серверной программе-обработчику, которой будут передаваться данные формы после отправки на сервер. Атрибут используется для кнопок с атрибутом type="submit" и type="image".
  • formenctype – устанавливает способ кодирования отправляемых данных. Может принимать значения:
    • "application/x-www-form-urlencoded" – применяется по умолчанию и подходит для большинства случаев, поэтому сам атрибут enctype обычно не указывается;
    • "multipart/form-data" – следует использовать при отправке файлов;
    • "text/plain" – кодирует данные в виде простого текста, только заменяя пробелы знаком +; требуется редко, например, может быть полезен при отправке данных формы по электронной почте.
    Атрибут используется для кнопок с атрибутом type="submit" и type="image".
  • formmethod – принимает значения "GET" или "POST", которые определяют метод отправки данных формы на сервер. По умолчанию применяется "GET". Атрибут используется для кнопок с атрибутом type="submit" и type="image".
  • formtarget – сообщает имя целевого окна или фрейма, в котором будет открыт результат отправки данных формы. В качестве значений может принимать:
    • _self – документ будет открываться в текущем окне или фрейме (используется по умолчанию);
    • _blank – документ будет открываться в новом окне или фрейме;
    • _parent – документ будет открываться в родительском фрейме, а в случае отсутствия такового, в текущем окне;
    • _top – документ будет открываться в главном (текущем) окне, в котором находится данный фрейм, содержащий ссылку, а в случае отсутствия фреймов в окне, данное значение сработает, как _self;
    • name – имя фрейма, в котором будет открываться документ; если указать несуществующее имя окна или фрейма, то браузер откроет документ в новом окне.
    Атрибут используется для кнопок с атрибутом type="submit" и type="image".
  • height – задает высоту графической кнопки (type="image").
  • list – связывает данное поле с элементом <datalist> по ее идентификатору, позволяя подключить к полю варианты автодополнения. В качестве значения принимает соответствующее значение атрибута id элемента <datalist>, с которым необходимо связать данное поле.
  • maxlength – устанавливает максимально допустимое число символов, которые можно ввести в поле. В качестве значения принимает натуральные числа. При равенстве количества введенных символов установленному значению, дальнейший ввод символов становится невозможным.
  • minlength – устанавливает минимальное число символов, которые нужно ввести в поле. В качестве значения принимает натуральные числа. Если количество введенных символов будет меньше установленного значения, но больше нуля, то при попытке отправки формы на сервер будет выведено соответствующее предупреждение, а форма на сервер отправлена не будет.
  • multiple – позволяет выбрать для отправки на сервер сразу несколько значений, например, файлов для поля с type="file". Атрибут по умолчанию выключен и значений не принимает.
  • name – задает уникальное имя элементу формы, которое позволяет обращаться к нему через скрипты. Кроме того, имя элемента отправляется на сервер вместе с его значением. Для радиокнопок одной группы данный атрибут должен иметь одинаковое значение.
  • pattern – в качестве значения принимает шаблон регулярного выражения, синтаксис которого определяет правила ввода данных в данное поле. При наличии данного атрибута форма не будет отправлена до тех пор, пока поле не будет заполнено правильно. Атрибут используется для кнопок с атрибутом type="email". type="password", type="search", type="tel", type="text", type="url",
  • placeholder – выводит текст-подсказку внутри поля формы, который исчезает при получении фокуса или ввода текста (зависит от браузера). Отображается шрифтом серого цвета.
  • readonly – данный логический атрибут указывает, что данный элемент формы доступен только для чтения. В отличие от атрибута disabled допускает получение фокуса. Атрибут по умолчанию выключен и значений не принимает.
  • required – данный логический атрибут устанавливает поле обязательным для заполнения. Если поле заполнено не будет, то при попытке отправки формы на сервер будет выведено соответствующее предупреждение, а форма на сервер отправлена не будет.
  • size – устанавливает ширину текстового поля, которая определяется числом символов моноширинного шрифта. По умолчанию имеет значение "20". Следует отметить, что если размер шрифта изменяется с помощью стилей, то и ширина поля также изменяется.
  • src – в качестве значения принимает абсолютный или относительный путь к файлу изображения. Используется для графической кнопки (type="image").
  • step – в качестве значения принимает любое целое или дробное число и определяет шаг изменения чисел для числовых полей и ползунков. По умолчанию используется 1.
  • type – определяет тип элемента <input> и может принимать следующие значения:
    • "button" – создает кнопку;
    • "checkbox" – создает флажок, позволяя тем самым выбрать из предложенных вариантов сразу несколько подходящих;
    • "color" – создает виджет для выбора цвета в шестнадцатеричном формате;
    • "date" – создает поле для выбора календарной даты;
    • "datetime" – создает поле для выбора даты и времени (час, минута, секунда и доля секунды) в соответствии с часовым поясом UTC;
    • "datetime-local" – создает поле для выбора местной даты и времени (без использования часового пояса);
    • "email" – создает поле для ввода адреса электронной почты;
    • "file" – создает поле для ввода имени файла, пересылаемого на сервер, например, фотографию пользователя при регистрации;
    • "hidden" – создает скрытое поле, которое предназначено для служебной информации и не отображается на веб-странице;
    • "image" – создает графическую кнопку для отправки данных формы на сервер;
    • "month" – создает поле для ввода месяца;
    • "number" – создает поле для ввода вещественных чисел;
    • "password" – создает поле для ввода пароля, в котором все символы, вводимые с клавиатуры, скрываются звездочками, чтобы их нельзя было подсмотреть;
    • "radio" – создает радиокнопку, которая представляет собой переключатель, позволяющий выбрать только один вариант из нескольких предложенных;
    • "range" – создает ползунок для выбора чисел в указанном диапазоне (по умолчанию используется диапазон от 0 до 100, но его можно изменять при совместном использовании атрибутов "min" и "max");
    • "reset" – создает кнопку «Сброс» для возврата всех данных формы в исходное состояние;
    • "search" – создает текстовое поле для ввода строки поиска;
    • "submit" – создает обычную текстовую кнопку для отправки данных формы на сервер;
    • "tel" – создает поле для ввода телефонного номера;
    • "text" – создает текстовое поле для ввода символов с клавиатуры;
    • "time" – создает поле для ввода времени в 24-часовом формате;
    • "url" – создает поле для ввода url-адреса;
    • "week" – создает поле для ввода недели.
  • value – присваивает элементу формы начальное значение. Данный атрибут является обязательным для переключателей (type="radio" и type="checkbox"), а для кнопок устанавливает текстовую надпись.
  • width – задает ширину графической кнопки (type="image").
  • Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/input.html#the-input-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/input

Примеры

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>
</head>
<body>
<form action="php/registration.php" method="POST" name="reg_form">
	
<label>Имя: <input type="text" name="first_name" 
minlength="2" maxlength="20" autofocus></label><br><br>
		
<label>Фамилия: <input type="text" name="last_name" 
minlength="3" maxlength="20"></label><br><br>

<!-- Все элементы одной группы радиокнопок должны иметь одно имя-->
Возраст: <label>20-30<input type="radio" name="age" value="2030"> &nbsp;</label>
<label>31-40<input type="radio" name="age" value="3140">  &nbsp;</label>
<label>41-50<input type="radio" name="age" value="4150"> </label><br><br>

<!-- Выбираем виды, которыми владеем -->
Виды единоборств: <label>бокс<input type="checkbox" name="box" value="box"> &nbsp;</label>
<label>каратэ<input type="checkbox" name="karate" value="karate">  &nbsp;</label>
<label>дзюдо<input type="checkbox" name="judo" value="judo" checked> </label> <br><br>

<!-- Поле для загрузки нескольких файлов сразу (фото) -->
<label>Загрузить фото: <input type="file" name="foto" multiple></label><br><br>

<!-- Обязательное поле ввода логина -->
<label>Введите логин: <input type="text" name="login" required></label><br><br>

<!-- Обязательное поле ввода пароля -->
<label>Введите пароль: <input type="password" name="passw" 
minlength="7"  maxlength="15" required></label><br><br>

<!-- Создаем кнопки сброса и отправки данных на сервер -->
<input type="reset" value="Сброс"> &nbsp; &nbsp;
<input type="submit" value="Отправить" disabled> 
</form>	
</body>
</html>

Пример №1

▲
▼