В сегодняшнем уроке я расскажу Вам несколько советов по созданию более классных веб форм.
1. Используйте ярлыки (labels)
Вам не обязательно необходимы ярлыки для того, чтобы форма работала. Однако, ярлыки все же придают порядок Вашим текстовым полям и связывают друг друга. Использование тега <label> не только семантически правильно, но и дает Вам возможность более гибко регулировать внешний вид с помощью стилей.
2. Придавайте ярлыкам значение float
С помощью float можно достичь структуры подобной таблице без использования таблиц. Просто задайте статическую ширину, придайте float значение left и добавьте небольшой отступ с правой стороны. Вышло красиво!
label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}
3. Придайте форме идентичный внешний вид во всех браузерах
Многие браузеры имеют собственные правила отображения кнопок ввода для форм. Если Вам хочется изменить это, у Вас должна быть хорошая причина для этого. Если Вы все же решили это сделать, необходимо воспользоваться технологией CSS сброса (reset). Например:
* {
border: none;
}
Это может выглядеть красиво, так как это предотвратит появление нежелательных границ вокруг некоторых объектов. Но также это изменит стили по умолчанию, которые используются для отображения кнопок ввода в Firefox.
4. Использование псевдо класса :focus
Вы можете придать стили текстовым полям, которые вступят в силу только когда юзер сделает это поле активным, используя псевдо класс :focus. К примеру, Вы можете поменять цвет границы при наведении:
textarea:focus, input:focus {
border: 2px solid #900;
}
Многие браузеры поддерживают это.
5. Заполнение советами, но при наведении их исчезновение
Может быть достаточно полезно заполнить все поля советами или напоминаниями. К примеру, у Вас есть обычная форма контактов с текстовым полем "Сообщение". Вы можете захотеть, чтобы там в поле уже была надпись "Ваши позитивные комментарии или конструктивная критика". Или же можно в поле "Имя" вписать "Ф.И.О.".
<textarea name="Message" rows="20" cols="20">Сюда совет.</textarea>
Но если Вы на этом остановитесь, пользователю необходимо будет вручную удалять текст в текстовом поле - и это не есть хорошо. Можно добавить маленький Javascript , который будет очищать совет или напоминание, когда пользователь нажимает на текстовое поле. Этот маленький скрипт выполняется лишь раз, так что если пользователь кликнет вне поля и потом захочет вернуться введеная информация не будет потеряна.
[HTML]<textarea name="Message" rows="20" cols="20" onfocus="this.value=''; this.onfocus=null;">Сюда совет.