MyMans

Еще html5, практически все нововведенные теги отностяся к упрощению элементов которые прочно вошли в жизнь, например без элементов даты и времени мало какой динамичный сайт, точно так же и с другим новыми элементом figure. Почти на каждом сайте есть фотография с подписью под ней, хотя и не обязательно фото, можно и видео и звук. legend позволяет помеcтить рядом подпись.

<figure>
 <legend>myMans</legend>
 <img src="pinguim-root.png" alt="myMans" />
</figure>

Новый тег для публикации диалога, логов или чатов

<dialog>
 <dt>ira</dt>
  <dd>)))</dd>
  <dd>да его же не читает никто</dd>
 <dt>u00009_mymans</dt>
  <dd>так сможешь?</dd>
</dialog>

Именно так называется новый аргумент для большинства контейнеров в новом html5. В часности дстаточно прописать его на div что бы пользователь мог его изменять.

<div id="editor1" contenteditable="true">content</div>

Как заявлено на сайте html 5 Working Draft “User agents must support this attribute on all HTML elements”
И похоже это воспринято многие браузеро-писатели всерьез воспринили этот призыв и едином порыве его поддержали Opera 9.5 Safari 3 FireFox 3 и даже IE7

Еще одно из нововедений HTML5, это нечно напоминающее GoogleSuggest

<input list="languages" name="lang">
<datalist id="languages">
  <option value="Norwegian">
  <option value="Dutch">
  <option value="English">
</datalist>

Что происходит. Так же как сейчас любой браузер начинает предлагать варианты прошлых заполнений, в этом случае от будет показывать те варианты что указаны в списке datalist. На само деле это напоминает Java контейнер где помимо предлагаемых вариантов можно было ввести еще и свой.
Еще одна прелесть в данной новинке это возможность не указывать всеь список на странице а подцепить его из xml файла.

<input list="languages">
<datalist id="languages" data="languages-3.xml"></datalist>

Сам же xml файл будет выглядеть вот так:

<select xmlns="http://www.w3.org/1999/xhtml">
 <option value="CSS"/>
 <option value="JavaScript"/>
 <option value="HTML"/>
</select>

Еще одно облегчение.

<input name="ti" type="time"
min="08:00" max="17:00" value="08:00" />

Прощайте календари на flash и javascript. Прощайте долгие и бессмысленные копания в чужом коде. Подите прочь ошибки на странице. Да здравствует аттрибут data

<input name="date" type="date" />

Тебе я хвалу воздаю, простота и чистота кода, и вам великие из консорцума, кто решил избавить вселенную от громоздких селектов для выборы даты. Да здравствует нанокод!

<input name="count" type="number" min="0" max="99" value="1" />

Думаю идея понятна. Создатели FireFox обещали в скором времени все это поддержать.

Еще одно супер дополнение это новый тип поля ввода range, который как ни странно вдруг поддерживает кроме новой Opera еще и Safari.

<input name="range" min="2" max="5"  type="range" />
<output onformchange="value = range.value">0

В итоге получает вот такой красивый слайдер и дополнение тег output который отображает все изменения. Аттрибуты min и max отвечают на промежуток.

Safari поддерживает только слайдер, но не output.

Еще одна надежда избавиться от кусков JS кода в будущем, это атрибут pattrn. С помошью регулярных выражений, он проверяет ввел ли пользователь данные соответствующие маске.

<input required="true" pattern=".*@.*\..*" type="text"
value="" name="email_address" />

вот как выглядит

по прежнему нет возможности изменить тип предупреждения, а значит очень популярным это не будет

.* - любой текст
@ - собачка
.* - любой текст
\. - точка
.* - любой текст

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

Много нововведений в HTML5 коснулись именно форм
Атрибут required следит за правильным заполнением формы

<style>
   #validation label input:valid { background:lime }
   #validation label input:invalid { background:red; color:white }
   textarea { height:4em; width:12em }
  </style>
 <form id="validation">
   <p><label>Name: <input required name=name></label></p>
   <p><label>E-mail: <input type=email required name=email></label></p>
   <p><label>URL: <input type=url name=url></label></p>
   <p><label>Comment: <textarea required name=comment></textarea></label></p>
   <p><input type=submit value=React!></p>
  </form>

Теперь если пользователь не заполнит поле с атрибутом required оно окрасится в определенный в css цвет, что хорошо, и при этом под незаполненным полем выскочит табличка что его надо заполнить. Однако дать возможность изменить саму табличку, или хотя бы ее текст, никто и не подумал, а энто уже не так хорошо.