Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс

Поиск по сайту

Наш Telegram бот: @htmlweb_bot

  button
  checkbox
  color
  date
  file
  hidden
  number
  password
  radio
  range
  reset
  submit
  text

Тег <input>

Чаще всего в формах используется тег <input>. Он не имеет закрывающего тега. Вся информация, необходимая браузеру для обработки, содержится непосредственно в теге <input> и задается с помощью различных атрибутов.

Семантика <input> значительно варьируется в зависимости от значения его атрибута type.

Атрибуты тега <input>

type

Основной атрибут, задающий тип элемента. Если атрибут не указан, то по умолчанию используется значение text.
Возможные значения:

button – Кнопка с надписью.
checkbox – Флажок.
color – Виджет для выбора цвета.
date – Поле для ввода календарной даты (год, месяц, день).
datetime – Поле для ввода даты и времени.
datetime-local – Поле для ввода даты и местного времени.
email – Поле для ввода адреса электронной почты.
file – Поле для ввода имени файла, который пересылается на сервер.
hidden – Скрытое поле (не отображается на Web-странице).
image – Графическая кнопка отправки данных формы на сервер. Вместе с этим значением нужно использовать атрибут src, чтобы определить адрес изображения и атрибут alt для определения альтернативного текста. Можно также задать атрибуты width и height, чтобы определить размер изображения в пикселях.
month – Поле для ввода месяца и года.
number – Поле для ввода чисел.
password – Поле для ввода пароля.
radio – Переключатели (радио-кнопки).
range – Ползунок для ввода чисел в указанном диапазоне.
reset – Кнопка сброса данных формы в первоначальное состояние.
search – Поле для ввода строки поиска.
submit – Кнопка для отправки данных формы на сервер.
tel – Поле для ввода номера телефона.
text – Текстовое поле.
time – Поле для ввода времени.
url – Поле для ввода Web-адреса.
week – Поле для ввода номера недели и года.

Если браузер не поддерживает какой-то тип, то он будет считать его типом text.

autocapitalize

Автоматический Shift для мобильных устройств.
Возможные значения:

words – Каждое слово с заглавной буквы.
characters – Все буквы заглавные.

autocomplete="off"

Отключает автозаполнение для данного поля. Очень полезно для полей ввода разовых кодов, каптч и т.п. [domelement].setAttribute('autocomplete','off');
В большинстве современных браузеров установка autocomplete="off" не помешает менеджеру паролей спрашивать пользователей, хотят ли они сохранить информацию об имени пользователя и пароле, или автоматически заполнять эти значения в форме входа на сайт.
Другие возможные значения атрибута: on, name (honorific-prefix, given-name, additional-name, family-name, honorific-suffix, nickname), email, username, new-password, current-password, one-time-code, organization-title, organization, street-address (shipping, billing), address-line1, address-line2, address-line3, address-level4, address-level3, address-level2, address-level1, country, country-name, postal-code, cc-name, cc-given-name, cc-additional-name, cc-family-name, cc-number, cc-exp, cc-exp-month, cc-exp-year, cc-csc, cc-type, transaction-currency, transaction-amount, language, bday, bday-day, bday-month, bday-year, sex, tel (tel-country-code, tel-national, tel-area-code, tel-local), tel-extension, impp, url, photo, webauthn.

autofocus

Автоматическое получение фокуса при загрузке страницы.

capture

Доступ к камере мобильного устройства. Этот атрибут добавляется в поле <input type="file">.
Возможные значения:

user – Активировация фронтальной камеры.
environment – Активировация тыльной камеры.

Есть ещё атрибут accept, с помощью которого можно указывать тип контента, который вы хотите получить с камеры.
<input type="file" capture="user" accept="image/jpeg,image/png">

inputmode

Настройка виртуальной клавиатуры мобильного устройства под предполагаемый тип вводимых данных.
Возможные значения:

none – Отключение виртуальной клавиатуры.
text – По умолчанию.
numeric – Только цифры.
decimal – Цифры и десятичная запятая.
tel – Цифры и другие символы для набора номера телефона.
url – Клавиатура с точкой, слэшем и .com вместо пробела.
email – Клавиатура с пробелом, точкой и символом @.
search – Клавиатура с пробелом, точкой и кнопкой go.

