Автор: Крис Койер
Перевод: Всеволод Козлов

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

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

Эта статья как раз является компактным сборником основных правил создания качественных веб-форм. Милости прошу к ознакомлению!

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

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

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

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

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

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

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

Css подсказка

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

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

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

* {
border: none;
}

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

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

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

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

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

Css подсказка

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

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

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

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

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

Css подсказка

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;
}

Оригинал статьи: Tips For Creating Great Web Forms






















































Смотрите также:

Понравилась статья? Поделитесь ей в социальных сетях: