Новые формы HTML5 : Программирование для всех. Языки программирования, программирование баз данных, технологии. Статьи для програмиста скачать бесплатно учебники книги документация форум : Статьи

Автор: Потапов Геннадий (TermiT)

Небольшое вступление
В свете новых событий вокруг отказа W3C от продолжения работы над XHTML (ознакомится с этим событием можно в статье Ивана Сагалаева - W3C возвращается к HTML) я решил выяснить, чем же HTML5 будет полезен для разработчика, использующего AJAX…

Итак представляю вам с вольный перевод коротенькой заметки «Improve your forms using HTML5!», которая, кстати, была написана еще до всех этих событий вокруг консорциума и HTML5…

Советы от dev.opera.com.
С момента релиза HTML4 в 1998 году язык совсем не обновлялся. Несмотря на это? начиная с 2004 года, участники WHATWG community (объединение разработчиков браузеров Safari, Opera, FireFox) продолжали работу над HTML, в итоге были добавлены новые возможности (некоторые из них, в принципе, давно уже напрашивались).

В данной статье будет рассмотрена функциональность форм HTML5, так называемые Web Forms 2. (Приведенные примеры отлично работаю в Opera, FireFox и Safari)

autofocus и пропуск атрибутов
Новые вебформы позволяют производить валидацию данных и много других интересных вещей, которые упрощают работу программистам/верстальщикам. Например, рассмотрим следующий код:

<form action=“” method=“get”>
<p><label>Search:<br />
<input name=search type=“text” id=“search”/></label></p>
<script> document.getElementById(’search’).focus() </script>
< !–остальная часть формы–>
</form>

Его можно заменить, используя новые формы следующим кодом:

<form>
<p><label>Search: <input name=“search” autofocus/></label></p>
< !–остальная часть формы –>
</form>

Часть кода из первого примера исчезла, и добавился новый атрибут autofocus. Благодаря атрибуту autofocus мы избавились от javascript’a и атрибута id, по которому обращался к input тот самый javascript. Атрибут method тэга form можно опустить, т.к. метод GET для формы будет установлен по умолчанию. Аналогично, input по умолчанию получит тип text. Также работая с Web Forms 2 мы можем опустить action в тэге form, эффект будет такой же, как если бы мы указали action пустую строку.

Валидация форм
Сейчас разработчики используют навороченные скрипты для проверки форм на стороне клиента, вскоре можно будет просто написать:

<form>
<p><label>Name: <input name=“name” required/></label></p>
<p><label>E-mail: <input name=“email” type=“email” required/></label></p>
<p><label>URL: <input name=“url” type=“url” /></label></p>
<p><label>Comment: <textarea name=“comment” required></textarea></label></p>
<p><input type=“submit” value=“React!” /></p>
</form>

Код прост и понятен, словно читаешь текст на английском . Когда пользователь пытается отправить данные формы браузер проверяет все условия, если все в порядке, то данные отправляются, иначе пользователю выдаётся сообщение с ошибкой. Конечно, это не освобождает вас от проверки данных на серверной части, но это освобождает пользователя от лишних перезагрузок страницы и вас от лишнего кода.

В коде использовались новые компоненты 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

В наше время многие пользователи Интернета превращаются в его строителей. Насмотревшись на чужие сайты, простой интернетчик начинает задумываться и о собственном "офисе" в этом мегаполисе. Но как? В какой программе? На каком языке? Именно на последний вопрос даёт развёрнутый ответ эта статья. А поскольку Вы её читаете, то видимо тоже заинтересованы в создании своего сайта.

Обзор Google Chrome : Впечатления очевидца. Полный обзор Google Chrome Beta с точки зрения придирчивого программиста. Google Chrome, Браузер, Beta Огнеслав

Инструменты Internet Explorer 8 Beta 2 для разработчиков.

В марте этого года мы уже писали об инструментах для разработчика в IE8 Beta 1, но IE8 Beta2 позволяет более полно использовать инструменты за счет значительных изменений в имеющихся функциях, а также новых возможностей. В принципе инструменты для разработчика должны обладать следующими свойствами: Быть интегрированными и простыми в использовании; Иметь визуальный интерфейс; C их помощью можно быстро протестировать сайт.