disabled

Делает элемент недоступным. Недоступные элементы не передаются на сервер.

list

Список вариантов, которые можно выбирать при наборе в текстовом поле.
Изначально этот список скрыт и становится доступным при получении полем фокуса или наборе текста.

<input list="<идентификатор>">
<datalist id="<идентификатор>">
    <option value="Текст1">
    <option value="Текст2">
</datalist>

min

Минимальное значение в полях типа date, number и range.

max

Максимальное значение в полях типа date, number и range.

maxlength

Ограничение на количество символов, которые можно ввести в поле типа text.

name

Имя поля. Каждое создаваемое поле ввода должно иметь собственное уникальное имя, иначе сценарий не определит, к каким полям относятся полученные значения. Конечно, имя поля ввода должно соответствовать имени, которое описано для него в программе обработки.

pattern

Шаблон поля ввода. Проверка корректности ввода данных. Примеры шаблонов для form input pattern.

placeholder

Текст-подсказка в поле формы, который пропадает автоматически при получении поле фокуса.
Пример настройки стиля подсказки:

<style>
    ::placeholder {
        color: red;
        font-style: italic;
    }
    :-ms-input-placeholder { /* для браузеров IE */
        color: red;
        font-style: italic;
    }
</style>

В IE placeholder считается псевдоклассом, а в остальных браузерах – псевдоэлементом.

РЕЗУЛЬТАТ:

readonly

Запрещает изменение элемента. На сервер передается.

required

Автоматически проверяет, заполнено ли поле.
Для выделения правильно заполненного обязательного поля можно использовать следуюшую конструкцию style:

<style>
    input:required:invalid {
        border: 1px solid red;
    }
    input:required:valid {
        border: 1px solid green;
    }
</style>

size

Размер поля типа text.

spellcheck

Проверка правописания для поля, у которого установлен атрибут contenteditable="true".
Возможные значения:

true – Проводить проверку.
false – Не проводить проверку.

Рекомендуется устанавливать spellcheck="false", если поле используется для ввода такой информации, которая вряд ли присутствует в словаре, или содержит личные данные, такие как имена, даты рождения, пароли, так как браузеры Chrome и Edge отправляют содержимое полей ввода на проверку в специальные сервисы, тем самым раскрывая их.

step

Шаг изменения числа в полях типа number и range.

value

Значение поля по умолчанию или надпись на кнопке.

Для тега <input> также доступны общие атрибуты и атрибуты обработки событий.

Обработка проверки корректности заполнения поля на основе html5+javascript с примерами

Типы элемента INPUT

Кнопка BUTTON

Кнопка BUTTON предназначена для тех случаев, когда надо исполнять какой-нибудь скрипт. То есть на кнопку вешается событие OnСlick и вызывается нужная функция. Атрибут value задает надпись на кнопке. Атрибут onclick задает JavaScript-обработчик, который вызывается при щелчке на кнопке. Атрибут name служит для JavaScript-именования кнопки (на сервер не передается).

Пример

<input type="button" value="Кнопка" onclick="alert('Вы нажали кнопку!')" name="btn">

РЕЗУЛЬТАТ:

Флажок CHECKBOX

Браузер отображает поле этого типа в виде небольшого квадрата. По смыслу флажок служит для того, чтобы быть установленным (в квадрате стоит галочка), либо не установленным (квадрат пуст). Когда флажок установлен, его значение, заданное атрибутом value, передается программе сценария. Если он не установлен, то его значение не передается совсем.

Флажок может быть сразу установлен по умолчанию, если указан атрибут checked. По умолчанию атрибут value имеет значение on (установлен). Так как атрибут value здесь задает не надпись на флажке, а его внутреннее значение, передаваемое программе сценария, то если надо что-то подписать, пишите рядом с флажком или используйте тег <label>.

Пример

<form>
    <input type="checkbox" name="Receipt" id="Receipt" value="Yes">
    <label for="Receipt">Нужна накладная</label>
</form>

РЕЗУЛЬТАТ:

Выбор цвета

Это поле, которое позволяет выбрать цвет.

Пример

