1. Используйте label’ы

Label’ы повышают доступность Ваших форм и устанавливают связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы INPUT.

Использование label’ов не только делает разметку форм семантичной, но и позволяет присваивать им стили оформления CSS.

2. Выравнивание label’ов

Позволяет добиться оформления, как при использовании табличной разметки форм.

Все, что Вам нужно, это задать статичную ширину, выравнивание по левому краю, выравнивание текста по правому краю и задать небольшой отступ справа.

label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}

3. Старайтесь не нарушать привычного оформления элементов форм

Как известно, браузеры по умолчанию добавляют определенные стили к ряду элементов веб-страниц. В частности, добавляется рамка к стандартной кнопке выполнения формы.

Избавиться от нее можно следующим образом:

* {
border: none;
}

Однако, позаботьтесь о том, чтобы сделать красивую рамку этой кнопке.

4. Используйте псевдо-класс :focus

Примените псевдо-класс :focus ко всем полям Вашей веб-формы и оформите соответствующим образом, чтобы пользователи наглядно видели, какое поле формы активно в данный момент времени.

Делается это следующим образом:

textarea:focus, input:focus {
border: 2px solid #900;
} 

5. Выводите подсказки в полях формы с помощью простого JavaScript’а

Подсказка непосредственно в поле формы повышает удобство использования веб-формы. При нажатии на поле подсказка исчезает и больше не появляется.

Реализуется следующим образом:

<textarea name="Message" rows="20" cols="20" onfocus="this.value=''; this.onfocus=null;">Здесь подсказка...</textarea>

А теперь приведу пример готовой формы

HTML код формы

<div id="contact-area">
<form method="post" action="contactengine.php">
<label for="Name" id="Name" onfocus="this.value=''; this.onfocus=null;">Имя:</label>
<input type="text" name="Name" />
<label for="City" id="City">Город:</label>
<input type="text" name="City" />
<label for="Email" id="Email">Email:</label>
<input type="text" name="Email" />
<label for="Message" id="Message">Сообщение:</label><br />
<textarea name="Message" rows="20" cols="20" onfocus="this.value=''; this.onfocus=null;">Введите свое имя</textarea>
<input type="submit" name="submit" value="Отправить" class="submit-button" />
</form>
</div>

CSS код формы

#contact-area {
width: 600px;
margin-top: 25px;
}
#contact-area input, #contact-area textarea {
padding: 5px;
width: 400px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
}
#contact-area textarea {
height: 90px;
}
#contact-area textarea:focus, #contact-area input:focus {
border: 2px solid #900;
}
#contact-area input.submit-button {
width: 100px;
float: right;
}
label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.4em;
}