В этой главе рассматриваются некоторые из новых атрибутов для <form> и <input>.
Новые атрибуты form:
- autocomplete
- novalidate
Новые атрибуты input:
- autocomplete
- autofocus
- form
- переопределение форм (formaction, formenctype, formmethod, formnovalidate, formtarget)
- height и width
- list
- min, max и step
- multiple
- pattern (regexp)
- placeholder
- required
Поддержка браузеров
| Атрибут | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| autocomplete | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
| autofocus | Нет | Нет | 10.0 | 3.0 | 4.0 |
| form | Нет | 4.0 | 9.5 | 10.0 | Нет |
| form overrides | Нет | 4.0 | 10.5 | 10.0 | Нет |
| height and width | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
| list | Нет | 4.0 | 9.5 | Нет | Нет |
| min, max and step | Нет | Нет | 9.5 | 3.0 | Нет |
| multiple | Нет | 3.5 | 11.0 | 3.0 | 4.0 |
| novalidate | Нет | 4.0 | 11.0 | 10.0 | Нет |
| pattern | Нет | 4.0 | 9.5 | 3.0 | Нет |
| placeholder | Нет | 4.0 | 11.0 | 3.0 | 3.0 |
| required | Нет | 4.0 | 9.5 | 3.0 | Нет |
Атрибут autocomplete
Атрибут autocomplete указывает, что форма или поле ввода должны иметь функцию автозаполнения.
Примечание: Атрибут autocomplete работает с <form>, и следующими типами <input>: text, search, url, telephone, email, password, datepickers, range и color.
Когда пользователь начинает вводить в поле автозаполнения, браузер отображает параметры для заполнения поля:
<form action="/tryit/html/htmlform_submit.php" method="get" autocomplete="on"> Имя: <input type="text" name="fname" /> Фамилия: <input type="text" name="lname" /> Электоронная почта: <input type="email" name="email" autocomplete="off" /> <input type="submit" /> </form>
Примечание: В некоторых браузерах вам может понадобиться активировать функцию автозаполнения для этого.
Атрибут autofocus
Атрибут autofocus указывает, что поле должно автоматически получать фокус при загрузке страницы.
Примечание: Атрибут autofocus работает со всеми типами <input>.
Имя: <input type="text" name="user_name" autofocus="autofocus" />
Атрибут form
Атрибут form определяет одно или несколько форм, к которым принадлежит поле ввода.
Примечание: Атрибут form работает со всеми типами <input>.
Атрибут form должен относиться к id формы, к которой он принадлежит:
<form action="/tryit/html/htmlform_submit.php" method="get" id="user_form"> Имя: <input type="text" name="fname" /> <input type="submit" /> </form> Фамилия: <input type="text" name="lname" form="user_form" />
Примечание: Для ссылки на более чем одну форму, используйте список разделенный пробелами.
Переопределение атрибутов формы
Переопределение атрибутов формы позволяет переопределить некоторые атрибуты для элементов формы.
Переопределитель атрибутов формы:
- formaction - Переопределяет атрибут формы action
- formenctype - Переопределяет атрибут формы enctype
- formmethod - Переопределяет атрибут формы method
- formnovalidate - Переопределяет атрибут формы novalidate
- formtarget - Переопределяет атрибут формы target
Примечание: Переопределитель атрибутов формы работает со следующими типами <input>: submit и image.
<form action="/tryit/html/htmlform_submit.php" method="get" id="user_form"> Имейл: <input type="email" name="userid" /> <input type="submit" value="Отправить" /> <input type="submit" formaction="/tryit/html/htmlform_admin_submit.php" value="Отправить как администратор" /> <input type="submit" formnovalidate="true" value="Отправить без проверки" /> </form>
Примечание: Эти атрибуты являются полезными для создания различных кнопок отправки.
Атрибуты height и width
Атрибуты height и width определяют высоту и ширину изображения, используемого для типа ввода image.
Примечание: Атрибуты height и width работают только с типом <input>: image.
<input type="image" src="/images/arrow-icon.png" width="42" height="43" />
Атрибут list
Атрибут list указывает datalist для поля ввода. datalist является списком опций для поля ввода.
Примечание: Атрибут list работает со следующими типами <input>: text, search, url, telephone, email, date pickers, number, range и color.
Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="Xhtml.co.il" value="http://www.xhtml.co.il" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist>
Атрибуты min, max и step
Атрибуты min, max и step используются для указания ограничений для типов ввода, содержащих цифры или даты.
Атрибут max определяет максимально допустимое значение для поля ввода.
Атрибут min определяет минимальное допустимое значение для поля ввода.
Атрибут step определяет допустимые числовые интервалы для поля ввода (if step="3", допустимые числа будут -3,0,3,6, и т.д.).
Примечание: Атрибуты min, max и step работают со следующими типами элемента <input>: date pickers, number и range.
Пример ниже показывает числовое поле, которое принимает значения от 0 до 10, с шагом 3 (допустимые значения 0, 3, 6 и 9):
Points: <input type="number" name="points" min="0" max="10" step="3"/>
Атрибут multiple
Атрибут multiple указывает, что несколько значений может быть выбрано для поля ввода.
Примечание: Атрибут multiple работает со следующими типами <input>: email и file.
Выберите изображения: <input type="file" name="img" multiple="multiple" />
Атрибут novalidate
Атрибут novalidate указывает, что форма или поле ввода не должны быть проверены во время отправки.
Если этот атрибут присутствует форма не будет проверять формы ввода.
Примечение: Атрибут novalidate работает с: <form> и следующими типами элемента <input>: text, search, url, telephone, email, password, date pickers, range и color.
<form action="/tryit/html/htmlform_submit.php" novalidate="novalidate"> Адрес электронной почты: <input type="email" name="user_email" /> <input type="submit" /> </form>
Атрибут pattern
Атрибут pattern определяет шаблон, используемый для проверки поля ввода.
Шаблон является регулярным выражением. Вы можете прочитать об этом в нашем учебнике по JavaScript.
Примечание: Атрибут pattern работает со следующими типами элемента <input>: text, search, url, telephone, email и password
Пример ниже показывает текстовое поле, которое может содержать только три буквы (без цифр или специальных символов):
Код страны: <input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" />
Атрибут placeholder
Атрибут placeholder предоставляет подсказку, которая описывает ожидаемое значение поля ввода.
Примечание: Атрибут placeholder работает со следующими типами элемента <input>: text, search, url, telephone, email и password
Подсказка отображается в поле ввода, когда оно пустое, и исчезает, когда поле получает фокус:
<input type="search" name="user_search" placeholder="Поиск в Xhtml.co.il" />
Атрибут required
Атрибут required указывает, что поля ввода должны быть заполнены перед отправкой.
Примечание: Атрибут required работает со следующими типми элемента <input>: text, search, url, telephone, email, password, date pickers, number, checkbox, radio и file.
Имя: <input type="text" name="usr_name" required="required" />
Была ли эта информация полезной?