<form onchange="document.getElementById('text-color').style.color=this.color.value;">
    <label>
        Выберите цвет:
        <input type="color" value="#ff0000" name="color">
    </label>
</form>
<p id="text-color" style="color: #f00;">
    Атрибут value используют для установки исходного цвета, его можно не указывать.
</p>

РЕЗУЛЬТАТ:

Атрибут value используют для установки исходного цвета, его можно не указывать.

Поле ввода даты

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

Можно задать нижнюю и верхнюю границу диапазона дат атрибутами min и max.

Пример

<form>
    <label>
        Введите дату:
        <input type="date" name="my-date" min="2024-10-09">
    </label>
</form>

РЕЗУЛЬТАТ:

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

Для ввода нескольких адресов можно добавить атрибут multiple, при этом для разделения адресов используется запятая (,)

Пример

<form>
    <label>E-mail:
        <input type="email" multiple value="spam@htmlweb.ru, noreply@htmlweb.ru">
    </label>
</form>

РЕЗУЛЬТАТ:

Файл FILE

Позволяет передать сценарию любой файл. Максимальный размер файла в байтах задается скрытым полем max_file_size.

Пример

<form name="forma" enctype="multipart/form-data"
      method="post" action=http://htmlweb.ru/cgi-bin/file.cgi >
    <input type="hidden" name="max_file_size" value ="10000" >
    Фото: <input type="file" name="mURL" size="45">
</form>

РЕЗУЛЬТАТ:

Сценарий получения файла на PHP:

if (isset($mURL_type)) {
$nname='/usr/home/ftp/pub/'.$mURL_name;
if (move_uploaded_file($mURL,$nname)) {
print "Файл успешно загружен на сервер!";
mail("Admin@aaanet.ru",
"Поступил файл $nname",
"Поступил файл $nname",
"Content-Type: text/plain; charset=windows-1251");
} else
print "Ошибка! Файл не был загружен...";
exit;
}

Подробнее о приеме-передаче файлов на PHP

Для указания возможных типов файлов используется атрибут accept:
Для CSV files (.csv), используйте:

<input type="file" accept=".csv" />

Для Excel Files 2003-2007 (.xls), используйте:

<input type="file" accept="application/vnd.ms-excel" />

Для Excel Files 2010 (.xlsx), используйте:

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

Для Text Files (.txt) используйте:

<input type="file" accept="text/plain" />

Для Image Files (.png/.jpg/etc), используйте:

<input type="file" accept="image/*" />

Для HTML Files (.htm,.html), используйте:

<input type="file" accept="text/html" />

Для Video Files (.avi, .mpg, .mpeg, .mp4), используйте:

<input type="file" accept="video/*" />

Для Audio Files (.mp3, .wav, etc), используйте:

<input type="file" accept="audio/*" />

Для PDF Files, используйте:

<input type="file" accept=".pdf" />

Браузер Chrome понимает дополнительные атрибуты "webkitdirectory directory", указание которых у input позволяет выбирать целые папки:

<input type="file" name="img[]" multiple
       webkitdirectory directory
       placeholder="Выберите папку для загрузки" accept="*/*">

Скрытое поле HIDDEN

Это специальный (скрытый) тип текстового поля. Если один сценарий обрабатывает несколько разных форм, то в скрытом поле каждой формы можно указать идентификатор, который позволит определить, с какой формой вы имеете дело.

Пример

<form method="post" action="/cgi_bin/test.cgi">
    <input type="hidden" name="NumForm" value ="1">
    ...Другие элементы формы....
</form>
<form method="post" action="/cgi_bin/test.cgi">
    <input type="hidden" name="NumForm" value ="2">
    ...Другие элементы формы...
</form>

Браузер не отображает скрытое поле, хотя его можно обнаружить, если перевести броузер в режим просмотра HTML-файла и проанализировать текст Web-страницы. Скрытые поля полезны, если необходимо указать требуемую для сценария информацию, но при этом нежелательно, чтобы пользователь имел возможность вносить в нее изменения. Однако учтите, что сообразительный пользователь может сохранить вашу форму в файле, отредактировать его, а затем передать эту форму серверу в измененном виде. Поэтому не стоит полагаться на скрытые поля с целью создания какой-либо защиты.

Пример

