Правильные веб формы. Какие они?

hostingРассмотрим несколько моментов которые необходимо учитывать при использовании форм на своих веб сайтах. И так приступим:

1. Используйте ярлыки (labels)

Вам не обязательно необходимы ярлыки для того, чтобы форма работала. Однако, ярлыки все же придают порядок Вашим текстовым полям и связывают друг друга. Использование тега <label> не только семантически правильно, но и дает Вам возможность более гибко регулировать внешний вид с помощью стилей.

2. Придавайте ярлыкам значение float

С помощью float можно достичь структуры подобной таблице без использования таблиц. Просто задайте статическую ширину, придайте float значение left и добавьте небольшой отступ с правой стороны.


label {

float: left;

text-align: right;

margin-right: 15px;

width: 100px;

}

3. Придайте форме идентичный внешний вид во всех браузерах

Многие имеют собственные правила отображения кнопок ввода для форм. Если Вам хочется изменить это, у Вас должна быть хорошая причина для этого. Если Вы все же решили это сделать, необходимо воспользоваться технологией CSS сброса (reset).

4. Использование псевдо класса :focus

Вы можете придать стили текстовым полям, которые вступят в силу только когда юзер сделает это поле активным, используя псевдо класс :focus. К примеру, Вы можете поменять цвет границы при наведении:

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

Многие браузеры поддерживают это.

5. Заполнение подсказками, но при наведении их исчезновение

Может быть достаточно полезно заполнить все поля подсказками или напоминаниями. К примеру, у Вас есть обычная форма контактов с текстовым полем «Сообщение». Вы можете захотеть, чтобы там в поле уже была надпись «Ваши позитивные комментарии или конструктивная критика». Или же можно в поле «Имя» вписать «Ф.И.О.».

<textarea cols="20" rows="20" name="Message">Подсказка которая исчезает.</textarea>

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

<textarea name="Message" rows="20" cols="20" onfocus="this.value=''; this.onfocus=null;">
Подсказка которая исчезает.
</textarea>
На этом пока все... Конечноже продолжение следует :)

  • kallinnkaa

    Да, есть над чем задуматься. Спасибо!

  • Afanasij

    +1 подписчик на вашем блоге :)

Запись навигация

Top