Среди элементов, улучшенных HTML5, наиболее примечательным является элемент формы. В HTML5 формы были значительно обрезаны, и некоторые функции, которые ранее требовали кодирования JavaScript, теперь могут быть легко реализованы без кодирования. Перед началом обсуждения, что нужно отметить:
В HTML5 контроль формы может быть за пределами одной или нескольких форм, к которым он принадлежит. Следовательно, элементы управления формой, такие как Fieldset, метка и вход, имеют все добавленные атрибуты формы, чтобы идентифицировать форму, к которой принадлежит элемент управления формой. В HTML5 :1. Сам элемент формы добавляет два новых атрибута: автозаполнение и Novalidate. Свойство автозаполнения используется для включения функции раскрывающегося списка предложений, а свойство Novalidate используется для отключения функции проверки формы, которая полезна при тестировании.
2. Элемент Fieldset добавляет три новых атрибута: отключить, имя и форма. Свойство Disable используется для отключения Fieldset, свойство имени используется для установки имени Fieldset, а значение свойства формы - это идентификатор одной или нескольких форм, к которым принадлежит поле Fieldset. Как упоминалось ранее, когда полевой набор помещается за пределы формы, вы должны установить свойство формы тега Fieldset, чтобы полевой набор мог быть правильно связан с одной или несколькими формами.
3. В дополнение к атрибуту FO, элемент метки добавляет только атрибут формы. Здесь стоит упомянуть, что для атрибута, на который я никогда не обращал внимания. Для атрибута используется для указания элемента управления формой, прикрепленного к метке. Таким образом, при нажатии на эту метку прикрепленное управление формой получит фокус, например:
<form action = "demo_form.asp" id = "form1">
<label for = "name"> Щелкните меня </label> <input id = "name" type = "text"> </input>
<input type = "Отправить" value = "pospent" />
</form>
Нажмите на щелчок, и следующее окно ввода получит фокус.
4. Входной элемент вводит некоторые новые типы и атрибуты для повышения удобства использования формы. Эти новые типы вводов очень полезны для организации и классификации данных. К сожалению, ни один браузер не может хорошо поддерживать все эти типы.
В дополнение к исходной кнопке, текст, отправка, флажок, радио, выберите, пароль, HTML5 добавляет следующие новые типы вводов:
Цвет: ЦветРазличные даты: дата, DateTime, DateTime-Local, месяц, неделя, время
Электронная почта: электронная почта
Номер: номер
Диапазон
Поиск: Поиск
Телефон: Тел
Тип URL: URL
Вы можете запустить следующий пример, чтобы просмотреть статус поддержки различных браузеров:
<form action = "demo_form.asp">
Выберите свой любимый цвет: <input type = "color" name = "favcolor" />
День рождения: <input type = "date" name = "bday" />
День рождения (дата и время): <input type = "datetime" name = "bdaytime" />
День рождения (дата и время): <input type = "dateTime-local" name = "bdaytime" />
День рождения (месяц и год): <input type = "month" name = "bdaymonth" />
Выберите время: <input type = "time" name = "usr_time" />
Выберите неделю: <input type = "week" name = "week_year" />
Количество (между 1 и 5): <input type = "number" name = "Количество" min = "1" max = "5" />
Количество (между 1 и 10): <input type = "range" name = "точки" min = "1" max = "10" />
Поиск Google: <input type = "search" name = "googlesearch" />
Телефон: <input type = "tel" name = "usrtel" />
Добавьте свою домашнюю страницу: <input type = "url" name = "HomePage" />
Электронная почта: <input type = "email" name = "usremail" />
<input src = "Opperbutton.png" type = "отправить" />
</form>
Ниже приведены недавно добавленные входные свойства:
AutoCoplete : автоматически отображать ранее введенную информацию со значением или выключением. Применимо для текста, поиска, URL, тел, электронной почты, пароля, датчиков, диапазона и типов цветов. Автофокус : автоматически получайте фокус после загрузки страницы. Форма : указывает форму, к которой принадлежит вход, которая может быть множественной. Формат : указывает страницу (URL) или файл, который обрабатывает этот ввод после отправки формы. Formenctype : указывает, как данные кодируются после отправки формы. FormMethod : указывает метод HTTP для отправки данных формы, который будет переопределять метод HTTP соответствующей формы. Formnovalidate : достоверность данных не проверяется до подачи. FormTarget : указывает, где отобразить содержимое формы после подачи. Высота, ширина : длина и ширина ввода, применимо только к типам изображений. Макс, мин : максимальные и минимальные значения входного значения. Применимо к значимому числу, диапазону, типов дат. Несколько : разрешить ли ввести несколько значений, подходящих для типов электронной почты и файлов. Образец : указывает регулярное выражение для проверки входного значения, применимого к тексту, поиску, URL, тел, электронную почту, пароль. Заполнитель : информация о приглашении перед вводом, применимой к тексту, поиску, URL, тел, электронной почте, паролю. Требуется : необходимо ли это, если это не требуется, форма не может быть отправлена. Он относится к тексту, поиску, URL, тел, электронной почте, паролю, сборщикам дат, номеру, флажке, радио и типам файлов. Шаг : Введите значение шага при автоматическом выращивании, подходящем для числа, диапазона, даты, даты, дата-времени-локала, месяца, времени и недели. СПИСОК : Список кандидатов на входные элементы необходимо использовать в сочетании с элементом данных. Атрибут списка можно использовать в этих типах: текст, поиск, URL, тел, электронная почта, дата, номер, диапазон и цвет. По оценкам, он действителен на Firefox. Смотрите небольшой пример:<Fieldset>
<Легенда> фавориты </Легенда>
<p>
<Метка>
<input type = "text" name = "fastorites" list = "options">
<datalist id = "options">
<option value = "a">
<option value = "b">
<option value = "c">
</datalist>
</label>
</p>
</fieldset>
Следующий пример пытается использовать различные свойства, которые можно запускать в разных браузерах, чтобы просмотреть фактический эффект:
<form action = "demo_form.asp">
Электронная почта: <input type = "email" name = "email" autoComplete = "on" />
Изображение: <input type = "image" src = "img_submit.gif"/>
Введите дату до 1980-01-01: <input type = "date" name = "bday" max = "1979-12-31">
Введите дату после 2000-01-01: <input type = "date" name = "bday" min = "2000-01-02">
Количество (между 1 и 5): <input type = "number" name = "Количество" min = "1" max = "5" />
Выберите Images: <input type = "file" name = "img" MALTY = "MALTY" />
Код страны: <input type = "text" name = "country_code" pattern = "[a-za-z] {3}" />
Имя: <input type = "text" name = "fname" Placeholder = "Имя" />
Имя пользователя: <input type = "text" name = "usrname" требуется = "требуется" />
Номер: <input type = "number" name = "points" step = "3" />
<input type = "Отправить" />
<input type = "отправить" format = "demo_admin.asp" value = "Отправить как администратор" />
<input type = "отправить" formulactype = "multipart/form-data" value = "Отправить как Multipart/Form-Data"/>
<input type = "отправить" formula = "post" format = "demo_post.asp" value = "Отправить с помощью post" />
<input type = "отправить" formnovalidate = "formnovalidate" value = "Отправить без проверки" />
<input type = "Отправить" formTarget = "_ blank" value = "Отправить в новое окно" />
</form>
<form action = "demo_form.asp" id = "form1">
Имя: <input type = "text" name = "fname" />
<input type = "Отправить" value = "pospent" />
</form>
Фамилия: <input type = "text" name = "lname" form = "form1" />
Предложение: Хотя не все браузеры поддерживают все типы, вам все равно рекомендуется использовать эти новые типы, потому что даже если браузер не поддерживает его, он просто выродится в простой поле ввода текста. Практическая ссылка: Учебник W3C: http://www.w3schools.com/html5/default.aspОфициальное руководство HTML5: http://dev.w3.org/html5/html-author/
Довольно хороший гид -сайт: http://html5doctor.com/
HTML5 Китайский учебник: http://www.html5china.com/
Хороший фронт-блог: http://www.pjhome.net/default.asp?cateid=1
Соответствующие знания о JS Операция форм: http://www.vevb.com/xugang/archive/2010/08/12/1798005.html