<input type="hidden" name="FormVersion" value="1.2">

Сценарий получит переменную с именем FormVersion, которой будет присвоено значения 1.2. Эта информация может использоваться для определения способа обработки остальной информации, полученной от формы. Если пользователь изменит это значение, то программа сценария может повести себя неожиданным образом.

Поле ввода чисел NUMBER

Поле предназначено для ввода чисел. Дробная часть при вводе может отделяться как точкой (2.5), так и запятой (2,5). Если пользователь введет буквы, то отправить форму на сервер не удастся.

Пример

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

РЕЗУЛЬТАТ:

Можно задать минимальное, максимальное значение поля и шаг изменения числа. Значение шага может быть как целым, так и дробным, но должно быть больше 0. Если введенное в поле число не будет отвечать заданным ограничениям, то отправка на сервер не произойдет.

Пример

<input type="number" name="n3" min="0" max="20" step="2">
<input type="submit" value="Отправить">

РЕЗУЛЬТАТ:

Для задания любого шага используйте step="any".

Пример

<input type="number" min="-50" max="+50" step="any" value="10">
<input type="submit" value="Отправить">

РЕЗУЛЬТАТ:

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

Если нужно, чтобы стрелочки в поле number были всегда, задайте стиль:

<style>
    input[type="number"]::-webkit-inner-spin-button {
        opacity: 1;
    }
</style>

РЕЗУЛЬТАТ:

Если нужно убрать стрелочки в поле number, задайте стиль:

<style>
    input[type="number"] {
        -moz-appearance: textfield;
    }
    input[type="number"]::-webkit-inner-spin-button {
        display: none;
    }
</style>

РЕЗУЛЬТАТ:

Поле ввода пароля PASSWORD

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

Пример

<form>
    <input type="password" name="password" size=20>
</form>

РЕЗУЛЬТАТ:

Переключатель RADIO

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

По смыслу всегда предполагается, что в форме имеется несколько переключателей с одинаковым атрибутом name. У каждого из них свое значение атрибута value. Группа переключателей с одним и тем же именем в форме ведет себя таким образом, что только один из них может быть включенным. При передаче данных передается значение только выбранного переключателя.

Один переключатель из группы может быть изначально выбран по умолчанию с помощью атрибута checked.

Пример

<form>
    <label><input type="radio" name="Sex" value="Man" checked> Мужской</label><br>
    <label><input type="radio" name="Sex" value="Woman"> Женский</label>
</form>

РЕЗУЛЬТАТ:

Ползунок RANGE

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

Можно задать минимальное значение (по умолчанию 0), максимальное значение (по умолчанию 100), шаг изменения числа (по умолчанию 1) и текущее значение (по умолчанию среднее арифметическое минимального и максимального значений).

Пример

20 см <input type="range" min="20" max="120" value="20"> 120 см

РЕЗУЛЬТАТ:

Ползунок сам по себе не даёт пользователю представление, какое же число он выбрал. Поэтому здесь без JavaScript не обойтись.

Пример

Ширина <span id="w">20</span> см<br>
20 см
<input type="range" min="20" max="120" value="20"
       onchange="getElementById('w1').innerHTML=this.value;">
120 см

РЕЗУЛЬТАТ:

Поле range отображается разными браузерами по-разному.

Если хотите своё оформление, задайте стили для ползунка:

<style>
    /* Полоса прокрутки элемента range */
    input[type=range]::-webkit-slider-runnable-track {
        height: 4px;
        border: 0;
        background: #E4E4E4;
    }
    input[type=range]::-moz-range-track {
        height: 4px;
        border: 0;
        background: #E4E4E4;
    }
    input[type=range]::-ms-track {
        height: 4px;
        border: 0;
        background: #E4E4E4;
    }
    input[type=range]::-ms-fill-lower {
        height: 4px;
        border: 0;
        background: #E4E4E4;
    }
    input[type=range]::-ms-fill-upper {
        height: 4px;
        border: 0;
        background: #E4E4E4;
    }
    input[type=range]:focus {
        border: none !important;
    }
    /* Ползунок */
    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #00a33d;
        border: 0;
        cursor: pointer;
        margin-top: -6px;
    }
    input[type=range]::-moz-range-thumb {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #00a33d;
        border: 0;
        cursor: pointer;
    }
    input[type=range]::-ms-thumb {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #00a33d;
        border: 0;
        cursor: pointer;
    }
    input[type=range] {
        -webkit-appearance: none;
    }
    input[type=range]:focus {
        outline: none;
    }
