HTML5 был инициирован WhatWG (Whole Hypertext Application Technology Working Group). Первоначальным названием было веб -приложение 1.0. Этот стандарт поглотил стандарт Web Forms 2.0 и был принят организациями W3C для объединения в следующем поколении стандарта HTML5.
Предисловие
Как язык с самым обширным языком программирования сегодня, HTML Language имеет характеристики простой в использовании, быстрой и совместимости платформы с несколькими просмотрами. Однако с прогрессом времени, стандарт HTML застоялся. На этот раз можно сказать, что обновление стандарта HTML5, которое все еще находится в стадии разработки, принесло новую жизненную силу на этот язык разметки. Эта статья будет сосредоточена на веб -формах 2.0 в HTML5, то есть в форме.
Формы являются общими элементами управления (наборов) на веб -страницах. От регистрации веб -сайта и входа в систему управления данными до предприятия, в основном есть формы. Причина, по которой формы настолько важны, в основном потому, что они несут ответственность за задачу обновления и взаимодействия с большим количеством пользователей и веб -фоновых данных. Можно сказать, что веб -разработчики любят и ненавидят веб -формы. Они любят свою удобную функцию сбора и организации данных, и они в значительной степени ненавидят свои функции. Некоторые функции, которые кажутся обычными на конечных пользователях веб -сайта, такие как проверка типов ввода, проверка форм, подсказка об ошибках и т. Д., Все разработчики должны потратить много усилий на использование JavaScript и DOM -программирования для удовлетворения этих естественных функциональных точек. С популярностью Ajax некоторые библиотеки инструментов JavaScript, такие как Dojo, Yui и т. Д., Получили удобные виджеты или API -интерфейсы JavaScript, чтобы уменьшить бремя для разработчиков.
HTML5 Web Forms 2.0 - это всеобъемлющее улучшение в текущих веб -формах. Поддерживая простые и простые в использовании функции, он добавляет много встроенных элементов управления или управления, чтобы удовлетворить потребности пользователей и уменьшать программирование разработчиков. На мой взгляд, HTML5 в основном улучшил текущую веб -форму в следующих аспектах:
<input type = url> </input><input type = email> </input>
<input type = date> </input>
<SELECT DATA = http: // domain/getMyoptions> </select>
<input type = text требуется> </input><входной тип = номер min = 10 max = 100> </input>
<Представление><Имя поля = Имя Индекс = 0> Питер </field>
<имя поле = пароль index = 0> Пароль </field>
</подчинение>
Я буду использовать новую систему форм HTML5, чтобы сделать простой интерфейс регистрации пользователя, включая имя пользователя, пароль, дату рождения, проблемы конфиденциальности и т. Д. Код следующим образом:
<! doctype html> <html> <head> <style> p Метка {ширина: 180px; Плавание: осталось; Текст-альбом: верно; Право накладки: 10px} таблица {margin-left: 80px} table td {border-bottom: 1px solid #cccccc} input.submit {margin-left: 80px} </style> </head> <body> <form action = '/regist' ectype = application/x-www> xml method> <p> <ply For For for for for for for for for = vame = '/pfee vame =' plostype = vame/vame vame = '/pfee vame =' plostype = ectype = vame/xml for for for for. Используйте электронную почту для регистрации) </label> <input name = 'name' обязательный тип = 'email'> </input> </p> <p> <label for = 'password'> пароль </label> <name = 'Пароль' Требуется тип = '> </input> </p> <p> <label для ='> Дата рождения </label> </p> nate 'nate' nate '> <pel'> </pel '> </pel'> </pel '> </pel'> </pel '> </pel'> </pel '> </pel'> </pel '> </pel'> </pel '> </pel'> </pel '> </pel'> </pel '> </pel'> </pel '> </pel'> </pel '> для = 'gender'> nationality </label> <select name = 'country' data = 'ounds.xml'> </select> </p> <p> <label for = 'photo'> личный аватар </label> <input type = 'file' name = 'photo' accept = 'image/*'/> </p> <tale> <thead> <td> <tly = uppetate = addTemptate = Вопрос/Вопрос = Вопрос/Вопрос = Вопрос = Вопрос/Вопрос. Вопрос </td> <td> Ответ </td> <td> </td> </head> <tr id = optrid repeat = template repeat-start = 1 repeat-min = 1 repeat max = 3> <td> <input type = text name = Вопрос [opportId] .q> </td> <td> <pint type = text name = obstricid] type = remove> delete </button> </td> </tr> </table> <p> <input type = 'propect' value = 'send' class = 'prope'/> </p> </form> </body> </html>Поскольку стандарт HTML5 все еще находится в стадии разработки, различные браузеры поддерживают функции HTML5, довольно ограниченные. Среди них Opera поддерживает его лучше по форме. Этот пример обычно работает на Opera9. Рендеринги следующие:
В этом примере используются некоторые новые элементы формы HTML5, такие как поле ввода типа электронной почты (ID) и окно ввода типа даты (дата рождения). И дубликатная модель используется для того, чтобы направлять пользователей для заполнения вопросов конфиденциальности. При загрузке персонализированных аватаров, ограничивая типы файлов, пользователи могут выбирать изображения для загрузки контента, соответствующего стандартам. Раскрывающееся входное поле для выбора для выбора пользователя национальности используется в виде источника данных. Источник аутрич -данных использует coutries.xml, а содержимое следующее:
<select xmlns = http: //www.w3.org/1999/xhtml> <purity> china </option> <опция> Япония </option> <опция> Корея </option> </select>
И Enctype of Form-Application/X-WWW-Form+XML, то есть HTML5 XML-подчинение. Таким образом, после того, как проверка формы будет передана, содержимое формы будет представлено в XML. Вы также обнаружите, что если в поле ввода идентификатора нет значения, или если введена строка типа, не являющегося E-email, после того, как вы попытаетесь отправить форму, будет встроено сообщение об ошибке, которое будет встроено в браузер.
Обновление HTML5 для управления формированием, несомненно, очень интересно. В этой статье описываются некоторые новые функции форм, а некоторые новые функции также очень захватывающие. Я полагаю, что при углубленном развитии стандартов и дальнейшем улучшении поддержки браузеров для HTML5 работа по разработке простой и простой в использовании формы станет очень простым.