<input>

<input> является одним из разносторонних элементов формы и позволяет создавать разные части интерфейса и обеспечивать взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.

Основной атрибут <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file), кнопка с изображением (image) и др. Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.

Закрывающийся тег:

Не требуется

Поддержка:

HTML4 и выше

Атрибуты:

accept - Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.

<input type="file" accept="image/jpeg,image/png,image/gif">

align - Определяет выравнивание изображения.
alt - Альтернативный текст для кнопки с изображением.

<input src="home/web.gif" type="image" alt="Отправить форму на сервер">

autocomplete - Включает или отключает автозаполнение.

<input type="password" autocomplete="on">

autofocus - Устанавливает фокус в поле формы.

<input type="text" size="40" autofocus>

border - Толщина рамки вокруг изображения.
checked - Предварительно активированный переключатель или флажок.

<input type="radio" name="sex" value="m" checked> Мужской<Br>

disabled - Блокирует доступ и изменение элемента.

<input type="submit" value="Отправить" disabled>

form - Связывает поле с формой по её идентификатору.

<input type="submit" value="Отправить" form="data">

formaction - Определяет адрес обработчика формы.

<input type="submit" value="Отправить" formaction="web.php">

formenctype - Устанавливает способ кодирования данных формы при их отправке на сервер.

<input type="submit" value="Отправить" formenctype="multipart/form-data">

formmethod - Сообщает браузеру каким методом следует передавать данные формы на сервер.

<input type="submit" value="Отправить" formmethod="post">

formnovalidate - Отменяет встроенную проверку данных на корректность.

<input type="submit" formnovalidate value="Отправить">

formtarget - Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.

<input type="submit" value="Отправить" fortarget="_self">

list - Указывает на список вариантов, которые можно выбирать при вводе текста.

<input list="names">
<datalist id="names">
 <option value="Екатерина">
 <option value="Дмитрий">
</datalist>

max - Верхнее значение для ввода числа или даты.

<input type="number" min="10" max="50">

maxlength - Максимальное количество символов разрешённых в тексте.

<input type="text" size="40" maxlenght="20">

min - Нижнее значение для ввода числа или даты.

<input type="number" min="10" max="50">

multiple - Позволяет загрузить несколько файлов одновременно.

<input type="email" name="email" required multiple>

name - Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.

<input type="text" name="comment">

pattern - Устанавливает шаблон ввода.

<input type="age" pattern="[0-9]{1-2}">

placeholder - Выводит подсказывающий текст.

<input type="text" size="40" placeholder="Введите ваше имя">

readonly - Устанавливает, что поле не может изменяться пользователем.

<input type="text" name="comment" size="40" value="Информация о себе" readonly>

required - Обязательное для заполнения поле.

<input type="text" size="40" required>

size - Ширина текстового поля.

<input type="text" size="40">

src - Адрес графического файла для поля с изображением.

<input type="image" src="/home/web.jpg">

step - Шаг приращения для числовых полей.

<input type="age" pattern="[0-9]{1-2}" step="1">

type - Сообщает браузеру, к какому типу относится элемент формы.

 <input type="radio" name="age" value="20">

value - Значение элемента.

<input type="submit" value="Отправить">

Также для этого элемента доступны универсальные атрибуты и события.

Пример:

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title> тег <input> </title>
 </head>
 <body>
   <center><h3>Регистрация на сайте http://weblecture.ru</h3></center><br>
 <form name="test" method="post" action="input1.php">
  <p><b>Ваше имя:</b><br>
   <input type="text" size="40">
  </p>
  <p><b>Ваш пол:</b><Br>
   <input type="radio" name="sex" value="m"> Мужской<Br>
   <input type="radio" name="sex" value="fm"> Женский<Br>
  </p>
  <p><b>Ваш возраст:</b><Br>
   <input type="radio" name="age" value="20"> 10-20<Br>
   <input type="radio" name="age" value="30"> 20-30<Br>
   <input type="radio" name="age" value="40"> 30-40<Br>
   <input type="radio" name="age" value="50"> 40-50<Br>
  </p>
  <p>Коротко о себе:<Br>
   <textarea name="comment" cols="40" rows="3"></textarea></p>
  <p><input type="submit" value="Отправить"></p>
 </form>
 </body>
</html>