Новые формы HTML5
Небольшое вступление
В свете новых событий вокруг отказа W3C от продолжения работы над XHTML (ознакомится с этим событием можно в статье Ивана Сагалаева - W3C возвращается к HTML) я решил выяснить, чем же HTML5 будет полезен для разработчика, использующего AJAX…
Итак представляю вам с вольный перевод коротенькой заметки «Improve your forms using HTML5!», которая, кстати, была написана еще до всех этих событий вокруг консорциума и HTML5…
Потапов Геннадий (TermiT)
Советы от dev.opera.com.
С момента релиза HTML4 в 1998 году язык совсем не обновлялся. Несмотря на это? начиная с 2004 года, участники WHATWG community (объединение разработчиков браузеров Safari, Opera, FireFox) продолжали работу над HTML, в итоге были добавлены новые возможности (некоторые из них, в принципе, давно уже напрашивались).
В данной статье будет рассмотрена функциональность форм HTML5, так называемые Web Forms 2. (Приведенные примеры отлично работаю в Opera, FireFox и Safari)
autofocus и пропуск атрибутов
Новые вебформы позволяют производить валидацию данных и много других интересных вещей, которые упрощают работу программистам/верстальщикам. Например, рассмотрим следующий код:
Его можно заменить, используя новые формы следующим кодом:
Часть кода из первого примера исчезла, и добавился новый атрибут autofocus. Благодаря атрибуту autofocus мы избавились от javascript’a и атрибута id, по которому обращался к input тот самый javascript. Атрибут method тэга form можно опустить, т.к. метод GET для формы будет установлен по умолчанию. Аналогично, input по умолчанию получит тип text. Также работая с Web Forms 2 мы можем опустить action в тэге form, эффект будет такой же, как если бы мы указали action пустую строку.
Валидация форм
Сейчас разработчики используют навороченные скрипты для проверки форм на стороне клиента, вскоре можно будет просто написать:
Код прост и понятен, словно читаешь текст на английском . Когда пользователь пытается отправить данные формы браузер проверяет все условия, если все в порядке, то данные отправляются, иначе пользователю выдаётся сообщение с ошибкой. Конечно, это не освобождает вас от проверки данных на серверной части, но это освобождает пользователя от лишних перезагрузок страницы и вас от лишнего кода.
В коде использовались новые компоненты url и email, а также новый атрибут required. Кроме того, в Web Forms 2 добавлены следующие элементы dates, time, numbers, add, remove. Примеры их работы можно посмотреть тут.
Стили
Задать стиль элементу очень просто, достаточно воспользоваться новыми псевдо-классами :
input:required { background:yellow }
Аналогично и с отключенными элементами (disabled control), отмеченными чекбоксами (checked checkboxe), кнопками отправки формы (default submit button),read-only элементами и т.д.:
input:disabled { … } input:checked + label { … } input[type=button]:default { … } input:read-only { … }
Пример формы в действии.
Заключение
Web Forms 2 это только малая часть того, что реализовано и еще будет реализовано в HTML 5. Например, появляется замечательный тэг , который позволяет веб-разработчикам создавать двумерные рисунки при помощи JavaScript. (есть интересная статейка о использовании canvas: AJAX, HTML-холст, и Суперпоезд). Советую всем ознакомится с черновиком спецификации HTML 5
Все это хорошо, но пока о HTML5 не будет знать самый распространенный броузер, до тех пор будет больше работы у программистов.
IE все равно придется принять этот стандарт, просто сейчас у них есть две причины этого не делать: первая у них есть еще куча “старых” стандартов, которые они еще не поддерживают, а вторая на данный момент HTML5 еще в стадии разработки…
Тупость. Ничего хорошего в том что откажутся от правильности xhtml. Опять будет каша как в html4. Новые типы полей ввода в форме – удобно, но надеюсь эти картинки которые появляются возле полей можно будет заменить?
Nikita, а что правильного в xhtml? Если бы хоть один браузер поддерживал эту правильность, то возможно был бы толк… Советую вам прочесть небольшой цикл статей HTML vs. XHTML: https://softwaremaniacs.org/blog/category/web/xhtml-vs-html/
Возможно, вы изменити своё мнение…
Читал я эти статьи и во многом не согласен. “Если бы хоть один браузер поддерживал эту правильность, то возможно был бы толк…” – вы имеете в виду IE6? Это не браузер, это велосипед на квадратных колёсах.
Ещё год и думаю все браузеры будут знать HTML5 главное чтобы не перестали поддерживать то что уже знают. Новые возможности это хорошо, появился web 2.0, его не все полюбили, но отреагировали все. На этой реакции многие заработали
HTML5 будет не скоро, XHTML уже 7 лет продвигают, все продвинуть не могут.
Nikita, не важно какой это браузер, по правилам xhtml, любой браузер при ошибке xml-парсинга страницы должен выдать фатальную ошибку и прикратить загрузку страницы… И много браузеров поступают так? Я встречал только один такой браузер и то он был разработан консорциумом.
На счет не скоро, это вполне возможно, но консорциум говорил о 2010 годе…
Проблема в том,
что это случится очень нескоро. Пока 50% интернетчиков сидят в ИЕ6, никакого HTML5 не получится. Мне, например, ИЕ7 не подходит по причине кривого интерфейса, а ставить ФФ2 просто не вижу смысла. Поэтому пока пользуюсь ИЕ6 и ФФ1.5.
Но на будущее, для расширения кругозора – конечно, интересная статья.
>> любой браузер при ошибке xml-парсинга страницы должен выдать фатальную ошибку и прикратить загрузку страницы…
И это правильно. Проблема в разработчиках браузеров. Они тормозят внедрение xhtml в массы.
Хочу заметить один момент интересный. Проверку делали на стороне клиента те, кто хоть что-то понимал. Теперь это будет сделать просто и легко и никаких знаний не понадобится – это означает что пойдет новая волна низко уровневых кодеров и продуктов с прорешоченной системой безопастности
=)
Ура товарищи! скоро мы станем Богом!
>>>И это правильно. Проблема в разработчиках браузеров. Они тормозят внедрение xhtml в массы.
Никита, это не проблема – это ход такой. Нет смысла отказываться от огромной аудитории – это же клиенты и деньги. Это надо понимать и думать не со своей позиции разработчика – идеалиста, а как-то более широко.
Народ, а скжите мне на милость, откуда вообще взяли XHTML? Надо понимать что Х – это экстэндед, то бишь расширенный. Теперь вопрос: ЧТО ИМЕННО расширенного можно увидеть в нем? Наоборот, из него вырезали много полезных вещей, которые теперь пишутся в ЦСС. Это что, расширенный ХТМЛ? бред…
То что немного изменился синтаксис написания тэгов, еще не говорит о том что это был правильный ход. Кому мешало старое написание одинарных тэгов? Представьте что огромные сайты, которые народ писал по старинке в ХТМЛ4 теперь не проходят через валидаторы. Зачем вообще придумали лишнюю спецификацию? Чтобы создать очередную путаницу? Так или иначе , все прекрасно можно было делать в ЦСС. Так теперь еще и язык урезали…
Я лично считаю, что можно было просто обновить ХТМЛ и все дела. Может я в чем то неправ? Тогда поправьте меня.
Дело в том что каждый браузер отображал большенство тэгов которые выкинули по своему. Какой тогда смысл в их использовании если всё равно приходится поднастраивать в css.
XHTML это HTML более приближённый к XML. Всё стремится к тому, чтобы использовать тэги как разметку и структурирование данных, а css для внешнего вида. К этому всё и идёт. Еслиб ещё браузеры всё по стандарту отображали…
[…] тут немножко о новых формах (Web […]
Поддержу Драконыча, большого толку в XHTML не увидел, а вот с новыми формами уже интересней. Одно не понятно, до сих пор в firefox многие теги не пашут, хотя вроде участвуют в разработках наравне с Оперой