English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
В HTML5 добавлены новые атрибуты форм: форма добавила autocomplete и novalidate, контроллер ввода добавил autocomplete, autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height и width, list, min и max, multiple, pattern (regexp)
В HTML5 новые атрибуты <form> и <input>.
Новый атрибут <form>:
автозаполнение
novalidate
Новый атрибут <input>:
автозаполнение
автофокус
форма
формакция
formenctype
formmethod
formnovalidate
formtarget
height 与 width
list
min 与 max
multiple
pattern (regexp)
placeholder
required
step
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
Внимание: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。
注意: autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
HTML form 中开启 autocomplete (一个 input 字段关闭 autocomplete ):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной курс (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" autocomplete="on"> First name:<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> <p>填写并提交表单，然后重新刷新页面查看如何自动填充内容。</p> <p>注意 form 的 autocomplete 属性为 "on"（开），但是 e-mail 自动为 “off”（关）。</p> </body> </html>Проверьте, пожалуйста, ‹/›
提示:某些浏览器中，您可能需要启用自动完成功能，以使该属性生效。
novalidate 属性是一个 boolean(布尔) 属性。
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
无需验证提交的表单数据
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной курс (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form> <p><strong>Внимание:</strong> Safari и Интернет Эксплорер 9 и более ранние версии не поддерживают атрибут novalidate.</p> </body> </html>Проверьте, пожалуйста, ‹/›
Атрибут autofocus является логическим атрибутом.
Атрибут autofocus определяет, что поле автоматически фокусируется при загрузке страницы.
Позвольте "Имя" полю ввода автоматически фокусироваться при загрузке страницы:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной курс (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Имя: <input type="text" name="fname" autofocus><br> Фамилия: <input type="text" name="lname"><br> <input type="submit"> </form> <p><strong>Внимание:</strong> Интернет Эксплорер 9 и более ранние версии IE не поддерживают атрибут autofocus тега input.</p> </body> </html>Проверьте, пожалуйста, ‹/›
Атрибут form определяет одну или несколько форм, к которым принадлежит поле ввода.
Внимание:Для ссылки на один или несколько форм используйте список, разделенный пробелами.
Поле input вне формы ссылается на HTML-форму (этот input-формуляр все еще является частью формы):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной курс (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" id="form1"> Имя: <input type="text" name="fname"><br> <input type="submit" value="Подтвердить"> </form> <p> Поле "Фамилия" не находится в форме, но оно также является частью формы.</p> Фамилия: <input type="text" name="lname" form="form1"> <p><b>Внимание:</b> IE не поддерживает атрибут form.</p> </body> </html>Проверьте, пожалуйста, ‹/›
Атрибут formaction используется для описания URL-адреса отправки формы.
Атрибут formaction заменяет атрибут action элемента <form>.
Внимание: Атрибут formaction используется для type="submit" и type="image".
Следующий HTML-формуляр содержит два различных кнопки отправки адресов:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной курс (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Имя: <input type="text" name="fname"><br> Фамилия: <input type="text" name="lname"><br> <input type="submit" value="Отправить"><br> <input type="submit" formaction="demo-admin.php" value="Подтвердить"> </form> <p><strong>Внимание:</strong> Интернет Эксплорер 9 и более ранние версии IE не поддерживают атрибут formaction тега input.</p> </body> </html>Проверьте, пожалуйста, ‹/›
Атрибут formenctype описывает кодировку данных, отправляемых на сервер при отправке формы (только для форм с method="post" в form)
Атрибут formenctype перекрывает атрибут enctype элемента form.
Основное: Этот атрибут может использоваться вместе с type="submit" и type="image".
Первый кнопки отправки по умолчанию отправляет данные формы с кодировкой, вторая кнопка отправляет данные формы в формате "multipart/form-data":
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной курс (oldtoolbag.com)</title> </head> <body> <form action="demo-post-enctype.php" method="post"> Имя: <input type="text" name="fname"><br> <input type="submit" value="Подтвердить"> <input type="submit" formenctype="multipart/form-data" value="Отправить с помощью Multipart/form-data"> </form> <p><strong>Внимание:</strong> Internet Explorer 9 и более ранние версии не поддерживают атрибут formenctype элемента input.</p> </body> </html>Проверьте, пожалуйста, ‹/›
Атрибут formmethod определяет способ отправки формы.
Атрибут formmethod перекрывает атрибут method элемента <form>.
Внимание: Этот атрибут может использоваться вместе с type="submit" и type="image".
Пример переопределения способа отправки формы:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной курс (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" method="get"> Имя: <input type="text" name="fname"><br> Фамилия: <input type="text" name="lname"><br> <input type="submit" value="Подтвердить"> <input type="submit" formmethod="post" formaction="demo-form.php" value="Использовать POST для отправки"> </form> <p><strong>Внимание:</strong> Internet Explorer 9 и более ранние версии не поддерживают атрибут formmethod элемента input.</p> </body> </html>Проверьте, пожалуйста, ‹/›
Атрибут novalidate является логическим атрибутом.
Атрибут novalidate описывает, что элемент <input> не требует проверки при отправке формы.
Атрибут formnovalidate перекрывает атрибут novalidate элемента <form>.
Внимание: атрибут formnovalidate используется вместе с type="submit".
Формы с двумя кнопками отправки (с использованием и без использования проверки):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной курс (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="Отправить"><br> <input type="submit" formnovalidate="formnovalidate" value="Не проверять отправку"> </form> <p><strong>Внимание:</strong> Internet Explorer 9 и более ранние версии, или Safari, не поддерживают атрибут formnovalidate для тега input.</p> </body> </html>Проверьте, пожалуйста, ‹/›
Атрибут formtarget указывает на имя или ключевое слово, которое указывает на то, как должны отображаться данные после отправки формы.
Атрибут formtarget перекрывает атрибут target элемента <form>.
Внимание: Атрибут formtarget используется вместе с type="submit" и type="image".
Формы с двумя кнопками отправки будут отображаться в разных окнах:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной курс (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Имя: <input type="text" name="fname"><br> Фамилия: <input type="text" name="lname"><br> <input type="submit" value="Обычная отправка"> <input type="submit" formtarget="_blank" value="Отправить на новую страницу"> </form> <p><strong>Внимание:</strong> Internet Explorer 9 и более ранние версии IE не поддерживают атрибут formtarget для тега input.</p> </body> </html>Проверьте, пожалуйста, ‹/›
Атрибуты height и width определяют высоту и ширину изображения для тега <input> типа image.
Внимание: Атрибуты height и width применяются только к тегу <input> типа image.
Внимание:Обычно одновременно указываются атрибуты height и width. Если у изображения установлены высота и ширина,space, необходимое для изображения Будет сохранен при загрузке страницы. Если у этих свойств нет Браузер не знает размер изображения и не может оставить его. Достаточное пространство. Во время загрузки изображения может измениться эффект разметки страницы Даже если изображение уже загружено).
Определен кнопка отправки изображения, использующий атрибуты height и width:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной курс (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Имя: <input type="text" name="fname"><br> Фамилия: <input type="text" name="lname"><br> <input type="image" src="login_button.gif" alt="Submit"> </form> </body> </html>Проверьте, пожалуйста, ‹/›
Атрибут list определяет список значений для поля ввода. Datalist - это список значений для поля ввода.
Предопределенные значения <input> в <datalist>:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной курс (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> <p><strong>Внимание:</strong> Internet Explorer 9 (и более ранние версии IE), Safari не поддерживают тег datalist.</p> </body> </html>Проверьте, пожалуйста, ‹/›
Атрибуты min, max и step используются для определения ограничений (ограничений) для типов input, содержащих числа или даты.
Внимание: атрибуты min, max и step применяются к следующим типам элементов <input>: датчики даты, number и range.
Настройка минимального и максимального значений для элемента <input>:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной курс (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Введите дату до 1980-01-01: <input type="date" name="bday" max="1979-12-31"><br> Введите дату после 2000-01-01: <input type="date" name="bday" min="2000-01-02"><br> Количество (в диапазоне от 1 до 5): <input type="number" name="quantity" min="1" max="5"><br> <input type="submit"> </form> <p><strong>Внимание:</strong> Интернет-Explorer 9 и более ранние версии IE, Firefox не поддерживают атрибуты max и min тега input.</p> <p><strong>Внимание:</strong> <p><strong>Внимание:</strong> В Internet Explorer 10 атрибуты max и min не поддерживаются для ввода даты и времени, IE 10 не поддерживает эти типы ввода.</p> </body> </html>Проверьте, пожалуйста, ‹/›
Атрибут multiple является логическим атрибутом.
Атрибут multiple определяет возможность выбора нескольких значений в элементе <input>.
Внимание: Атрибут multiple применяется к следующим типам тегов <input>: email и file:
Загрузка нескольких файлов:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной курс (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Выберите изображение: <input type="file" name="img" multiple> <input type="submit"> </form> <p>Попробуйте выбрать одну или несколько изображений.</p> <p><strong>Внимание:</strong> Интернет-Explorer 9 и более ранние версии IE не поддерживают атрибут multiple тега input.</p> </body> </html>Проверьте, пожалуйста, ‹/›
Атрибут pattern описывает регулярное выражение, используемое для проверки значения элемента <input>.
Внимание:Атрибут pattern применяется к следующим типам тегов <input>: text, search, url, tel, email и password.
Подсказка: используется для глобального title Атрибут описывает шаблон.
Ниже приведен пример текстового поля, содержащего только три буквы (без цифр и специальных символов):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Основной курс (oldtoolbag.com)</title>
</head>
<body>
<form action="demo-form.php">
Код страны: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Трибуквенный код страны">
<input type="submit">
</form>
<p><strong>Внимание:</strong> Интернет-Explorer 9 и более ранние версии IE, или Safari не поддерживают атрибут pattern тега input.</p>
</body>
</html>Проверьте, пожалуйста, ‹/›Атрибут placeholder предоставляет подсказку (hint), описывающую ожидаемое значение поля ввода.
Краткое напоминание отображается на поле ввода перед вводом значения пользователем.
Внимание: Атрибут placeholder применяется к следующим типам тегов <input>: text, search, url, telephone, email и password.
Текст подсказки поля ввода t:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной курс (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> <input type="text" name="fname" placeholder="Имя"><br> <input type="text" name="lname" placeholder="Фамилия"><br> <input type="submit" value="Подтвердить"> </form> <p><strong>Внимание：</strong> браузеры Internet Explorer 9 и более ранние версии не поддерживают атрибут placeholder для тега input.</p> </body> </html>Проверьте, пожалуйста, ‹/›
Атрибут required является булевым атрибутом.
Атрибут required требует заполнения поля ввода перед отправкой (не может быть пустым).
Внимание:Атрибут required применяется к следующим типам тегов <input>: text, search, url, telephone, email, password, выборщики даты, number, checkbox, radio и file.
Поле ввода не может быть пустым:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной курс (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Имя пользователя: <input type="text" name="usrname" required> <input type="submit"> </form> <p><strong>Внимание：</strong> браузеры Internet Explorer 9 и более ранние версии, или Safari, не поддерживают атрибут required для тега input.</p> </body> </html>Проверьте, пожалуйста, ‹/›
Атрибут step определяет законные интервалы чисел для поля ввода.
Если step="3", то допустимые числа: -3, 0, 3, 6 и т.д.
Подсказка: Атрибут step можно использовать с Атрибуты max и min создают область значений.
Внимание: атрибут step совместно используется с типами: number, range, date, datetime, datetime-local, month, time и week.
Установить шаг input step в 3:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной курс (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> <input type="number" name="points" step="3"> <input type="submit"> </form> <p><strong>Внимание：</strong> Internet Explorer 9 и более ранние версии IE, или Firefox не поддерживают атрибут step тега input.</p> </body> </html>Проверьте, пожалуйста, ‹/›
| Тег | Описание |
| <form> | Определение формы |
| <input> | Определение поля ввода |