Главная HTML Форма Элемент input

Элемент формы <input>

Элементы формы

Элемент <input> создает большинство полей формы.
Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.

Синтаксис:
<form>
  <input атрибуты>
</form>
Основной атрибут элемента <input> это - type="значение" , который определяет вид элемента.

Атрибуты <input>

Атрибут Значение Описание
accept =audio/*
=video/*
=image/*
=MIME_type
Определяет тип файла, разрешенных для отправки на сервер.
Указывается только для <input type="file">.
Возможные значения:
file_extension — разрешает загрузку файлов с указанным расширением, например, accept=".gif", accept=".pdf", accept=".doc"
audio/* — разрешает загрузку аудиофайлов
video/* — разрешает загрузку видеофайлов
image/* — разрешает загрузку изображений
media_type — указывает на медиа-тип загружаемых файлов.
alt =text Определяет альтернативный текст для изображений, указывается только для <input type="image">.
<input src="image/imgbutton.gif" type="image" 
    alt="Отправить форму на сервер">
                        

autocomplete

=on
=off

Указывает, должен ли элемент <input> включать Автозаполнение.
При вводе первых букв текста выводится список сохранённых ранее значений, из которого можно выбрать необходимое.

autofocus

=autofocus

Указывает, что поле формы должно получить фокус после загрузки страницы.
checked =checked Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа type="checkbox" и type="radio".
disabled =disabled Указывает, что элемент <input> должен быть недоступен для взаимодействия с пользователем. Отключает возможность редактирования и копирования содержимого поля.

form

=form_id

Указывает форму (определенную элементом <form>) к которой относится элемент управления. Значением является идентификатор формы (id) в этом же документе.

<form id="myForm" action=script.php">
Логин: <input type="text" name="userLogin" form="myForm">
Пароль: <input type="password" name="userPass" form="myForm">
<input type="submit" value="Войти" form="myForm">
</form>

formaction

=URL

Задает url файла, который будет обрабатывать введенные в поля данные при отправке формы.. (Используется только для <input type="image"> и <input type="submit">).
Атрибут переопределяет значение атрибута action самой формы.

<form action=script1.php">
. . .
<input type="submit" value="Отправить" formaction="script2.php">
</form>

formenctype

=application/x-www-form-urlencoded

=multipart/form-data

=text/plain

Определяет способ кодирования данных формы перед отправкой на сервер. Используется только для <input type="image"> и <input type="submit">

application/x-www-form-urlencoded - все символы кодируются перед отправкой (значение по умолчанию).

multipart/form-data - символы не кодируются. Это значение применяется при отправке файлов.

text/plain - пробелы заменяются знаком "+", а специальные символы не кодируются.

2
<form action="script1.php">
<p>Ваше имя: <input name="user"></p>
<p>Файл отправки: <input name="file" type="file"></p>
<p><input type="submit" formaction="script2.php" formmethod="post" 
formenctype="multipart/form-data" value="Отправить">
</form>   

Ваше имя:

Файл отправки:

formmethod

Указывает метод, который будет использован при отправке данных формы на сервер. Используется только для <input type="image"> и <input type="submit">.
Переопределяет значение атрибута method формы.
=get
по умолчанию
Передает данные формы в адресной строке («имя=значение»), которые добавляются к URL страницы после вопросительного знака (?) и разделяются между собой амперсандом (&).

<input type="submit" formmethod="get">
(http://example.ru/doc/?name=Иван&password=vanya)

=post Браузер устанавливает связь с сервером и посылает данные для обработки.

formnovalidate

=formnovalidate

Указывает, что не нужно проверять данные на корректность. Используется только для <input type="submit">.

3
<form action="script1.php" target="_blank">
<p><input required placeholder="Имя"></p>
<p><input type="email" required placeholder="Ваш email"></p>
<p><input type="url" required placeholder="Сайт: http://"></p> 
<p><input type="submit" value="Отправить"> 
<input type="reset" value="Очистить"></p>
<p><input type="submit" formnovalidate value="Отправить без проверки"></p>
</form>
   

formtarget

Указывает, где показывать ответ после отправки формы. Используется только для <input type="image"> и <input type="submit">.
Переопределяет значение атрибута target формы.
_blank открывает ответ в новом окне/вкладке.
_self открывает ответ в текущем окне (значение по умолчанию).
_parent открывает ответ во фрейм-родитель.
Если фреймов нет, то это значение работает как "_self".
_top открывает ответ во всю ширину окна браузера.
=имя фрейма загружает ответ во фрейм с указанным именем.

4
<form>
<p><iframe name="outfram" height="80" width="210"></iframe></p>
<p><input name="user" placeholder="Ваше имя"></p>
<p><input type="submit" formaction="script2.php" formtarget="outfram" value="Отправить"></p>
</form>
   

heigh

=pixels

Определяет высоту элемента.
Используется только для <input type="image">.
Значение атрибута содержит количество пикселей без указания единицы измерения. Обычно используется с элементом width.

<input type="image" src="img_submit.gif" height="30" width="50">

list

="datalist_id"

Определяет список вариантов, из которых пользователь может выбрать. В качестве значения для атрибута указывается идентификатор элемента <datalist>.

5
<form action="test.php" method="post">
<label for="userzvet">Выбрать цвет:</label><br>
<input list="zvet" id="userzvet" type="text" name="userzvet">
<datalist id="zvet">
  <option>Синий</option>
  <option>Черный</option>
  <option>Красный</option>
  <option>Белый</option>
  <option>Зеленый</option>
  <option>Желтый</option>
  <option>Любой</option>
</datalist>    
<p><input type="submit" value="Отправить">
<input type="reset" value="Очистить"></p>
</form>
       

maxlength =number Определяет максимальное количество символов, которое пользователь может ввести в поле. Значение по умолчанию 524288 символов.

<input type="text" size="12" maxlength="10">


max

=number
=date

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

<input type="number" id="number" name="amount" value="-3"
min="-5" max="5">

min

=number
=date

Определяет минимальное значение для ввода числа или даты.

6
<form action="test.php" method="post">
 <p>Укажите вашу температуру в градусах Цельсия</p>
 <p><input type="number" min="34" max="41" value="36.6" step="0.1"></p>
 <p>Сегодня 24.10.2021. Укажите дату вылета на ближайшие семь дней.</p>
       
 <input type="date" min="2021-10-24" max="2021-10-31"
 value="2021-10-24">
                            
 <p><input type="submit" value="Отправить">
 <input type="reset" value="Очистить"></p>
</form>

Укажите вашу температуру в градусах Цельсия

Сегодня 24.10.2021. Укажите дату вылета на ближайшие семь дней.

multiple

=multiple

Указывает, что пользователь может ввести более одного значения в элементе (только для <input type="file"> и <input type="email">).

При использовании двух и более почтовых адресов они должны перечисляться через запятую.

<form action="test.php">    
<p>Укажите почтовые адреса через запятую:</p>   
<p><input type="email" name="email" required multiple></p>
<p><input type="submit" value="Отправить"></p>
</form>
                
name =text Определяет уникальное имя элемента <input> в форме. Является аналогом атрибута "id". Как правило, это имя используется при отправке данных на сервер или для доступа к введённым данным поля через скрипты.

7
<script>  
  function dataField(f) {
  alert("Вы ввели: "+f.comment.value);
  }
</script>

<form class="bord-s padd-10">
  <b>Введите текст</b>
  <p><input type="text" name="comment">
  <input type="button" value="ОК" onClick="dataField(this.form)"></p>
</form>
    
Введите текст

pattern

=regexp

Устанавливает шаблон ввода. Задает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Только для элементов управления text, search, tel, url, email и password.

Если присутствует атрибут pattern, то форма не будет отправляться, пока поле не будет заполнено правильно.

<input type="email" pattern="выражение">
<input type="tel" pattern="выражение">
<input type="text" pattern="выражение">
<input type="search" pattern="выражение">
<input type="url" pattern="выражение">

: pattern="[a-z]{3}-[0-9]{3}"

В данном Примере квадратные скобки устанавливают диапазон допустимых символов - любые строчные буквы, число в фигурных скобках указывает, что нужны три строчные буквы, после которых следует тире, далее - три цифры в диапазоне от 0 до 9.

8
<form action="test.php" method="post">
  <p>Введите телефон в формате 8-xxx-xxx-xxxx</p>
  <p><input type="tel" pattern="8-[0-9]{3}-[0-9]{3}-[0-9]{4}"
    placeholder="8-xxx-xxx-xxxx" required></p>
  <p><input type="submit" value="Отправить">
  <input type="reset" value="Очистить">
  </p>
</form>

Введите телефон в формате
8-xxx-xxx-xxxx

Проверка корректности ввода номера телефона

Проверка адреса электронной почты

Регулярные выражения

Выражение Описание
\d [0-9] Одна цифра от 0 до 9.
\D [^0-9] Любой символ кроме цифры.
\s Пробел.
[A-Z] Только заглавная латинская буква.
[A-Za-z] Только латинская буква в любом регистре.
[А-Яа-яЁё] Только русская буква в любом регистре.
[A-Za-zА-Яа-яЁё] Любая буква русского и латинского алфавита.
[0-9]{3} Три цифры.
[A-Za-z]{6,} Не менее шести латинских букв.
[0-9]{,3} Не более трёх цифр.
[0-9]{5,10} От пяти до десяти цифр.
^[a-zA-Z]+$ Любое слово на латинице.
^[А-Яа-яЁё\s]+$ Любое слово на русском включая пробелы.
^[ 0-9]+$ Любое число.
[0-9]{6} Почтовый индекс.
\d+(,\d{2})? Число в формате 1,34 (разделитель запятая).
\d+(\.\d{2})? Число в формате 2.10 (разделитель точка).
\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3} IP-адрес

placeholder

=text

Определяет короткую подсказку, которая описывает ожидаемое значение для поля ввода. Пользователь видит подсказку в поле ввода. Она исчезает, когда пользователь начинает вводить данные или когда поле получает фокус.

readonly =readonly Определяет, что поле ввода доступно только для чтения. Пользователь не может вносить изменения. Доступно выделение и копирование текста. Указывается без значения атрибута. Содержимое поля можно менять с помощью скриптов и данные отправлять на сервер.

<input type="text" name="comment" size="40" value="Введенный текст не может изменяться" readonly>

required

=required

Указывает, что поле ввода обязательно должно быть заполнено перед отправкой формы на сервер.

Если обязательное поле пустое, браузер выведет сообщение об ошибке, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.

<input name="user" required placeholder="Ваше имя">

size =number Устанавливает ширину текстового поля (в символах). (Только для text, search, tel, url, email и password).
Значение по умолчанию 20 символов.

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

src =URL Указывает путь к изображению, которое используется в качестве кнопки “отправить”. (Используется только для <input type="image"> ).

<input type="image" src="URL-адрес картинки">

step

=number

Задает шаг приращения (величину инкремента) для числовых полей. Используется с атрибутами min и max которые определяют минимальное и максимальное значение.

1) <input type="range" min="0" max="10" step="2">

2) Введите произвольное значение от 0 до 1:
<input type="number" value="0" min="0" max="1" step="0.1">

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

<input type="button" value="Кнопка">
checkbox Флажки. Позволяют выбрать более одного варианта из предложенных.

Пиво Чай Кофе

file Поле для ввода имени файла, который пересылается на сервер. Позволяет загружать файлы с компьютера пользователя.

hidden Скрытое поле. Оно никак не отображается на веб-странице (не дает пользователю изменять значения по умолчанию).
image Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер. Позволяет вместо текста на кнопке вставить изображение.

password Текстовое поле, но при вводе в поле все символы показываются звездочками. Предназначено для того, чтобы скрыть вводимый пароль.

Password:
<input type="password" name="pw" placeholder="Введите пароль" required
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Должен содержать как минимум одну цифру, одну заглавную и строчную букву и как минимум 8 или более символов.">

Password:

radio Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.

Пиво Чай Кофе

reset Кнопка для возвращения данных формы в первоначальное значение (очищает поля формы).

submit Кнопка для отправки данных формы на сервер.

text Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.

color

Виджет для выбора цвета.

<input type="color" name="color">

date

Поле для выбора календарной даты (дд.мм.гггг чч:мм).

datetime-local

Указание местной даты и времени.

email

Для адресов электронной почты.

number

Ввод чисел.

Введите число от 0 до 10:

range

Ползунок для выбора чисел в указанном диапазоне.

search

Поле для поиска.

Поиск:

time

Для времени. Время в 24-часовом формате по шаблону чч:мм.

Укажите время:

url

Для веб-адресов.

Главная страница:

month

Выбор месяца.
Позволяет пользователю вводить год и номер месяца по шаблону гггг-мм.

week

Выбор недели.
Инструмент позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53.

Укажите неделю:

value =text Определяет текст, отображаемый на кнопке, в поле или связанный текст.

На сервер отправляется пара «имя=значение», где имя задаётся атрибутом name элемента <input>, а значение - атрибутом value.

В зависимости от типа элемента атрибут value выступает в следующей роли:

  • для кнопок (input type="button | reset | submit") устанавливает текстовую надпись на них;
  • для текстовых полей (input type="password | text") указывает предварительно введённую строку. Пользователь может стирать текст и вводить свои символы, но при использовании в форме кнопки Reset пользовательский текст очищается и восстанавливается введённый в атрибуте value;
  • для флажков и переключателей (input type="checkbox | radio") уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно установить, какой пункт выбрал пользователь.
  • для файлового поля (input type="file") не указывается .

9
<form action="test.php">
  <p><b>Укажите дату полёта в космос Ю.А.Гагарина ?</b></p>
  <p><input type="radio" name="otvet" value="a1">10 апреля 1960 года<br>
  <input type="radio" name="otvet" value="a2">12 апреля 1961 года<br>
  <input type="radio" name="otvet" value="a3">15 апреля 1962 года</p>
  <p><input type="submit" value="Отправить">
  <input type="reset" value="Очистить"></p>
</form>

Укажите дату полёта в космос Ю.А.Гагарина ?

10 апреля 1960 года
12 апреля 1961 года
15 апреля 1962 года

width

=pixels

Определяет ширину элемента (только для <input type="image">). Обычно используется с элементом height.

<input type="image" src="img_submit.gif" width="50" height="30">