Web разработка. Делаем стильные html формы.
Сложно представить современный интернет без форм для ввода данных. Они повсюду. Практически все web сервисы требуют авторизации или, как минимум, ввода имени и адреса email. Для ускорения работы с формами существуют специальные программы, многие браузеры имеют функцию автозаполнения…. Но сегодня речь не о них.
Мы посмотрим, как сделать обычную html форму удобнее для посетителей. И, кроме того, сделаем ее доступной для программ чтения с экрана, текстовых браузеров и тому подобного софта.
Рассмотрим html разметку страницы с формой:
-
<form id="hform" action="#" method="post">
-
<label for="userName">Имя:</label>
-
<input type="text" id="userName" class="inputField" />
-
</p>
-
<label for="userEmail">eMail:</label>
-
<input type="text" id="userEmail" class="inputField" />
-
</p>
-
<input type="submit" name="btn" value="Отправить" />
-
</p>
-
</form>
Тут создана обычная форма с двумя текстовыми полями для ввода имени и адреса email.
Сразу обратите внимание на тег <label>. Внутри него находится текст, который поясняет, что нужно вводить в соответствующее поле формы. Атрибут for этого тега указывает на поле формы, к которому относится данный <label>.
Примечание: значение атрибута for должно совпадать с именем соответствующего поля формы (атрибут id).
Что дает использование этого тега? Для обычного браузера – ничего. Потому что человек визуально оценивает размещение элементов на странице. Программы чтения web страниц сделать такую оценку не могут, а тег <label> позволяет однозначно указать соответствие между поясняющим текстом и полями формы.
Переходим к оформлению. Html разметка остается прежней, просто добавим несколько CSS стилей:
-
body {
-
font-family: Verdana, sans-serif;
-
margin: 1em 1em 1em 1em;
-
}
-
-
input.inputField {
-
font-family: Verdana, sans-serif;
-
background-color: #E6E5EA;
-
border: solid 1px #11385F;
-
font-weight: bold;
-
}
Как видите, мы установили параметры шрифтов, цвета рамки и фона полей ввода.
После применения стилей наша форма будет выглядеть примерно так:
Рис.1. Форма без подсветки
Теперь создадим стиль, который будет изменять цвета фона и рамки активного поля (т.е. того, в который установлен курсор).
-
input.inputField:focus {
-
background-color: #FFFFFF;
-
border: solid 1px #FF0000;
-
}
Псевдо-класс :focus указывает, что стиль будет применяться только для поля, в котором находится фокус ввода (установлен курсор).
На рис.2 показано как выглядит форма при вводе адреса электронной почты.
Рис.2. Форма с подсветкой
Как видите, несколько простых стилей позволяют сделать форму значительно симпатичнее.
К сожалению, Internet Explorer не поддерживает псевдо-класс :focus (в FireFox и Opera все отображается правильно), поэтому для получения аналогичного эффекта в этом браузере придется использовать JavaScript.
Вы можете скачать архив с демонстрационной страницей.
Понравилась статья? Подпишитесь на продолжение 
!
Добавьте эту страницу в 
Комментарии (19)
Вы можете отслеживать обсуждение записи с помощью RSS 2.0
Вы также можете оставить комментарий, или трекбек с Вашего сайта.
Оставить комментарий
Хороший пример спасибо. Только вот можно было и простенький вариант скрипта для IE показать..
Можно, но JavaScript это отдельная тема.
Вообще-то, о том как это сделать я уже писал.
Спасибо Вам, действительно прикольно получается.
http://www.w3.org/TR/html4/interact/forms.html#h-17.9.1
for должен содержать идентификатор, а не имя.
а вообще, в данном случае предпочтительнее просто вкладывать инпут в лэйбл.
также не стоит для инпутов задавать серый фон, ибо так обычно оформляются отключённые поля.
Спасибо огромное! Уже исправил.
Вложить инпут в лэйбл, конечно, можно и разметка в данном случае упроститься, но мне хотелось показать более общий случай.
По-поводу серого фона тоже согласен. Я выбрал первый попавшийся. А подбирать нужно в соответствии с общим дизайном.
в коде исправил, а в тексте - нет
Спасибо!
Да, сколько ошибки не исправляй, а все равно останутся…
Хорошо, что есть внимательные читатели
А как насчет использования <fieldset&ht;?
Очень полезная для текстридеров штука…
Да и, кроме всего прочего, стоит после создания формы прогонять ее валидатором accessibility. Наподобие http://www.cynthiasays.com/fulloptions.asp
По-моему fieldset предназначен для форм, которые можно разделить на группы по смыслу (например, адрес и место работы).
В данном случае форма слишком маленькая.
А вообще, если в форме более 5 полей (плюс-минус), то fieldset очень помогает.
Как говорит спецификация HTML,
The FIELDSET element allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this element makes documents more accessible.
То есть — использование fieldset допустимо (и даже желательно) для любых связанных полей.
Хорошо еще добавить legend, чтобы те же самые text readers могли зачитать название списка полей.
Ну, в общем — в спецификации это достаточно хорошо описано.
Согласен, только в этом примере всего 2 поля. Да, они тематически связаны, и для полноты примера, наверное, можно было его добавить.
Но я, честно говоря, сомневаюсь, что fieldset сильно повлияет на удобство использования такой маленькой формы.
Правда, устройства чтения с экрана я сам не использовал, поэтому может я и ошибаюсь.
Fieldset сделает форму логичнее.
Вот, пример — у нас есть форма для добавления комментария (да, на этом блоге).
Вопрос — фраза "Оставить комментарий" имеет какое-нибудь отношение к форме добавления комментария? Насколько я вижу внутри html, это просто заголовок, не более того. И с формой он никак не связан.
Логичнее было бы вынести всю форму в fieldset, и заголовок сделать как Legend к форме.
)
(да, я знаю, что стандартный WP выводит этот текст именно с помощью h3, но ничего не могу с собой поделать
Все, сдаюсь
Действительно, нужно было нормально переделать тему WP.
Кстати, если уж придираться, то у кто-то вообще не перевел "Leave a comment", не говоря об h3
Только без обид, блог очень хороший.
Если быть предельно откровенным, то я единственное на что сподвигся — это поставить бесплатную тему и подсветку синтаксиса. А блог — вообще из предустановленных на хостинге
Там получилось так, что нужно было проверить, как оно работает
Поставил блог 
Ну, и чтобы он не пустовал — начал писать статейки :)))
Будет время — сделаем. И тему, и плагины, и перевод (локализовать, правда, буду вручную, а не брать готовое), и интеграцию, если не заломает
И то первое время он даже особо не велся 
Блог ведь еще маленький, ему всего-то полтора месяца
Я, честно говоря, тоже планировал уделять блогу гораздо больше внимания…
Так тут ведь все дело в том, что есть такая штука — работа называется.
Хотя она, конечно, дает свои плюсы (вроде материалов для блога).
Ну да ладно, глобальных планов у меня много, а все их разгрести не выходит…
Да, работа требует времени. Но многие очень хорошие блоги ведутся действительно очень хорошими профессионалами. И как люди все успевают?
Ну, блог же я все-таки веду
Я думал будет что-то действительно интересное. Я про эту статью.