Атрибуты полей форм
Главный атрибут, который задает поле — это атрибут type. Он принимает значение, указывающее на тип поля. В предыдущем уроке описано, какие значения может принимать атрибут type и каким полям они соответствуют.
<input type="text">Следующий атрибут, который мы рассмотрели, также является обязательным и называется name. Его значение задает уникальное имя поля. Введенная пользователем информация передается обработчику в качестве значения переменной с именем поля. Атрибут name имеет значение для программистов, поэтому имя должно быть логичным.
<input type="text" name="name">Атрибут value
Атрибут value позволяет присвоить элементу управления значение по умолчанию. Введя в поле значение по умолчанию, можно пояснить пользователю, какие данные и в каком формате вы хотите здесь видеть. Для флажков и радиокнопок определяет значение, которое будет передано на сервер, если кнопка выбрана. Оно будет состоять из имени кнопки и ее значения.
Пример: Атрибут value
- Результат
- HTML-код
- Попробуй сам »
<form action="">
Ваше имя:<br>
<input type="text" name="firstname" value="Иван"><br>
Ваша фамилия:<br>
<input type="text" name="lastname">
</form>Атрибут disabled
Атрибут disabled весьма полезен для ограничения доступа к некоторым полям формы на основании ранее введенных данных. Чтобы запретить изменение данных, в любое поле можно добавить атрибут disabled. При этом поле становится неактивным, т.е. щелчки на нем не приводят ни к каким действиям.
Пример: Атрибут disabled
- Результат
- HTML-код
- Попробуй сам »
<form action="">
<p>Baшa родная планета:</p>
<input type="text" name="planets" value="3емля" disabled>
<input type="submit">
</form>Атрибут readonly
Атрибут readonly не позволяет пользователю изменять значения элементов формы, но, в отличие от атрибута disabled, такие поля их можно выделять. Это позволяет разработчикам устанавливать значения элементов формы в зависимости
от ранее введенных данных с помощью сценариев.
Пример: Прокручиваемый список
- Результат
- HTML-код
- Попробуй сам »
<form action="">
<p>Заключен договор:</p>
<input type="text" name="contract" value="Договор №1" readonly>
<input type="submit">
</form>Атрибут size
Атрибут size определяет ширину поля ввода текста (в качестве единицы измерения выступает количество видимых символов). Значение по умолчанию — 20.
Пример: Атрибут size
- Результат
- HTML-код
- Попробуй сам »
<form action="">
Ваше имя:<br>
<input type="text" name="firstname" value="Иван"><br>
Ваша фамилия:<br>
<input type="text" name="lastname" size="40">
</form>Атрибут maxlength
Атрибут maxlength определяет количество символов, которое пользователь может ввести в поле ввода. При превышении этого количества браузер отреагирует на попытку ввода нового символа звуковым сигналом и не даст ввести очередной символ. Не следует путать этот атрибут с атрибутом size, который определяет количество видимых в поле символов. Например при запросе года вы можете ограничить количество символов, установив значение атрибута maxlength равным 4.
Пример: Атрибут maxlength
- Результат
- HTML-код
- Попробуй сам »
<form action="">
Ваше имя:<br>
<input type="text" name="firstname" value="Макс"><br>
Ваш год рождения:<br>
<input type="text" name="lastname" maxlength="4">
</form>HTML5 Атрибуты
Атрибут placeholder
Первое усовершенствование, которое HTML5 вносит в Web-формы — это возможность использования замещающего текста (placeholder text) в поле ввода. Замещающий текст отображается внутри поля ввода до тех пор, пока поле не имеет фокуса ввода. Как только пользователь сфокусируется на поле и начнет ввод текста, замещающий текст исчезает.
Атрибут autofocus
Атрибут autofocus делает именно то, о чем говорит его название: как только страница загружается, он передает фокус ввода в конкретное поле ввода. Чтобы механизм автофокуса работал надежно, на странице должен быть только один атрибут autofocus. Если таких элементов будет несколько, браузер размещает курсор в последнем поле автофокуса.
Атрибуты min и mах
Атрибуты min и mах позволяют задать нижнюю и верхнюю границы для значений, которые могут вводиться в числовое
поле формы, например, типы поля ввода — number, range, time, date, datetime, datetime-local, month, time или week.
Атрибут step
Атрибут step можно использовать с числовым значением ввода, чтобы определить точность возможных вводимых значений. По умолчанию приращение равно 1, но ему также можно присвоить любое числовое значение.
Атрибут required
Атрибут required указывает, что поле элемента формы обязательно к заполнению пользователем. Когда пользователь отправляет форму, браузер проверяет, не оставлены ли пустыми все обязательные поля. При необходимости он остановит отправку данных и выведет сообщение об ошибке.
Это можно легко реализовать, добавляя атрибут required к элементам <input>, <select> или <textarea>.
Атрибут autocomplete
По умолчанию для всех полей формы включено автозаполнение (autocomplete=»on»). В этом случае браузер помнит ваши пароли и благодаря автозаполнению поможет быстро зайти на посещаемые вами сайты. Однако если указать для атрибута autocomplete значение off, то такой возможности не будет. Вы можете отключить атрибут autocomplete как на уровне отдельных полей ввода, так и на уровне формы. Во втором случае допускается включить этот атрибут для отдельного поля, установив autocomplete=»on».
Атрибут pattern
Спецификация HTML5 упростила процесс проверки формы, представив новые типы поля <input>: email, url и tel. Данные значения обеспечивают автоматическую валидацию. При любом несовпадении формата ввода данные типы поля будут выдавать ошибку, предотвращая отправку формы.
Атрибут pattern позволяет задавать наши собственные правила валидации значения поля <input> при помощи Регулярных Выражений (RegEx). И если значение введенное пользователем в поле не совпадает с заданным шаблоном, то выскачет ошибка.
В нашем примере значение поля ввода логина должно содержать определенную последовательность латинских букв нижнего регистра и цифр: 3 буквы + 3 цифры. Обратите внимание на использование атрибута title для определения содержательного описания данных, вводимых пользователем. Теперь при попытке ввести данные, не соответствующие регулярному выражению, выводится сообщение об ошибке, в которое включается содержимое атрибута title.
Атрибут novalidate
Атрибут novalidate (от англ. «no validate» — «без проверки») отключает проверку (отправляемых на сервер) данных формы на корректность. Атрибут novalidate можно установить только к элементу form.
Атрибут formnovalidate
Атрибут formnovalidate (от англ. «form no validate» — «не проверять форму») отключает проверку данных формы (перед отправкой на сервер) на корректность. Атрибут formnovalidate может быть применен к элементам <input> с типом submit или image.
Атрибут form
Атрибут form связывает элемент формы с элементом <form>.
Это нужно в том случае, когда элемент формы лежит вне элемента <form>, но должен быть отправлен на сервер вместе с содержимым этого элемента <form>. Значение атрибута form должно быть равно атрибуту id элемента <form> в этом же документе.
Атрибут formaction
Атрибут formaction (от англ. «form action» — «действие формы») определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними требуемые действия. Атрибут formaction по своему действию аналогично атрибуту action элемента <form>.
Атрибут formaction может применяться только с кнопкой отправки или изображения (type=»submit» или type=»image»). При отправке формы браузер сначала проверяет наличие атрибута formaction и если тот отсутствует, он продолжает искать в форме атрибут action.
Атрибут formenctype
Атрибут / параметр
Атрибут formenctype указывает способ кодирования данных формы, отправляемых на сервер (только для форм с методом передачи данных method=»POST»). Атрибут formenctype отменяет атрибут enctype элемента <form>.
Атрибут formaction может применяться только с кнопкой отправки или изображения (type=»submit» или type=»image»).
Синтаксис:
<input type="submit" formenctype="application/x-www-form-urlencoded | multipart/form-data | text/plain">Значения атрибута formenctype
| Значение | Описание |
|---|---|
| application/x-www-form-urlencoded | Кодирует данные формы отправляемые на сервер. Перед отправкой данных на сервер браузер кодирует все данные формы и объединяет их в одну строку, после чего полученную строку отправляет на сервер. Символы кодируемые браузером:
|
| multipart/form-data | Данные не кодируются. Это значение применяется при отправке файлов. |
| text/plain | Пробелы заменяются знаком +, буквы и другие символы не кодируются. |
Атрибут formmethod
Атрибут formmethod указывает метод отправки данных формы на сервер. Атрибут formmethod переопределяет атрибут method элемента <form>.
Атрибут formaction может применяться только с кнопкой отправки или изображения (type=»submit» или type=»image»).
Значение атрибута formmethod по умолчанию — get.
Синтаксис:
<input formmethod="get|post">Значения атрибута formmethod
| Значение | Описание |
|---|---|
| get | Объединяет данные формы в одну строку, присоединяет полученную строку к URL-адресу обработчика формы (указывается в атрибуте «action» или «formaction») и с помощью полученного URL-адреса передаёт данные формы на сервер. Достоинства и недостатки:
|
| post | Браузер устанавливает связь с сервером, на котором находится обработчик данных формы (URL-адрес обработчика указывается в атрибуте «action» или «formaction») и после установки связи передаёт (в отдельном сеансе связи) данные на сервер. Достоинства и недостатки:
|
Атрибут formtarget
Атрибут formtarget определяет окно или фрейм в которое будет загружаться результат, представленный в виде HTML-документа. Атрибут formtarget переопределяет атрибут target элемента <form>.
Атрибут formtarget может применяться только с кнопкой отправки или изображения (type=»submit» или type=»image»).
В качестве значения используется имя окна или фрейма, заданное атрибутом name.
Значение атрибута formtarget по умолчанию — _self.
Синтаксис:
<input type="submit" formtarget="имя окна | _blank | _self | _parent | _top">Значения атрибута formtarget
| Значение | Описание |
|---|---|
| _blank | Загружает страницу в новое окно браузера |
| _self | Загружает страницу в текущее окно |
| _parent | Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self |
| _top | Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self |
| имя окна | Открывает документ во фрейме с указанным уникальным именем |
Атрибут multiple
Атрибут multiple позволяет пользователям выбрать сразу несколько вариантов ответа (не забудьте написать предупреждение об этой возможности). Multiple — это булев атрибут, значение для него не указывается. Пользователи компьютеров под управлением операционной системы Windows могут выбрать несколько элементов, нажав и удерживая клавишу Ctrl, а пользователи компьютеров Маc — с помощью клавиши Cmd.
Атрибут multiple может применяться с элементом <input> типа email и file.
Синтаксис:
<input type="file" name="image" multiple>Атрибуты тега <input>
| Атрибут | Значение / описание |
|---|---|
| autocomplete | Разрешает или запрещает автозаполнение текстового поля формы: on — включает автозаполнение текстовых полей форм; off — отключает автозаполнение текстовых полей форм. |
| autofocus | Автоматически переводит фокус для полей формы при загрузке страницы. |
| checked | Делает чекбокс [type=»checkbox»] или радиокнопку [type=»radio»] активной. Активных чекбоксов может быть несколько. В группе с одним name должна быть активной только одна радиокнопка. |
| disabled | Отключает возможность редактирования и копирования содержимого поля. |
| form | Связывает поле с формой по её идентификатору. Такая связь необходима в случае, когда поле располагается за пределами элемента <form>. Значение атрибута form должно быть равно атрибуту id элемента <form> в этом же документе. |
| formaction | Определяет url-адрес обработчика формы. Задается только для полей типа type=»submit» и type=»image». Атрибут переопределяет значение атрибута action самой формы. |
| formenctype | Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла <input type=»file»>. Переопределяет значение атрибута enctype формы. Задается только для полей типа type=»submit» и type=»image». Значения: application/x-www-form-urlencoded — значение по умолчанию. Все символы кодируются перед отправкой (пробелы заменяются на символ +; символы (кроме цифр и латинских букв) преобразуются в сочетание знака % (проценты) и соответствующий ASCII код символа; разрыв строки преобразуется в символы %0D%0A);multipart/form-data — символы не кодируются; text/plain — пробелы заменяются на символ +, а специальные символы не кодируются. |
| formmethod | Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа type=»submit» и type=»image». Переопределяет значение атрибута method формы. Варианты: get — значение по умолчанию. Данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер: URL?имя=значение&имя=значение post — данные формы отправляются в виде http-запроса. |
| formnovalidate | Отключает проверку данных формы (перед отправкой на сервер) на корректность. Атрибут formnovalidate может быть применен к элементам <input> с типом submit или image. Переопределяет значение атрибута novalidate формы. |
| formtarget | Определяет окно или фрейм в которое будет загружаться результат, полученный после отправки формы. Переопределяет атрибут target элемента <form>. Может применяться только с кнопкой отправки или изображения (type=»submit» или type=»image»). В качестве значения используется имя окна или фрейма, заданное атрибутом name. Значения: _blank — загружает ответ в новое окно/вкладку; _self — загружает ответ в то же окно (значение по умолчанию); _parent — загружает ответ в родительский фрейм; _top — загружает ответ во весь экран; framename — загружает ответ во фрейм с указанным именем. |
| height | Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа type=»image», например, <input type=»image» src=»img_primer.png» height=»40″>. Рекомендуется одновременно устанавливать как высоту height, так и ширину width поля. |
| list | Атрибут list и ассоциированный элемент <datalist> позволяют предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле. Значение, заданное для атрибута list, аналогично идентификатору id элемента <datalist>. |
| max и min | Позволяют ограничивать диапазон вводимых значений; форма не будет отправлена, если значение меньше min или больше mах. Значение атрибута может содержать целое или дробное число. Используются со следующими типами полей: number, range, date, datetime, datetime-local, month, time и week. |
| maxlength | Определяет максимальное количество символов, которое пользователь может ввести в поле ввода. Значение по умолчанию 524288 символов. |
| multiple | Позволяет пользователям выбрать сразу несколько вариантов ответа. Multiple — это булев атрибут, значение для него не указывается. Пользователи компьютеров под управлением операционной системы Windows могут выбрать несколько элементов, нажав и удерживая клавишу Ctrl, а пользователи компьютеров Маc — с помощью клавиши Cmd. Применяется в отношении файлов (type=»file») и адресов электронной почты (type=»email»). |
| name | Определяет имя, которое будет использоваться для доступа к элементу <form>. Значение этого атрибута служит для идентификации элемента формы и отправляется на сервер вместе с введенными данными. |
| pattern | Позволяет задавать собственные правила валидации значения поля <input> при помощи Регулярных Выражений (RegEx). И если значение введенное пользователем в поле не совпадает с заданным шаблоном, то выскачет ошибка. |
| placeholder | Содержит замещающий текст (подсказку), который отображается внутри поля ввода до тех пор, пока пользователь не начнет ввод текста, после чего замещающий текст исчезает. |
| readonly | Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута. |
| required | Указывает, что поле элемента формы обязательно к заполнению пользователем. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута. |
| size | Задает видимую ширину поля в символах. Значение по умолчанию — 20. Если символов введено будет больше, чем задано в значении size, появится дополнительная полоса прокрутки. Работает со следующими типами полей: text, search, tel, url, email и password. |
| src | Задает url-адрес изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля <input type=»image»>. |
| step | Используется для элементов, предполагающих ввод числовых значений, задает шаговые приращения (величину инкремента) в процессе регулировки диапазона. |
| value | Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не указывается для полей типа file. |
| width | Значение атрибута содержит количество пикселей. Задает ширину полей формы. Применяется только с элементом <input> типа type=»image»> |
Задачи
-
Текст-подсказка
Добавьте в поле ввода текст-подсказку, которая исчезает когда пользователь начинает вводить текст, а затем, при устaновке фокуса на друтом элементе, снова появляется.
Задача HTML:
Реши сам »
HTML-код: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form action="action_form.php" method="POST"> <input type="text" name="firstname"> <input type="submit"> </form> </body>
</html>
-
Установка фокуса
Сделайте так, чтобы в загружаемой форме поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения.
Задача HTML:
Реши сам »
Поиск по сайту:
HTML-код: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form> <label for="search">Поиск по сайту:</label> <input id="search" name="search" type="search" placeholder="Поиск..."> </form> </body>
</html>
-
Поле ввода обязательно для заполнения
Дополните HTML-код так, чтобы в случае если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение.
Задача HTML:
Реши сам »
Введите ваше имя:
HTML-код: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form action="action_form.php" method="POST"> <p>Введите ваше имя:</p> <input type="text" name="firstname"> <input type="submit"> </form> </body>
</html>
-
Отключенное поле
Доработайте HTML-код так, чтобы в результате у пользователя не было возможности редактирования и копирования содержимого текстового поля формы.
Задача HTML:
Реши сам »
Ваше имя:
HTML-код: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form action="action_form.php" method="POST"> <p>Ваше имя:</p> <input type="text" name="firstname" value="Макс"> <input type="submit"> </form> </body>
</html>
Тег <input> (от англ. input — ввод) является одним из разносторонних элементов формы и позволяет создавать разные части интерфейса и обеспечивать взаимодействие с пользователем.
Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.
Основной атрибут <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file), кнопка с изображением (image) и др. Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено ещё более десятка новых атрибутов.
Формы
- button
- datalist
- fieldset
- form
- input
- label
- legend
- meter
- optgroup
- option
- output
- progress
- select
- textarea
Синтаксис¶
Закрывающий тег не требуется.
Атрибуты¶
accept- Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
alt- Альтернативный текст для кнопки с изображением.
autocomplete- Включает или отключает автозаполнение.
autofocus- Устанавливает фокус в поле формы.
checked- Предварительно активированный переключатель или флажок.
dirname- Параметр, который передаёт на сервер направление текста.
disabled- Блокирует доступ и изменение элемента.
form- Связывает поле с формой по её идентификатору.
formaction- Определяет адрес обработчика формы.
formenctype- Устанавливает способ кодирования данных формы при их отправке на сервер.
formmethod- Сообщает браузеру каким методом следует передавать данные формы на сервер.
formnovalidate- Отменяет встроенную проверку данных на корректность.
formtarget- Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
list- Указывает на список вариантов, которые можно выбирать при вводе текста.
max- Верхнее значение для ввода числа или даты.
maxlength- Максимальное количество символов разрешённых в тексте.
min- Нижнее значение для ввода числа или даты.
minlength- Минимальное количество символов разрешённых в тексте.
multiple- Позволяет загрузить несколько файлов одновременно.
name- Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
pattern- Устанавливает шаблон ввода.
placeholder- Выводит подсказывающий текст.
readonly- Устанавливает, что поле не может изменяться пользователем.
required- Обязательное для заполнения поле.
size- Ширина текстового поля.
src- Адрес графического файла для поля с изображением.
step- Шаг приращения для числовых полей.
type- Сообщает браузеру, к какому типу относится элемент формы.
value- Значение элемента.
Также для этого элемента доступны универсальные атрибуты.
accept¶
Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. Тип файла указывается как MIME-тип, при нескольких значениях они перечисляются через запятую. Если файл не подходит под установленный фильтр, он не показывается в окне выбора файлов.
Применяется к полю для отправки файла (<input type="file">).
Поддержка браузерами
Can I Use input-file-accept? Data on support for the input-file-accept feature across the major browsers from caniuse.com.
Синтаксис
<input type="file" accept="<MIME-тип>" />
Значения
Имя MIME-типа в любом регистре, несколько значений перечисляются через запятую.
В HTML5 также допустимо в качестве значения указывать audio/* для выбора всех звуковых файлов, video/* для видеофайлов и image/* для всех графических файлов.
Список MIME-типов файлов.
Значение по умолчанию
Нет.
alt¶
Атрибут alt устанавливает альтернативный текст для поля с изображением. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений, а также предназначен для поисковых систем.
Синтаксис
<input type="image" alt="<текст>" />
Значения
Любая подходящая текстовая строка.
Значение по умолчанию
Нет.
autocomplete¶
Этот атрибут помогает заполнять поля форм текстом, который был введён в них ранее. Значения сохраняет и подставляет браузер, при этом автозаполнение по соображениям безопасности может отключаться пользователем в настройках браузера и не может в таком случае управляться атрибутом autocomplete.
При вводе первых букв текста выводится список сохранённых ранее значений, из которого можно выбрать необходимое.
Автозаполнение конкретного поля формы привязывается к его атрибуту name и при смене значения теряется.
Синтаксис
<input type="text" autocomplete="on | off" />
<input type="password" autocomplete="on | off" />
<input type="email" autocomplete="on | off" />
<input type="search" autocomplete="on | off" />
<input type="url" autocomplete="on | off" />
<input type="tel" autocomplete="on | off" />
Значения
on- Включает автозаполнение текста.
off- Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт), а также редко вводимых или уникальных данных (капча).
Значение по умолчанию
Зависит от настроек браузера.
autofocus¶
Автоматически устанавливает фокус в поле формы. В таком поле можно сразу набирать текст без явного щелчка по нему курсором мыши.
Синтаксис
Значения
Нет.
Значение по умолчанию
По умолчанию атрибут autofocus не установлен.
checked¶
Этот атрибут определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей (radiobutton) может быть отмечен только один элемент группы, для флажков (checkbox) допустимо пометить хоть все элементы.
Синтаксис
<input type="radio" checked />
<input type="checkbox" checked />
Значения
Нет.
Значение по умолчанию
По умолчанию этот атрибут выключен.
dirname¶
При наличии атрибута dirname на сервер отправляется пара имя/значение, где имя задаётся атрибутом dirname, а значение подставляется браузером. Для текста, идущего слева направо, значение будет ltr, а для текста справа налево (иврита, к примеру) значение будет rtl.
Синтаксис
<input type="text" dirname="<строка>" />
<input type="search" dirname="<строка>" />
Значения
Произвольная текстовая строка, которая служит именем параметра. Чтобы показать, что этот параметр указывает направление текста, обычно в конце строки добавляют .dir.
Значение по умолчанию
Нет.
disabled¶
Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов. Заблокированное в поле значение не передаётся на сервер.
Синтаксис
Значения
Нет.
Значение по умолчанию
По умолчанию этот атрибут выключен.
form¶
Связывает поле с формой по её идентификатору. Такая связь необходима в случае, когда поле располагается за пределами <form>, например, при создании её программно или по соображениям дизайна.
Синтаксис
<input type="<тип>" form="<идентификатор>" />
<form id="<идентификатор>">...</form>
Значения
Идентификатор формы (значение атрибута id элемента <form>).
Значение по умолчанию
Нет.
formaction¶
Определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction по своему действию аналогичен атрибуту action элемента <form>.
Синтаксис
<input type="submit" formaction="<адрес>" />
Значения
Нет.
formenctype¶
Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла (input type="file"). Этот атрибут по своему действию аналогичен атрибуту enctype элемента <form>, при совместном использовании formenctype и enctype последний игнорируется.
Синтаксис
<input
type="submit"
formenctype="application/x-www-form-urlencoded | multipart/form-data | text/plain"
/>
Значения
application/x-www-form-urlencoded- Вместо пробелов ставится
+, символы вроде русских букв кодируются их шестнадцатеричными значениями (например,%D0%9F%D0%B5%D1%82%D1%8FвместоПетя). multipart/form-data- Данные не кодируются. Это значение применяется при отправке файлов.
text/plain- Пробелы заменяются знаком
+, буквы и другие символы не кодируются.
Значение по умолчанию
application/x-www-form-urlencoded
formmethod¶
Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.
Синтаксис
<input type="submit" formmethod="get | post" />
Значения
Различают два метода — GET и POST, которые задаются ключевыми словами get и post.
get- Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар «
имя=значение», которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ&). Полный адрес к примеру будетhttp://site.ru/doc/?name=Vasya&password=pup. Объём данных в методе ограничен 4 Кб. post- Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.
Значение по умолчанию
get
formnovalidate¶
Отменяет встроенную проверку данных введённых пользователем в форме на корректность перед отправкой формы. Такая проверка делается браузером автоматически для полей <input type="email">, <input type="url">, а также при наличии атрибута pattern или required у элемента <input>.
Синтаксис
<input type="submit" formnovalidate />
Значения
Нет.
Значение по умолчанию
По умолчанию этот атрибут выключен.
formtarget¶
Определяет имя фрейма, в которое будет загружаться результат, возвращаемый обработчиком формы в виде HTML-документа.
Синтаксис
<input
type="submit"
formtarget="<имя фрейма> | _blank | _self | _parent | _top"
/>
Значения
В качестве значения используется имя фрейма, заданное атрибутом name. Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных имен можно указывать следующие.
_blank- Загружает страницу в новую вкладку браузера.
_self- Загружает страницу в текущую вкладку.
_parent- Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как
_self. _top- Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как
_self.
Значение по умолчанию
_self
list¶
Указывает на список вариантов, созданный с помощью элемента <datalist>, которые можно выбирать при наборе текста. Изначально этот список скрыт и становится доступным при получении полем фокуса.
Синтаксис
<input list="<идентификатор>" />
<datalist id="<идентификатор>">
<option value="Текст1"></option>
<option value="Текст2"></option>
</datalist>
Значения
Имя идентификатора элемента <datalist>.
Значение по умолчанию
Нет.
max¶
Устанавливает верхнее значение для ввода числа или даты в поле формы.
Синтаксис
<input type="number" max="<число>" />
<input type="range" max="<число>" />
<input type="date" max="<дата>" />
Значения
Целое положительное или отрицательное число (для type="number", type="range").
Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type="date".
Значение по умолчанию
Нет.
maxlength¶
Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.
Синтаксис
<input type="text" maxlength="<число>" />
<input type="password" maxlength="<число>" />
Значения
Любое целое положительное число.
Значение по умолчанию
Ввод символов не ограничен.
min¶
Устанавливает нижнее значение для ввода числа или даты в поле формы.
Синтаксис
<input type="number" min="<число>" />
<input type="range" min="<число>" />
<input type="date" min="<дата>" />
Значения
Целое положительное или отрицательное число (для type="number", type="range").
Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type="date".
Значение по умолчанию
Нет.
minlength¶
Задаёт минимальное число символов, которое может быть введено пользователем в текстовом поле. Если число символов меньше указанного значения, то браузер выдаёт сообщение об ошибке и не отправляет форму.
Синтаксис
<input type="text" minlength="<число>" />
<input type="password" minlength="<число>" />
Значения
Любое целое положительное число.
Значение по умолчанию
Нет.
multiple¶
Атрибут multiple позволяет указывать одновременно несколько файлов в поле для загрузки файлов, а также несколько адресов электронной почты. При использовании двух и более почтовых адресов они должны перечисляться через запятую.
Синтаксис
<input type="file" multiple />
<input type="email" multiple />
Значения
Нет.
Значение по умолчанию
По умолчанию атрибут multiple выключен.
name¶
Определяет уникальное имя элемента формы. Как правило, это имя используется при отправке данных на сервер или для доступа к введённым данным поля через скрипты.
Синтаксис
Значения
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в атрибуте name.
Значение по умолчанию
Нет.
pattern¶
Указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Если присутствует атрибут pattern, то форма не будет отправляться, пока поле не будет заполнено правильно.
Поддержка браузерами
Can I Use input-pattern? Data on support for the input-pattern feature across the major browsers from caniuse.com.
Синтаксис
<input type="email" pattern="<выражение>" />
<input type="tel" pattern="<выражение>" />
<input type="text" pattern="<выражение>" />
<input type="search" pattern="<выражение>" />
<input type="url" pattern="<выражение>" />
Значения
Некоторые типовые регулярные выражения перечислены в табл. 1.
Табл. 1. Регулярные выражения
| Выражение | Описание |
|---|---|
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¶
Выводит текст внутри поля формы, который исчезает при получении фокуса или при наборе текста. Обычно отображается серым цветом.
Поддержка браузерами
Can I Use input-placeholder? Data on support for the input-placeholder feature across the major browsers from caniuse.com.
Синтаксис
<input placeholder="<текст>" />
Значения
Текстовая строка. Если внутри строки предполагается пробел, её необходимо брать в двойные или одинарные кавычки.
Значение по умолчанию
Нет.
readonly¶
Когда к элементу <input> добавляется атрибут readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов и данные отправляются на сервер.
Синтаксис
<input type="text" readonly />
<input type="password" readonly />
Значения
Нет.
Значение по умолчанию
По умолчанию этот атрибут выключен.
required¶
Устанавливает поле формы обязательным для заполнения перед отправкой формы на сервер. Если обязательное поле пустое, браузер выведет сообщение об ошибке, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.
Синтаксис
Значения
Нет.
Значение по умолчанию
По умолчанию атрибут required выключен.
size¶
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задаётся количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.
Синтаксис
<input type="text" size="<число>" />
<input type="password" size="<число>" />
Значения
Любое целое положительное число.
Значение по умолчанию
20
src¶
Адрес графического файла, который будет отображаться на веб-странице в поле с изображением. Наиболее популярны файлы в формате PNG и JPEG.
Синтаксис
<input type="image" src="<адрес>" />
Значения
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
Нет.
step¶
Устанавливает шаг изменения числа для ползунков и полей ввода чисел.
Синтаксис
<input type="number" step="<число>" />
<input type="range" step="<число>" />
Значения
Любое целое или дробное число.
Значение по умолчанию
1
type¶
Сообщает браузеру, к какому типу относится элемент формы.
Поддержка браузерами
email, tel, url:
Can I Use input-email-tel-url? Data on support for the input-email-tel-url feature across the major browsers from caniuse.com.
color:
Can I Use input-color? Data on support for the input-color feature across the major browsers from caniuse.com.
range:
Can I Use input-range? Data on support for the input-range feature across the major browsers from caniuse.com.
number:
Can I Use input-number? Data on support for the input-number feature across the major browsers from caniuse.com.
search:
Can I Use input-search? Data on support for the input-search feature across the major browsers from caniuse.com.
date, time, datetime:
Can I Use input-datetime? Data on support for the input-datetime feature across the major browsers from caniuse.com.
Синтаксис
<input
type="button|checkbox|file|hidden|image|password|radio|reset|submit|text"
/>
Значения
Значения type:
button- Кнопка.
checkbox- Флажки. Позволяют выбрать более одного варианта из предложенных.
file- Поле для ввода имени файла, который пересылается на сервер.
hidden- Скрытое поле. Оно никак не отображается на веб-странице.
image- Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
password- Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio- Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.
reset- Кнопка для возвращения данных формы в первоначальное значение.
submit- Кнопка для отправки данных формы на сервер.
text- Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.
В HTML5 добавлены новые значения:
color- Виджет для выбора цвета.
date- Поле для выбора календарной даты.
datetime- Указание даты и времени.
datetime-local- Указание местной даты и времени.
email- Для адресов электронной почты.
number- Ввод чисел.
range- Ползунок для выбора чисел в указанном диапазоне.
search- Поле для поиска.
tel- Для телефонных номеров.
time- Для времени.
url- Для веб-адресов.
month- Выбор месяца.
week- Выбор недели.
Значение по умолчанию
text
value¶
Определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. На сервер отправляется пара «имя=значение», где имя задаётся атрибутом name элемента <input>, а значение — атрибутом value.
В зависимости от типа элемента атрибут value выступает в следующей роли:
- для кнопок (
input type="button | reset | submit") устанавливает текстовую надпись на них; - для текстовых полей (
input type="password | text") указывает предварительно введённую строку. Пользователь может стирать текст и вводить свои символы, но при использовании в форме кнопки Reset пользовательский текст очищается и восстанавливается введённый в атрибутеvalue; - для флажков и переключателей (
input type="checkbox | radio") уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно установить, какой пункт выбрал пользователь. - для файлового поля (
input type="file") не оказывает влияние.
Синтаксис
<input value="<текст>" />
Значения
Любая текстовая строка.
Значение по умолчанию
Нет.
Значения ARIA role¶
<input type=button>—role=button<input type=checkbox>—role=checkbox<input type=email>—role=textbox<input type=image>—role=button<input type=number>—role=spinbutton<input type=radio>—role=radio<input type=range>—role=slider<input type=reset>—role=button<input type=search>—role=searchbox<input type=submit>—role=button<input type=tel>—role=textbox<input type=text>—role=textbox<input type=text, search, tel, url, или email с атрибутом list>—role=combobox<input type=url>—role=textbox
Спецификации¶
- WHATWG HTML Living Standard
- HTML5
- HTML 4.01 Specification
Описание и примеры¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>INPUT</title>
</head>
<body>
<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="browser" value="ie" />
Internet Explorer<br />
<input type="radio" name="browser" value="opera" />
Opera<br />
<input
type="radio"
name="browser"
value="firefox"
/>
Firefox<br />
</p>
<p>
Комментарий<br />
<textarea
name="comment"
cols="40"
rows="3"
></textarea>
</p>
<p>
<input type="submit" value="Отправить" />
<input type="reset" value="Очистить" />
</p>
</form>
</body>
</html>
Ссылки¶
- Тег
<input>MDN (рус.)
Свойства «Условие на значение» и «Сообщение об ошибке»
Данные
свойства будут рассматриваться вместе,
так как они связанны между собой.
Условие
на значение – свойство определяет
ограничение, накладываемое на вводимые
в это поле данные. При несоответствии
вводимых данных указанному условию
выдается сообщение об ошибке.
Сообщение
об ошибке – свойство определяет то
сообщение, которое будет выдаваться
пользователю, если при вводе данных не
соблюдается условие, указанное в
предыдущем свойстве.
Примечание:
Если это свойство не указано, будет
выдано стандартное сообщение об ошибке.
Приведем
несколько примеров условий на значение
и соответствующих сообщений об ошибке.
|
Условие на значение |
Сообщение об ошибке |
|
<>0 |
Введите значение, отличное от нуля |
|
0 Or >100 |
Значение должно быть 0, либо больше |
|
>=1 And <=10 |
Введите значение от 1 до 10 |
|
Like «К???» |
Значение должно содержать четыре |
|
Like «[0-9][0-9][0-9]» |
Значение должно состоять из трех цифр |
|
<=Date() |
Дата должна быть не позднее сегодняшней |
|
>=#1.01.1997# |
Дата должна быть после 1-го января 1997 |
Задания:
Закройте
таблицу Студенты.
Откройте
таблицу Оценка в режиме
Конструктора.
Установите
для поля Оценка свойство
Условие на значение –
>=2 And <=5
(больше или равно 2 и меньше или равно
5) и свойство Сообщение об ошибке
– Оценка должна быть в интервале
от 2 до 5 (см. рисунок).
Перейдите
в режим Таблицы.
Нажмите
кнопку Да.
Попытайтесь
ввести оценку 6 в любой записи
таблицы. Если вы все сделали правильно,
то появится сообщение об ошибке.
Свойство «Формат поля»
Формат
поля предназначен для вывода текста,
чисел и дат в нужном виде на экран или
печать.
Примечание:
Формат поля не влияет на способ
сохранения информации в таблице.
Для
числовых, денежных, логических полей,
для полей типа Дата/время и Счетчик
существуют наборы стандартных (встроенных)
форматов отображения. Кроме того, для
этих типов полей пользователь может
задать собственные (специальные) форматы.
Для
текстовых полей, полей MEMO
и гиперссылки встроенных форматов нет,
и для них можно задать только собственные
форматы.
Для
полей объектов OLE форматы
отображения данных определить невозможно.
Специальные
форматы поля задаются с помощью одного
или нескольких спецсимволов, некоторые
из которых являются общими для всех
типов данных, а другие отличаются для
разных типов полей (текстовых, числовых,
дата и др.)
Для
всех типов данных можно использовать
следующие символы:
-
«абв»
– символы, заключенные в кавычки,
печатаются без изменения;– выводит следующий символ, как
константу;[цвет]
– задает цвет, название которого
указано в скобках. Допустимые имена
цветов: (Черный), (Синий), (Зеленый),
(Бирюзовый), (Красный), (Лиловый),
(Желтый), (Белый).
Для
текстовых типов данных применяют
следующие спецсимволы:
-
@
– обязательный текстовый символ или
пробел;&
– необязательный текстовый символ;
<
– преобразует все символы в строчные
(маленькие);>
– преобразует все символы в прописные
(заглавные).
Специальные
форматы для текстовых полей могут
состоять из двух разделов, разделенных
точкой запятой (;). В первом разделе
задается собственно формат отображения
данных, во втором разделе – задается
значение, которое будет отображаться
в поле, если в это поле ничего не введено.
Задания:
Откройте
таблицу Студенты в режиме
Конструктора.
Для
поля Фамилия в свойство Формат
поля введите –>@;»***»[Красный].
Перейдите
в режим Таблицы.
Все
данные в поле Фамилия должны отображаться
заглавными буквами и в нижней пустой
строке находятся три красные звездочки.
Формат
поля для данных типа Дата/Время
можно выбрать из списка, а также задать
с помощью специальных символов. Рассмотрим
некоторые из них:
-
/
– разделитель компонентов даты
с
– задает встроенный Полный формат
датыd
– номер дня месяца, состоящий из 1 или
2 цифр (1-31)dd
– номер дня месяца, состоящий из 2
цифр (01-31)ddd
– сокращенное название дня недели
(Пн-Вс)dddd
– полное название дня недели
(понедельник – воскресенье)m
– номер месяца, состоящий из 1 или 2
цифр (1-12)mm
– номер месяца, состоящий из 2 цифр
(01-12)mmm
– первые три буквы названия месяца
(янв-дек)mmmm
– полное название месяца (Январь-Декабрь)
q
– номер квартала в году (1-4)
у
– номер дня в году (1-366)
уу
– последние две цифры номера года
(01-99)уууу
– полный номер года (0100-9999)
Задания:
Откройте
таблицу Оценка в режиме
Конструктора.
Для
поля Дата сдачи в Формат поля
введите dd mmm уу (Внимание! Все
буквы английского алфавита).
Перейдите
в режим Таблицы.
Даты
сдачи должны отображаться в виде – 01
янв 01.
Перейдите
в режим Конструктора.
Для
поля Дата сдачи в Формат поля
введите dddd», «dd mmmm yyyy
Перейдите
в режим Таблицы и посмотрите, как
изменился формат вывода данных.
Перейдите
в режим Конструктора и самостоятельно
измените формат так, чтобы дата сдачи
отображалась в виде – 01.01.07 г.
Формат
поля для данных типа Числовой и Денежный
можно выбрать из списка, а также можно
определять самостоятельно с помощью
специальных символов:
-
0
– выводится цифра или 0;
#
– выводитcя цифра или
ничего не выводится;$ + () —
– перечисленные символы отображаются
без изменений%
– процентный формат. Число умножается
на 100 и к нему добавляется символ
процента.
Специальные
форматы могут включать в себя от одного
до четырех разделов, отделенных друг
от друга точкой запятой (;). В первом
разделе описывается формат положительных
чисел, во втором – формат отрицательных
чисел, в третьем – формат нулевых
значений, в четвертом – формат пустых
значений.
Задания:
Откройте
таблицу Студенты в режиме
Конструктора.
Для
поля КодГруппы в свойство Формат
поля введите – 0;»Не должно
быть отрицательным»[Красный];»Не
должно быть нулевым»[Лиловый]
Перейдите
в режим Таблицы.
Попробуйте
в поле КодГруппы ввести отрицательное
значение или нулевое. Должны появляться
соответствующие надписи.
Для
Логического типа данных свойство
Формат поля позволяет выбрать из списка
встроенных форматов: Истина/Ложь,
Да/Нет или Вкл/Выкл.
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
- #
- #
- #
- #
- #
- #
- #
- #
- #
- #
- #
Основные свойства полей MS Access зависят от выбранного типа данных. Если открыть таблицу в режиме конструктора, то весь набор свойств выбранного поля будет представлен в нижней части окна на двух вкладках: Общие (General) и Подстановка (Lookup). Приведем свойства полей, наиболее важные на первом этапе изучения баз данных.
- Размер поля (Field Size) позволяет для текстового и числового поля уточнить тип данных или размер, задает максимальный размер данных, сохраняемых в поле. Для поля с типом данных Текстовый (Text) задается размер от 1 до 255 знаков. Для поля с типом данных Числовой (Number) можно задать:
- Байт (Byte) для целых чисел от 0 до 255, длина поля 1 байт;
- Целое (Integer) для целых чисел от –32 768 до +32 767, занимает 2 байта;
- Длинное целое (Long Integer) для целых чисел от –2 147 483 648 до
+2 147 483 647, занимает 4 байта; - Одинарное с плавающей точкой (Single) для чисел от –3,4 1038 до
+3,4 1038 с точностью до 7 знаков, занимает 4 байта; - Двойное с плавающей точкой (Double) для чисел от –1,797 10308 до
+1,797 10308 с числом отображаемых десятичных знаков до 15, занимает
8 байтов; - Действительное (Decimal) для целых чисел от –1038 до +1038 (при работе с
проектами, которые хранятся в файлах типа adp) и от –1028 до 1028 (mdb и
accdb) с числом отображаемых десятичных знаков до 28, занимает 12 байтов; - Код репликации (Replication ID). Глобальный уникальный идентификатор (Globally unique identifier, GUID), занимает 16 байтов. Эти длинные генерируемые случайным образом значения обеспечивают малую вероятность их совпадения. Поля такого типа используются Access для создания системных уникальных идентификаторов реплик, наборов реплик, таблиц, записей и других объектов при репликации баз данных. Могут быть использованы в приложениях пользователя для идентификации строк таблицы, например для идентификации товаров.
Для поля с типом данных Счетчик (AutoNumber) можно задать:
- Длинное целое (Long Integer) — 4 байта;
- Код репликации (Replication ID) — 16 байтов.
Рекомендуется задавать минимально допустимый размер поля, который понадобится для сохраняемых значений, т. к. сохранение таких полей требует меньше памяти, и обработка данных меньшего размера выполняется быстрее.
- Формат поля (Format) является форматом отображения выбранного типа данных при выводе их на экран или печать в режиме таблицы, в форме или отчете. В Access определены встроенные стандартные форматы отображения для полей с такими типами данных как Числовой (Number), Дата/время (Date/Time), Логический (Yes/No) и Денежный (Currency). Ряд этих форматов совпадает с настройкой региональных форматов, определяемых в окне Язык и региональные стандарты в Панели правления Windows. Пользователь может создать собственный формат для всех типов данных, кроме Поле объекта OLE (OLE Object), с помощью символов форматирования.
- Число десятичных знаков (Decimal Places) задает для числового и денежного типов данных количество знаков после запятой. Можно задать число от 0 до 15. По умолчанию (значение Авто (Auto)) это число определяется установкой в свойстве Формат поля (Format). Следует иметь в виду, что установка этого свойства не действует, если свойство Формат поля (Format) не установлено или выбрано значение Основной (General Namber). Свойство Число десятичных знаков (Decimal Places) влияет только на количество десятичных знаков, отображаемых на экране, и не влияет на число сохраняемых десятичных знаков. Для изменения числа сохраняемых знаков нужно изменить свойство Размер поля (Field Size).
- Подпись (Caption) поля задает текст, который выводится в таблицах, формах, отчетах.
- Описание (Description) — краткий пользовательский комментарий к полю.
- Значение по умолчанию (Default Value) определяет текст или выражение, значение которого автоматически вводится в поле при создании новой записи. Например, если задана функция =Now(), то в поле введется текущая дата и время. При добавлении записи в таблицу можно оставить значение, введенное по умолчанию, или ввести другое. Свойство Значение по умолчанию (Default Value) используется только при создании новой записи. Максимальная длина значения свойства составляет 255 знаков. Свойство не определено для полей с типом данных Счетчик (AutoNumber) или Поле объекта OLE (OLE Object).
- Условие на значение (Validation Rule) позволяет осуществлять контроль ввода, задает ограничения на вводимые значения, при нарушении условий запрещает ввод и выводит текст, заданный свойством Сообщение об ошибке (Validation Text).
- Сообщение об ошибке (Validation Text) задает текст сообщения, выводимый на экран при нарушении ограничений, заданных свойством Условие на значение (Validation Rule).
ВНИМАНИЕ!
Элементы управления, созданные в формах или отчетах на основе поля таблицы, наследуют установленные для этого поля свойства. Благодаря этому не понадобится определять свойства индивидуально для каждого связанного с полем элемента управления.
В следующем уроке рассмотри процесс создания таблиц в MS Access.
Свойства «Условие на значение» и «Сообщение об ошибке»
Данные
свойства будут рассматриваться вместе,
так как они связанны между собой.
Условие
на значение – свойство определяет
ограничение, накладываемое на вводимые
в это поле данные. При несоответствии
вводимых данных указанному условию
выдается сообщение об ошибке.
Сообщение
об ошибке – свойство определяет то
сообщение, которое будет выдаваться
пользователю, если при вводе данных не
соблюдается условие, указанное в
предыдущем свойстве.
Примечание:
Если это свойство не указано, будет
выдано стандартное сообщение об ошибке.
Приведем
несколько примеров условий на значение
и соответствующих сообщений об ошибке.
|
Условие на значение |
Сообщение об ошибке |
|
<>0 |
Введите значение, отличное от нуля |
|
0 Or >100 |
Значение должно быть 0, либо больше |
|
>=1 And <=10 |
Введите значение от 1 до 10 |
|
Like «К???» |
Значение должно содержать четыре |
|
Like «[0-9][0-9][0-9]» |
Значение должно состоять из трех цифр |
|
<=Date() |
Дата должна быть не позднее сегодняшней |
|
>=#1.01.1997# |
Дата должна быть после 1-го января 1997 |
Задания:
Закройте
таблицу Студенты.
Откройте
таблицу Оценка в режиме
Конструктора.
Установите
для поля Оценка свойство
Условие на значение –
>=2 And <=5
(больше или равно 2 и меньше или равно
5) и свойство Сообщение об ошибке
– Оценка должна быть в интервале
от 2 до 5 (см. рисунок).
Перейдите
в режим Таблицы.
Нажмите
кнопку Да.
Попытайтесь
ввести оценку 6 в любой записи
таблицы. Если вы все сделали правильно,
то появится сообщение об ошибке.
Свойство «Формат поля»
Формат
поля предназначен для вывода текста,
чисел и дат в нужном виде на экран или
печать.
Примечание:
Формат поля не влияет на способ
сохранения информации в таблице.
Для
числовых, денежных, логических полей,
для полей типа Дата/время и Счетчик
существуют наборы стандартных (встроенных)
форматов отображения. Кроме того, для
этих типов полей пользователь может
задать собственные (специальные) форматы.
Для
текстовых полей, полей MEMO
и гиперссылки встроенных форматов нет,
и для них можно задать только собственные
форматы.
Для
полей объектов OLE форматы
отображения данных определить невозможно.
Специальные
форматы поля задаются с помощью одного
или нескольких спецсимволов, некоторые
из которых являются общими для всех
типов данных, а другие отличаются для
разных типов полей (текстовых, числовых,
дата и др.)
Для
всех типов данных можно использовать
следующие символы:
-
«абв»
– символы, заключенные в кавычки,
печатаются без изменения;– выводит следующий символ, как
константу;[цвет]
– задает цвет, название которого
указано в скобках. Допустимые имена
цветов: (Черный), (Синий), (Зеленый),
(Бирюзовый), (Красный), (Лиловый),
(Желтый), (Белый).
Для
текстовых типов данных применяют
следующие спецсимволы:
-
@
– обязательный текстовый символ или
пробел;&
– необязательный текстовый символ;
<
– преобразует все символы в строчные
(маленькие);>
– преобразует все символы в прописные
(заглавные).
Специальные
форматы для текстовых полей могут
состоять из двух разделов, разделенных
точкой запятой (;). В первом разделе
задается собственно формат отображения
данных, во втором разделе – задается
значение, которое будет отображаться
в поле, если в это поле ничего не введено.
Задания:
Откройте
таблицу Студенты в режиме
Конструктора.
Для
поля Фамилия в свойство Формат
поля введите –>@;»***»[Красный].
Перейдите
в режим Таблицы.
Все
данные в поле Фамилия должны отображаться
заглавными буквами и в нижней пустой
строке находятся три красные звездочки.
Формат
поля для данных типа Дата/Время
можно выбрать из списка, а также задать
с помощью специальных символов. Рассмотрим
некоторые из них:
-
/
– разделитель компонентов даты
с
– задает встроенный Полный формат
датыd
– номер дня месяца, состоящий из 1 или
2 цифр (1-31)dd
– номер дня месяца, состоящий из 2
цифр (01-31)ddd
– сокращенное название дня недели
(Пн-Вс)dddd
– полное название дня недели
(понедельник – воскресенье)m
– номер месяца, состоящий из 1 или 2
цифр (1-12)mm
– номер месяца, состоящий из 2 цифр
(01-12)mmm
– первые три буквы названия месяца
(янв-дек)mmmm
– полное название месяца (Январь-Декабрь)
q
– номер квартала в году (1-4)
у
– номер дня в году (1-366)
уу
– последние две цифры номера года
(01-99)уууу
– полный номер года (0100-9999)
Задания:
Откройте
таблицу Оценка в режиме
Конструктора.
Для
поля Дата сдачи в Формат поля
введите dd mmm уу (Внимание! Все
буквы английского алфавита).
Перейдите
в режим Таблицы.
Даты
сдачи должны отображаться в виде – 01
янв 01.
Перейдите
в режим Конструктора.
Для
поля Дата сдачи в Формат поля
введите dddd», «dd mmmm yyyy
Перейдите
в режим Таблицы и посмотрите, как
изменился формат вывода данных.
Перейдите
в режим Конструктора и самостоятельно
измените формат так, чтобы дата сдачи
отображалась в виде – 01.01.07 г.
Формат
поля для данных типа Числовой и Денежный
можно выбрать из списка, а также можно
определять самостоятельно с помощью
специальных символов:
-
0
– выводится цифра или 0;
#
– выводитcя цифра или
ничего не выводится;$ + () —
– перечисленные символы отображаются
без изменений%
– процентный формат. Число умножается
на 100 и к нему добавляется символ
процента.
Специальные
форматы могут включать в себя от одного
до четырех разделов, отделенных друг
от друга точкой запятой (;). В первом
разделе описывается формат положительных
чисел, во втором – формат отрицательных
чисел, в третьем – формат нулевых
значений, в четвертом – формат пустых
значений.
Задания:
Откройте
таблицу Студенты в режиме
Конструктора.
Для
поля КодГруппы в свойство Формат
поля введите – 0;»Не должно
быть отрицательным»[Красный];»Не
должно быть нулевым»[Лиловый]
Перейдите
в режим Таблицы.
Попробуйте
в поле КодГруппы ввести отрицательное
значение или нулевое. Должны появляться
соответствующие надписи.
Для
Логического типа данных свойство
Формат поля позволяет выбрать из списка
встроенных форматов: Истина/Ложь,
Да/Нет или Вкл/Выкл.
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
- #
- #
- #
- #
- #
- #
- #
- #
- #
- #
- #
Ни для кого не секрет, что онлайн-формы могут стать серьёзным испытанием для пользователей. Особенно когда они выглядят как список полей для ввода без каких-либо подсказок. Однако мы, как разработчики, можем значительно облегчить жизнь посетителям наших сайтов.
Используем CSS
В CSS существует четыре специальных псевдокласса, применимых к полям формы: :valid (валидное поле), :invalid (невалидное), :required (обязательное) и :optional (необязательное). Их можно использовать, чтобы добавлять некоторые — хотя и весьма ограниченные — подсказки пользователям, заполняющим форму.
Используя :valid и :invalid, мы можем показать пользователю, правильно ли заполнено поле по мере ввода.
input:valid {
border-color: green;
}
input:invalid {
border-color: red;
}
Однако с этим способом связана одна проблема: стили применяются до того, как пользователь начнёт работу с формой. Поля, обязательные для заполнения, сразу подсветятся нам как :invalid, а необязательные — как :valid. Это значит, что пользователь, даже не приступив к заполнению формы, может сразу же получить негативную обратную связь. Не очень-то хорошо.
Стилизация состояний :required и :optional сама по себе не особо полезна, поскольку эта информация обычно указывается в подписях к полям формы. Однако мы можем объединить эти состояния с псевдоклассами :valid / :invalid и стилизовать их комбинации. Например, мы хотим показывать лишь положительный результат, когда валидно обязательное к заполнению поле.
input:required:valid {
border-color: green;
}
Используем JavaScript
JavaScript даёт намного больше возможностей для улучшения работы пользователей с формами. Давайте рассмотрим в качестве примера три числовых поля, у каждого из которых установлен минимум в 10, максимум в 100 и шаг в 10 единиц.
<form>
<label>
Number Input 1
<input type="number" min="10" max="100" step="10">
</label>
<label>
Number Input 2
<input type="number" min="10" max="100" step="10">
</label>
<label>
Number Input 3
<input type="number" min="10" max="100" step="10">
</label>
<input type="submit">
</form>
Устанавливая атрибуты min, max и step, мы можем быть уверены в правильности значения только тогда, когда пользователь использует специальные контролы числового поля. Но что мешает пользователю ввести вручную некорректные данные? Вот что произойдёт, если он вставит 1, 12 и 123 в три поля и отправит форму:
В результате всё, что получит пользователь — это сообщение об ошибке для первого поля. Кроме того, в этом сообщении будет указано лишь одно несоответствие из двух требуемых. Такое поведение можно исправить, изменяя показываемые валидатором сообщения.
Добавляем несколько сообщений об ошибках в один тултип
Валидируя поля, браузер проверяет их по определённому списку потенциальных ошибок. В каждом поле содержится специальный объект validity, включающий в себя список булевых значений, характеризующих ту или иную проверку на валидность. Например, вот такой validity-объект будет у поля, когда пользователь введёт в него 1:
input.validity = {
valid: false // Поле валидно
customError: false // Установленно специальное сообщение ошибки
patternMismatch: false // Значение не удовлетворяет шаблону, установленному в атрибуте pattern
rangeOverflow: false // Значение превосходит атрибут max
rangeUnderflow: true // Значение меньше атрибута min
stepMismatch: true // Значение не соответствует указаному шагу
tooLong: false // Значение слишком длинное
tooShort: false // Значение слишком короткое
typeMismatch: false // Значение не соответствует указаному атрибуту type
valueMissing: false // Отсутствует обязательное значение
};
Примечание переводчика: Слово «mismatch» переводится как «несоответствие». Поэтому в значениях patternMismatch, stepMismatch и typeMismatch обратная логика: true — значение не удовлетворяет атрибуту, false — удовлетворяет.
По умолчанию браузер отобразит лишь одну ошибку. Что мы можем сделать, так это проверить все эти значения самостоятельно и, если найдутся ошибки, сохранить их. Как только мы сохраним все ошибки для одного поля, мы можем отобразить весь их список в виде специального сообщения об ошибке при помощи функции setCustomValidity().
function CustomValidation() { }
CustomValidation.prototype = {
// Установим пустой массив сообщений об ошибках
invalidities: [],
// Метод, проверяющий валидность
checkValidity: function(input) {
var validity = input.validity;
if (validity.patternMismatch) {
this.addInvalidity('This is the wrong pattern for this field');
}
if (validity.rangeOverflow) {
var max = getAttributeValue(input, 'max');
this.addInvalidity('The maximum value should be ' + max);
}
if (validity.rangeUnderflow) {
var min = getAttributeValue(input, 'min');
this.addInvalidity('The minimum value should be ' + min);
}
if (validity.stepMismatch) {
var step = getAttributeValue(input, 'step');
this.addInvalidity('This number needs to be a multiple of ' + step);
}
// И остальные проверки валидности...
},
// Добавляем сообщение об ошибке в массив ошибок
addInvalidity: function(message) {
this.invalidities.push(message);
},
// Получаем общий текст сообщений об ошибках
getInvalidities: function() {
return this.invalidities.join('. n');
}
};
// Добавляем обработчик клика на кнопку отправки формы
submit.addEventListener('click', function(e) {
// Пройдёмся по всем полям
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// Проверим валидность поля, используя встроенную в JavaScript функцию checkValidity()
if (input.checkValidity() == false) {
var inputCustomValidation = new CustomValidation(); // Создадим объект CustomValidation
inputCustomValidation.checkValidity(input); // Выявим ошибки
var customValidityMessage = inputCustomValidation.getInvalidities(); // Получим все сообщения об ошибках
input.setCustomValidity(customValidityMessage); // Установим специальное сообщение об ошибке
} // закончился if
} // закончился цикл
});
Теперь при попытке отправить форму мы увидим вот это:
Отображаем несколько ошибок в одном тултипе
Стало лучше, поскольку теперь будут показываться все сообщения об ошибках, связанные с конкретным полем. Однако другая проблема всё ещё не решена: ошибки по-прежнему показываются лишь для первого поля.
Это ограничение валидации, устанавливаемое браузером. Чтобы его побороть, нам нужно пойти другим путём.
Показываем все ошибки для всех полей
Вместо того, чтобы использовать встроенный тултип, мы можем добавлять сообщения об ошибках напрямую в DOM. Таким образом, все ошибки будут выводиться рядом с соответствующим полем.
Этого можно добиться какой-то парой дополнительных строчек в нашем коде:
CustomValidation.prototype.getInvaliditiesForHTML = function() {
return this.invalidities.join('. <br>');
}
// Добавляем обработчик клика на кнопку отправки формы
submit.addEventListener('click', function(e) {
// Пройдёмся по всем полям
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// Проверим валидность поля, используя встроенную в JavaScript функцию checkValidity()
if (input.checkValidity() == false) {
var inputCustomValidation = new CustomValidation(); // Создадим объект CustomValidation
inputCustomValidation.checkValidity(input); // Выявим ошибки
var customValidityMessage = inputCustomValidation.getInvalidities(); // Получим все сообщения об ошибках
input.setCustomValidity(customValidityMessage); // Установим специальное сообщение об ошибке
// Добавим ошибки в документ
var customValidityMessageForHTML = inputCustomValidation.getInvaliditiesForHTML();
input.insertAdjacentHTML('afterend', '<p class="error-message">' + customValidityMessageForHTML + '</p>')
stopSubmit = true;
} // закончился if
} // закончился цикл
if (stopSubmit) {
e.preventDefault();
}
});
Вот что происходит при клике на submit теперь:
Используем нестандартные проверки валидности
Иногда встроенной в браузер валидации бывает недостаточно. Нам может понадобиться, чтобы вводимые данные удовлетворяли некоторым дополнительным правилам. Например, чтобы в текстовом поле требовалось указать особые символы.
Так как мы уже проверяем все возможные ошибки вручную в нашей функции CustomValidation.prototype.checkValidity, мы можем просто-напросто добавить туда ещё несколько проверок.
CustomValidation.prototype.checkValidity = function(input) {
// Тут идут встроенные проверки валидности
// А тут специальные
if (!input.value.match(/[a-z]/g)) {
this.addInvalidity('At least 1 lowercase letter is required');
}
if (!input.value.match(/[A-Z]/g)) {
this.addInvalidity('At least 1 uppercase letter is required');
}
};
Валидация в реальном времени
Хотя текущий способ выглядит намного лучше, он тоже не без изъянов. Наихудший из недочётов заключается в том, что пользователь не сможет увидеть никаких сообщений, пока не нажмёт на кнопку отправки формы. Было бы гораздо лучше, если бы валидация поля происходила сразу же при его заполнении. Можно выделить три правила для того, чтобы с формой было удобно работать:
- Требования для каждого поля чётко видны до того, как пользователь начал печатать.
- Как только пользователь начинает вводить данные, соблюдая требования, он сразу видит индикатор успешного заполнения поля или подсказки, если есть ошибки.
- Нужно отображать сообщения об ошибках таким образом, чтобы пользователь не мог отправить некорректно заполненную форму.
Если вы хотите попробовать свои силы (и даже сделать получше), вы можете воспользоваться вот этим шаблоном.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
ТелеграмПодкастБесплатные учебники
Тег <input> (от англ. input — ввод) является одним из разносторонних элементов формы и позволяет создавать разные части интерфейса и обеспечивать взаимодействие с пользователем.
Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.
Основной атрибут <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file), кнопка с изображением (image) и др. Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено ещё более десятка новых атрибутов.
Формы
- button
- datalist
- fieldset
- form
- input
- label
- legend
- meter
- optgroup
- option
- output
- progress
- select
- textarea
Синтаксис¶
Закрывающий тег не требуется.
Атрибуты¶
accept- Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
alt- Альтернативный текст для кнопки с изображением.
autocomplete- Включает или отключает автозаполнение.
autofocus- Устанавливает фокус в поле формы.
checked- Предварительно активированный переключатель или флажок.
dirname- Параметр, который передаёт на сервер направление текста.
disabled- Блокирует доступ и изменение элемента.
form- Связывает поле с формой по её идентификатору.
formaction- Определяет адрес обработчика формы.
formenctype- Устанавливает способ кодирования данных формы при их отправке на сервер.
formmethod- Сообщает браузеру каким методом следует передавать данные формы на сервер.
formnovalidate- Отменяет встроенную проверку данных на корректность.
formtarget- Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
list- Указывает на список вариантов, которые можно выбирать при вводе текста.
max- Верхнее значение для ввода числа или даты.
maxlength- Максимальное количество символов разрешённых в тексте.
min- Нижнее значение для ввода числа или даты.
minlength- Минимальное количество символов разрешённых в тексте.
multiple- Позволяет загрузить несколько файлов одновременно.
name- Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
pattern- Устанавливает шаблон ввода.
placeholder- Выводит подсказывающий текст.
readonly- Устанавливает, что поле не может изменяться пользователем.
required- Обязательное для заполнения поле.
size- Ширина текстового поля.
src- Адрес графического файла для поля с изображением.
step- Шаг приращения для числовых полей.
type- Сообщает браузеру, к какому типу относится элемент формы.
value- Значение элемента.
Также для этого элемента доступны универсальные атрибуты.
accept¶
Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. Тип файла указывается как MIME-тип, при нескольких значениях они перечисляются через запятую. Если файл не подходит под установленный фильтр, он не показывается в окне выбора файлов.
Применяется к полю для отправки файла (<input type="file">).
Поддержка браузерами
Can I Use input-file-accept? Data on support for the input-file-accept feature across the major browsers from caniuse.com.
Синтаксис
|
Значения
Имя MIME-типа в любом регистре, несколько значений перечисляются через запятую.
В HTML5 также допустимо в качестве значения указывать audio/* для выбора всех звуковых файлов, video/* для видеофайлов и image/* для всех графических файлов.
Список MIME-типов файлов.
Значение по умолчанию
Нет.
alt¶
Атрибут alt устанавливает альтернативный текст для поля с изображением. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений, а также предназначен для поисковых систем.
Синтаксис
|
Значения
Любая подходящая текстовая строка.
Значение по умолчанию
Нет.
autocomplete¶
Этот атрибут помогает заполнять поля форм текстом, который был введён в них ранее. Значения сохраняет и подставляет браузер, при этом автозаполнение по соображениям безопасности может отключаться пользователем в настройках браузера и не может в таком случае управляться атрибутом autocomplete.
При вводе первых букв текста выводится список сохранённых ранее значений, из которого можно выбрать необходимое.
Автозаполнение конкретного поля формы привязывается к его атрибуту name и при смене значения теряется.
Синтаксис
|
Значения
on- Включает автозаполнение текста.
off- Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт), а также редко вводимых или уникальных данных (капча).
Значение по умолчанию
Зависит от настроек браузера.
autofocus¶
Автоматически устанавливает фокус в поле формы. В таком поле можно сразу набирать текст без явного щелчка по нему курсором мыши.
Синтаксис
Значения
Нет.
Значение по умолчанию
По умолчанию атрибут autofocus не установлен.
checked¶
Этот атрибут определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей (radiobutton) может быть отмечен только один элемент группы, для флажков (checkbox) допустимо пометить хоть все элементы.
Синтаксис
|
Значения
Нет.
Значение по умолчанию
По умолчанию этот атрибут выключен.
dirname¶
При наличии атрибута dirname на сервер отправляется пара имя/значение, где имя задаётся атрибутом dirname, а значение подставляется браузером. Для текста, идущего слева направо, значение будет ltr, а для текста справа налево (иврита, к примеру) значение будет rtl.
Синтаксис
|
Значения
Произвольная текстовая строка, которая служит именем параметра. Чтобы показать, что этот параметр указывает направление текста, обычно в конце строки добавляют .dir.
Значение по умолчанию
Нет.
disabled¶
Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов. Заблокированное в поле значение не передаётся на сервер.
Синтаксис
Значения
Нет.
Значение по умолчанию
По умолчанию этот атрибут выключен.
form¶
Связывает поле с формой по её идентификатору. Такая связь необходима в случае, когда поле располагается за пределами <form>, например, при создании её программно или по соображениям дизайна.
Синтаксис
|
Значения
Идентификатор формы (значение атрибута id элемента <form>).
Значение по умолчанию
Нет.
formaction¶
Определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction по своему действию аналогичен атрибуту action элемента <form>.
Синтаксис
|
Значения
Нет.
formenctype¶
Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла (input type="file"). Этот атрибут по своему действию аналогичен атрибуту enctype элемента <form>, при совместном использовании formenctype и enctype последний игнорируется.
Синтаксис
|
Значения
application/x-www-form-urlencoded- Вместо пробелов ставится
+, символы вроде русских букв кодируются их шестнадцатеричными значениями (например,%D0%9F%D0%B5%D1%82%D1%8FвместоПетя). multipart/form-data- Данные не кодируются. Это значение применяется при отправке файлов.
text/plain- Пробелы заменяются знаком
+, буквы и другие символы не кодируются.
Значение по умолчанию
application/x-www-form-urlencoded
formmethod¶
Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.
Синтаксис
|
Значения
Различают два метода — GET и POST, которые задаются ключевыми словами get и post.
get- Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар «
имя=значение», которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ&). Полный адрес к примеру будетhttp://site.ru/doc/?name=Vasya&password=pup. Объём данных в методе ограничен 4 Кб. post- Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.
Значение по умолчанию
get
formnovalidate¶
Отменяет встроенную проверку данных введённых пользователем в форме на корректность перед отправкой формы. Такая проверка делается браузером автоматически для полей <input type="email">, <input type="url">, а также при наличии атрибута pattern или required у элемента <input>.
Синтаксис
|
Значения
Нет.
Значение по умолчанию
По умолчанию этот атрибут выключен.
formtarget¶
Определяет имя фрейма, в которое будет загружаться результат, возвращаемый обработчиком формы в виде HTML-документа.
Синтаксис
|
Значения
В качестве значения используется имя фрейма, заданное атрибутом name. Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных имен можно указывать следующие.
_blank- Загружает страницу в новую вкладку браузера.
_self- Загружает страницу в текущую вкладку.
_parent- Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как
_self. _top- Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как
_self.
Значение по умолчанию
_self
list¶
Указывает на список вариантов, созданный с помощью элемента <datalist>, которые можно выбирать при наборе текста. Изначально этот список скрыт и становится доступным при получении полем фокуса.
Синтаксис
|
Значения
Имя идентификатора элемента <datalist>.
Значение по умолчанию
Нет.
max¶
Устанавливает верхнее значение для ввода числа или даты в поле формы.
Синтаксис
|
Значения
Целое положительное или отрицательное число (для type="number", type="range").
Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type="date".
Значение по умолчанию
Нет.
maxlength¶
Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.
Синтаксис
|
Значения
Любое целое положительное число.
Значение по умолчанию
Ввод символов не ограничен.
min¶
Устанавливает нижнее значение для ввода числа или даты в поле формы.
Синтаксис
|
Значения
Целое положительное или отрицательное число (для type="number", type="range").
Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type="date".
Значение по умолчанию
Нет.
minlength¶
Задаёт минимальное число символов, которое может быть введено пользователем в текстовом поле. Если число символов меньше указанного значения, то браузер выдаёт сообщение об ошибке и не отправляет форму.
Синтаксис
|
Значения
Любое целое положительное число.
Значение по умолчанию
Нет.
multiple¶
Атрибут multiple позволяет указывать одновременно несколько файлов в поле для загрузки файлов, а также несколько адресов электронной почты. При использовании двух и более почтовых адресов они должны перечисляться через запятую.
Синтаксис
|
Значения
Нет.
Значение по умолчанию
По умолчанию атрибут multiple выключен.
name¶
Определяет уникальное имя элемента формы. Как правило, это имя используется при отправке данных на сервер или для доступа к введённым данным поля через скрипты.
Синтаксис
Значения
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в атрибуте name.
Значение по умолчанию
Нет.
pattern¶
Указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Если присутствует атрибут pattern, то форма не будет отправляться, пока поле не будет заполнено правильно.
Поддержка браузерами
Can I Use input-pattern? Data on support for the input-pattern feature across the major browsers from caniuse.com.
Синтаксис
|
Значения
Некоторые типовые регулярные выражения перечислены в табл. 1.
| Выражение | Описание |
|---|---|
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¶
Выводит текст внутри поля формы, который исчезает при получении фокуса или при наборе текста. Обычно отображается серым цветом.
Поддержка браузерами
Can I Use input-placeholder? Data on support for the input-placeholder feature across the major browsers from caniuse.com.
Синтаксис
|
Значения
Текстовая строка. Если внутри строки предполагается пробел, её необходимо брать в двойные или одинарные кавычки.
Значение по умолчанию
Нет.
readonly¶
Когда к элементу <input> добавляется атрибут readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов и данные отправляются на сервер.
Синтаксис
|
Значения
Нет.
Значение по умолчанию
По умолчанию этот атрибут выключен.
required¶
Устанавливает поле формы обязательным для заполнения перед отправкой формы на сервер. Если обязательное поле пустое, браузер выведет сообщение об ошибке, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.
Синтаксис
Значения
Нет.
Значение по умолчанию
По умолчанию атрибут required выключен.
size¶
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задаётся количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.
Синтаксис
|
Значения
Любое целое положительное число.
Значение по умолчанию
20
src¶
Адрес графического файла, который будет отображаться на веб-странице в поле с изображением. Наиболее популярны файлы в формате PNG и JPEG.
Синтаксис
|
Значения
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
Нет.
step¶
Устанавливает шаг изменения числа для ползунков и полей ввода чисел.
Синтаксис
|
Значения
Любое целое или дробное число.
Значение по умолчанию
1
type¶
Сообщает браузеру, к какому типу относится элемент формы.
Поддержка браузерами
email, tel, url:
Can I Use input-email-tel-url? Data on support for the input-email-tel-url feature across the major browsers from caniuse.com.
color:
Can I Use input-color? Data on support for the input-color feature across the major browsers from caniuse.com.
range:
Can I Use input-range? Data on support for the input-range feature across the major browsers from caniuse.com.
number:
Can I Use input-number? Data on support for the input-number feature across the major browsers from caniuse.com.
search:
Can I Use input-search? Data on support for the input-search feature across the major browsers from caniuse.com.
date, time, datetime:
Can I Use input-datetime? Data on support for the input-datetime feature across the major browsers from caniuse.com.
Синтаксис
|
Значения
Значения type:
button- Кнопка.
checkbox- Флажки. Позволяют выбрать более одного варианта из предложенных.
file- Поле для ввода имени файла, который пересылается на сервер.
hidden- Скрытое поле. Оно никак не отображается на веб-странице.
image- Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
password- Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio- Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.
reset- Кнопка для возвращения данных формы в первоначальное значение.
submit- Кнопка для отправки данных формы на сервер.
text- Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.
В HTML5 добавлены новые значения:
color- Виджет для выбора цвета.
date- Поле для выбора календарной даты.
datetime- Указание даты и времени.
datetime-local- Указание местной даты и времени.
email- Для адресов электронной почты.
number- Ввод чисел.
range- Ползунок для выбора чисел в указанном диапазоне.
search- Поле для поиска.
tel- Для телефонных номеров.
time- Для времени.
url- Для веб-адресов.
month- Выбор месяца.
week- Выбор недели.
Значение по умолчанию
text
value¶
Определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. На сервер отправляется пара «имя=значение», где имя задаётся атрибутом name элемента <input>, а значение — атрибутом value.
В зависимости от типа элемента атрибут value выступает в следующей роли:
- для кнопок (
input type="button | reset | submit") устанавливает текстовую надпись на них; - для текстовых полей (
input type="password | text") указывает предварительно введённую строку. Пользователь может стирать текст и вводить свои символы, но при использовании в форме кнопки Reset пользовательский текст очищается и восстанавливается введённый в атрибутеvalue; - для флажков и переключателей (
input type="checkbox | radio") уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно установить, какой пункт выбрал пользователь. - для файлового поля (
input type="file") не оказывает влияние.
Синтаксис
|
Значения
Любая текстовая строка.
Значение по умолчанию
Нет.
Значения ARIA role¶
<input type=button>—role=button<input type=checkbox>—role=checkbox<input type=email>—role=textbox<input type=image>—role=button<input type=number>—role=spinbutton<input type=radio>—role=radio<input type=range>—role=slider<input type=reset>—role=button<input type=search>—role=searchbox<input type=submit>—role=button<input type=tel>—role=textbox<input type=text>—role=textbox<input type=text, search, tel, url, или email с атрибутом list>—role=combobox<input type=url>—role=textbox
Спецификации¶
- WHATWG HTML Living Standard
- HTML5
- HTML 4.01 Specification
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
|
Ссылки¶
- Тег
<input>MDN (рус.)