</style>

РЕЗУЛЬТАТ:

Но победить до конца стили IE11 не удастся!

Кнопка RESET

Это кнопка очистки формы. При ее нажатии всем измененным элементам возвращается значение по умолчанию. Применяется она достаточно редко. Однако в некоторых случаях может быть весьма полезна.

Совет: осторожно относитесь к выбору надписи на кнопке RESET. Вполне наглядным (и, главное, интуитивно понятным даже чайнику из чайников) будет что-нибудь вроде «Очистить», «Начать сначала», «Удалить ввод» и т.п. В общем, надо, чтобы у пользователя не закралось и тени сомнения относительно предназначения этой клавиши.

Пример

<form>
    <input type="reset" value ="Сброс">
</form>

РЕЗУЛЬТАТ:

Кнопка SUBMIT

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

Атрибут onclick для кнопки SUBMIT практически не используется, так как лучше использовать обработчик событий onsubmit, заданный в теге <form>. Ведь чтобы передать введенные в форму данные, в общем случае совсем не обязательно нажимать на кнопку SUBMIT. Можно просто нажать на клавиатуре клавишу ENTER, находясь в любом текстовом поле ввода. При этом произойдет передача данных.

Пример

<form>
    <input type="submit" value="Принять заказ">
</form>

РЕЗУЛЬТАТ:

Атрибут value дает определенные преимущества при использовании более одной кнопки передачи данных. В этом случае на основании значения полученной переменной сценарий сможет определить, как обрабатывать полученную информацию далее.

Пример

<form>
    <input type="submit" name="bn" value="Вступить в клуб">
    <input type="submit" name="bn" value="Отказаться">
    <input type="submit" name="bn" value="Принять как наблюдателя">
</form>

РЕЗУЛЬТАТ:

Атрибут formnovalidate может быть применен, чтобы предотвратить проверку значений формы.

Пример

<form>
    <input type="text" required=""><br><br>
    <input type="submit" value="Проверка">
    <input type="submit" formnovalidate="" value="Не проверять">
</form>

РЕЗУЛЬТАТ:

Поле ввода TEXT

Текстовое поле ввода используется в формах наиболее часто. Более того, его можно по праву считать основным и главнейшим элементом форм. Этот тип используется тегом <input> по умолчанию, его можно не указывать, чтобы вывести текстовое поле. Однако, если возникнет необходимость задать стиль для селектора input[type="text"], то тогда атрибут type="text" пропускать нельзя.
Имя поля, задаваемое атрибутом name, всегда обязательно, так как базируясь именно на этом параметре, браузер передает сценарию пару имя=значение.

Пример

<style>
    input[type="text"] {
        padding: 4px 6px;
    }
    input[type="text"]:focus {
        box-shadow: 0 0 10px rgba(98, 98, 206, 0.5);
    }
</style>
<form>
    <input name="surname" value="Иванов" size="20" maxlength="20">
</form>

РЕЗУЛЬТАТ:

Текст «Иванов» помещается в созданное поле в качестве начального значения. Если пользователь не внесет изменений или нажмет кнопку RESET, то значение Иванов будет отправлено сценарию в качестве фамилии пользователя.

.
Прокомментировать/Отблагодарить

Тег input

Поиск по сайту

Тег <input>

Атрибуты тега <input>

Типы элемента INPUT

Кнопка BUTTON

Пример

Флажок CHECKBOX

Пример

Выбор цвета

Пример

Поле ввода даты

Пример

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

Пример

Файл FILE

Пример

Скрытое поле HIDDEN

Пример

Пример

Поле ввода чисел NUMBER

Пример

Пример

Пример

Поле ввода пароля PASSWORD

Пример

Переключатель RADIO

Пример

Ползунок RANGE

Пример

Пример

Кнопка RESET

Пример

Кнопка SUBMIT

Пример

Пример

Пример

Поле ввода TEXT

Пример