Элемент формы <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 |
Указывает, должен ли элемент <input> включать Автозаполнение. При вводе первых букв текста выводится список сохранённых ранее значений, из которого можно выбрать необходимое. |
||||||||||||||||||||||||||||||||||||||
autofocus |
=autofocus |
Указывает, что поле формы должно получить фокус после загрузки страницы. | ||||||||||||||||||||||||||||||||||||||
checked | =checked | Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа type="checkbox" и type="radio". | ||||||||||||||||||||||||||||||||||||||
disabled | =disabled | Указывает, что элемент <input> должен быть недоступен для взаимодействия с пользователем. Отключает возможность редактирования и копирования содержимого поля. | ||||||||||||||||||||||||||||||||||||||
form |
=form_id |
Указывает форму (определенную элементом <form>) к которой относится элемент
управления.
Значением является идентификатор формы (id) в этом же документе.
<form id="myForm" action=script.php"> |
||||||||||||||||||||||||||||||||||||||
formaction |
=URL |
Задает url файла, который будет обрабатывать введенные в поля данные при отправке
формы..
(Используется только для <input type="image"> и <input type="submit">). Атрибут переопределяет значение атрибута action самой формы.
<form action=script1.php"> |
||||||||||||||||||||||||||||||||||||||
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">
|
|||||||||||||||||||||||||||||||||||||||
=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 |
Устанавливает верхнее значение для ввода числа или даты.
<input type="number" id="number" name="amount" value="-3" |
||||||||||||||||||||||||||||||||||||||
min |
=number |
Определяет минимальное значение для ввода числа или даты.
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>Сегодня 22.11.2024. Укажите дату вылета на ближайшие семь дней.</p> <input type="date" min="2024-11-22" max="2024-11-29" value="2024-11-22"> <p><input type="submit" value="Отправить"> <input type="reset" value="Очистить"></p> </form> |
||||||||||||||||||||||||||||||||||||||
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="выражение">
: 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>
|
||||||||||||||||||||||||||||||||||||||
Регулярные выражения
|
||||||||||||||||||||||||||||||||||||||||
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: |
||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||
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 или более символов."> |
|||||||||||||||||||||||||||||||||||||||
radio | Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.
Пиво Чай Кофе |
|||||||||||||||||||||||||||||||||||||||
reset | Кнопка для возвращения данных формы в первоначальное значение (очищает поля формы). | |||||||||||||||||||||||||||||||||||||||
submit | Кнопка для отправки данных формы на сервер. | |||||||||||||||||||||||||||||||||||||||
text | Текстовое поле. Предназначено для ввода символов с помощью клавиатуры. | |||||||||||||||||||||||||||||||||||||||
color |
Виджет для выбора цвета.
<input type="color" name="color">
|
|||||||||||||||||||||||||||||||||||||||
date |
Поле для выбора календарной даты (дд.мм.гггг чч:мм). | |||||||||||||||||||||||||||||||||||||||
datetime-local |
Указание местной даты и времени. | |||||||||||||||||||||||||||||||||||||||
|
Для адресов электронной почты. | |||||||||||||||||||||||||||||||||||||||
number |
Ввод чисел.
Введите число от 0 до 10: |
|||||||||||||||||||||||||||||||||||||||
range |
Ползунок для выбора чисел в указанном диапазоне. | |||||||||||||||||||||||||||||||||||||||
search |
Поле для поиска. Поиск: |
|||||||||||||||||||||||||||||||||||||||
time |
Для времени. Время в 24-часовом формате по шаблону чч:мм. Укажите время: |
|||||||||||||||||||||||||||||||||||||||
url |
Для веб-адресов. Главная страница: |
|||||||||||||||||||||||||||||||||||||||
month |
Выбор месяца. Позволяет пользователю вводить год и номер месяца по шаблону гггг-мм. |
|||||||||||||||||||||||||||||||||||||||
week |
Выбор недели. Инструмент позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53. Укажите неделю: |
|||||||||||||||||||||||||||||||||||||||
value | =text | Определяет текст, отображаемый на кнопке, в поле или связанный текст.
На сервер отправляется пара «имя=значение», где имя задаётся атрибутом name элемента <input>, а значение - атрибутом value. В зависимости от типа элемента атрибут value выступает в следующей роли:
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> |
||||||||||||||||||||||||||||||||||||||
width |
=pixels |
Определяет ширину элемента (только для <input type="image">).
Обычно используется с элементом height.
<input type="image" src="img_submit.gif" width="50" height="30"> |