HTML HTML5 XHTML ПРИМЕРЫ СПРАВОЧНИК РЕКЛАМА ГОСТЕВАЯ

Урок 9 Атрибуты Форм HTML5


« Назад Далее »

HTML5 Новые Атрибуты Форм

Этот урок расскажет о некоторых атрибутах для элементов <form> и <input>.

Новые атрибуты form:

  • autocomplete (автозаполнение)
  • novalidate (не проверять)

Новые атрибуты input:

  • autocomplete (автозаполнение)
  • autofocus (автофокус)
  • form
  • form overrides (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 Нет 4.0 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 указывает, что форма или поле ввода input должны обладать функцией автозаполнения.

Замечание: Атрибут autocomplete работает с <form>, и следующими типами <input>: text, url, search, telephone, email, password, range, date (и другие типы выбора даты и/или времени) и color.

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

Пример

<form action="demo_form.php" method="get" autocomplete="on">
Имя: <input type="text" name="fname" /><br />
Фамилия: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

Попробуйте сами »

Замечание: В некоторых браузерах вам потребуется активировать функцию автозаполнения, чтобы оно работало.


Атрибут autofocus (Автофокус)

Атрибут autofocus указывает, какое поле должно автоматически получать фокус ввода при загрузке страницы.

Замечание: Атрибут autofocus аботает со всеми типами ввода <input>.

Пример

Имя пользователя: <input type="text" name="user_name"  autofocus="autofocus" />

Попробуйте сами »


Атрибут form (Форма)

Атрибут form указывает одну или несколько форм, которым принадлежит поле ввода.

Замечание: Атрибут form работает со всеми типами ввода <input>.

Атрибут form должен ссылаться на идентификатор id формы, которой принадлежит поле input:

Пример

<form action="demo_form.php" method="get" id="user_form">
Имя:<input type="text" name="fname" />
<input type="submit" />
</form>
Фамилия: <input type="text" name="lname" form="user_form" />

Попробуйте сами »

Замечание: Чтобы указать более одной формы, используйте список идентификаторов форм через пробел.  


Атрибуты Замены (Замещения, Подмены) Формы

Атрибуты подмены позволяют вам заменять некоторые атрибуты, установленные для элемента формы form.

К атрибутам подмены формы относятся:

  • formaction - Заменяет атрибут формы action
  • formenctype - Переписывает атрибут формы enctype
  • formmethod - Замещает атрибут формы method
  • formnovalidate - Отменяет атрибут формы novalidate
  • formtarget - Заменяет атрибут формы target

Замечание: Атрибуты замены формы работают со следующими типами ввода <input>: submit и image.

Пример

<form action="demo_form.php" method="get" id="user_form">
Адрес электронной почты E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Отправить" />
<br />
<input type="submit" formaction="demo_admin.php" value="Отправить в качестве администратора" />
<br />
<input type="submit" formnovalidate="true"
value="Отправить без проверки" />
<br />
</form>

Попробуйте сами »

Замечание: Эти атрибуты полезны для создания различных кнопок отправки.


Атрибуты height (Высота) и width (Ширина)

Атрибуты height и width указывают высоту и ширину изображения, используемого для типа ввода image.

Замечание: Атрибуты height и width работают только с типом ввода <input>: image.

Пример

<input type="image" src="img_submit.gif" width="24" height="24" />

Попробуйте сами »


Атрибут list (Список)

Атрибут list указывает список опций для поля ввода. Элемент datalist представляет собой список вариантов для выбора в поле ввода input.

Замечание: Атрибут list работает со следующими типами <input>: text, search, url, telephone, email, date (и другие типы выбора даты и/или времени), number, range и color.

Пример

Веб страница: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="Уроки HTML" value="http://uroki-html.ru/" />
<option label="Уроки CSS" value="http://uroki-css.ru/" />
<option label="Уроки JavaScript" value="http://uroki-javascript.ru/" />
</datalist>

Попробуйте сами »


Атрибуты min, max и step

Атрибуты min, max и step используются для указания ограничений в полях ввода чисел или дат.

Атрибут max определяет максимальное возможное значение в поле ввода.

Атрибут min определяет минимальное возможное значение в поле ввода.

Атрибут step указывает шаг в поле ввода (если step="3", то допустимыми числами будут -3,0,3,6, и т.д.).

Замечание: Атрибуты min, max и step работают со следующими типами <input>: типы ввода даты/времени (date, time и др.), number и range.

Пример ниже показывает числовое поле, которое принимает значения между 0 и 10, с шагом 3 (допустимыми числами будут 0, 3, 6 и 9):

Пример

Число: <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, time , ...), range и color.

Пример

<form action="demo_form.php" novalidate="novalidate">
Адрес E-mail: <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="Трехбуквенный код страны" />

Попробуйте сами »


Атрибут placeholder (Заполнитель)

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

Замечание: Атрибут placeholder работает с типами ввода <input>: text, search, url, telephone, email и password

Подсказка отображается в поле ввода, когда оно пустое, и исчезает, когда поле получает фокус:

Пример

<input type="search" name="user_search"  placeholder="введите поисковую фразу" />

Попробуйте сами »


Атрибут required (Обязательное Поле)

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

Замечание: Атрибут required работает с типами <input>: text, search, url, telephone, email, password, date, time (и другие типы выбора даты/времени), number, checkbox, radio и file.

Пример

Имя: <input type="text" name="usr_name" required="required" />

Попробуйте сами »





« Назад Далее »
© 2011-2017 Уроки HTML
Рейтинг@Mail.ru