Оформление формы с помощью CSS

Форма – это раздел документа, содержащий обычные данные, разметку, специальные элементы, называемые «элементы управления» (переключатель, radio-кнопка, меню и т.д.), и подписи для этих элементов управления. С помощью формы пользователь может послать некоторую информацию в некоторую заранее определенную точку внешнего мира, где информация будет некоторым образом обработана.

Тэг <form> имеет следующие атрибуты:

• accept-charset – устанавливает кодировку, в которой сервер может принимать и обрабатывать данные.
• action – адрес программы или документа, который обрабатывает данные формы.
• autocomplete – включает автозаполнение полей формы.
• enctype – способ кодирования данных формы.
• method – метод протокола HTTP, обычно он получает значение POST, тогда информация посылается отдельно от URL. Если указано значение GET, информация посылается вместе с URL.
• name – имя формы.
• novalidate – отменяет встроенную проверку данных формы на корректность ввода.
• target – имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

Синтаксис:

<form name="form1">

...

</form>

Сегодня мы сделаем красивую форму входа.

Наша форма состоит из основного блока (1), который делиться еще на 2 блока (2,3).
(4,5) – Строки ввода данных.
(6) – CHECKBOX – Позволяет вывести поле для установки флажка в виде маленького квадратика, в котором может быть произведена отметка опции «галочкой».
(7) – Кнопка типа submit (используется для создания кнопки, по нажатию которой введенные данные отправляются на сервер для обработки программой – скриптом).
(8) – Состоит из ссылки.
(9,10) – label (устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы (<input>, <select>r;, <textarea>). Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст. Кроме того, с помощью label можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.

Итак начнем!!!
Сперва надо создать форму

<form id="form" method="post">
    <div class="pole">
        <label>Имя пользователя:</label>
        <div class="input"><input type="text" id="log" /></div><	
    </div>

    <div class="pole">
        <a href="#" id="zab">Забыли пароль?</a>
    <label>Пароль:</label>
        <div class="input"><input type="password"  id="pass" /></div>
    </div>

    <div class="sub">
        <button type="submit">Войти</button>
        <label id="otmetka"><input type="checkbox" /> Запомнить меня</label>
    </div>
</form>

Всей форме мы задали идентификатор (form), первому и второму контейнеру (div) задали класс (pole), а третьему контейнеру (div) задали класс sub

checkbox-у мы задали идентификатор (otmetka)

У нас получилась вот такая форма входа.

Осталось приукрасить ее. Добавляем стили всей форме.

#form {
    width: 290px;
    padding: 24px 24px 0;
    margin: 200px auto 0;
    background: #FEFEFE;
  	border: 1px solid #CAD8DE;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    font: 14px/18px Arial, Tahoma, sans-serif;
    color: #444;
}

Стили для контейнеров div с класом pole.

#form .pole {
    margin: 0 0 18px;
}	
#form .pole label {
    display: block;
    margin: 0 0 11px;
}
#form .pole .input {
  	border-radius: 4px;
}
#form .pole input {
  	font: 12px Arial, Tahoma, sans-serif;
    color: #444;
    width: 262px;
    padding: 9px 13px;
  	border: 1px solid #D2D9DC;
    border-radius: 3px;
    box-shadow: inset 2px 2px 6px #EBEBEB, 0 0 0 5px #F7F9FA;
    outline: none;
}
#form .pole input:focus {
    border-color: #B7D4EA;
    box-shadow: inset 2px 2px 6px #EBEBEB, 0 0 4px #D0E6F6, 0 0 0 5px #F2F8FC;
}

Стили для ссылки с id zab.

#zab{
    float: right;
  	font-size: 11px;
    color: #ababab;
  	text-decoration: none;
    margin: 0;
}
#zab:hover {
    color: #444;
  	text-decoration: underline;
}

Стили для контейнера с классом sub.

#form .sub {
    overflow: hidden;
    margin: 30px -24px 0;
    padding: 22px 24px;
    background: #F0F5F7;
    border-top: 1px solid #DDE0E8;
    border-radius: 0 0 4px 4px;
    box-shadow: inset 0 1px #FFF, inset -1px -1px #F7FAFB, inset 1px 0 #F7FAFB;
  	font-size: 11px;
}

Стили для отметки “Запомнить меня”.

#otmetka {
    display: block;
    margin: 5px 0 0;
    cursor: pointer;
}
#otmetka input {
    margin: 0 4px 0 0;
    vertical-align: middle;
}

Стили для кнопки.

#form .sub button {
    float: right;
    padding: 6px 20px;
    height: 30px;
  	border-top: 1px solid #98CCE7;
  	border-bottom: 1px solid #7DB0CC;
  	border-left: 1px solid #8CBFD9;
  	border-right: 1px solid #8CBFD9;
  	border-radius: 15px;
    color: #FFF;
  	font: bold 13px Arial, Tahoma, sans-serif;
    box-shadow: inset 0 1px #D4EBF7, 0 1px 3px #B8BEBE;
    background: -moz-linear-gradient(top,  #badff3 0%, #7acbed 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#badff3), color-stop(100%,#7acbed));
    background: -webkit-linear-gradient(top,  #badff3 0%,#7acbed 100%);
    background: -o-linear-gradient(top,  #badff3 0%,#7acbed 100%);
    background: -ms-linear-gradient(top,  #badff3 0%,#7acbed 100%);
    background: linear-gradient(top,  #badff3 0%,#7acbed 100%);
    background-color: #9FD7F0;
    cursor: pointer;
    text-shadow: 0 -1px rgba(0,0,0,0.15);
    outline: none;
}
#form .sub button::-moz-focus-inner{border:0}