формы

Граница вокруг формы

Создайте форму на HTML5, показанную на рис. 1.

Рис. 1

Рис. 1

Обязательные поля формы

Сделайте форму, показанную на рис. 1, в которой поля обязательные к заполнению отмечены крестиком, а необязательные поля зеленой галочкой. При корректном заполнении обязательных полей должен меняться и рисунок возле поля.

Вид формы

Рис. 1. Вид формы

Поле для ввода чисел

Сделайте в браузере Opera ввод чисел, как показано на рис. 1.

Поле для ввода числа

Рис. 1. Поле для ввода числа

Поле для поиска

Создайте поисковое поле для браузеров Chrome и Safari как показано на рисунке ниже, имеющее следующее поведение. Если поле не активно, в нем отображается текст, при получении фокуса текст внутри поля исчезает. При наборе текст отображается красным цветом.

Форма для коктейлей

Сверстайте форму из PSD-файла для ввода коктейля.

Автор дизайна Verder (Александр) — http://freeway-design.ru

Форма регистрации

Создайте без использования таблиц форму регистрации, представленную на рис. 1. Ширина обрамляющей рамки и серого поля внизу с кнопкой «Зарегистрироваться» резиновая, и меняется в зависимости от ширины окна браузера. Форма должна корректно работать в IE7, IE8, IE9, Firefox 3, Safari 5, Opera 10, Opera 11, Chrome 6 и старше.