Работа с формами XHTML может быть несколько сложной, т.к. они не только используют некоторые элементы HTML, но и стирают грань между статическим содержанием и взаимодействием с пользователем. Давайте рассмотрим некоторые вещи, которые следует помнить при создании вашей следующей HTML-формы на сайте.
Хорошие html формы для сайта требуют внимания, по крайней мере, в четырех пунктах:
1.Семантика
2.Доступность
3.Функциональность
4.Дизайн
Форма может быть трудной, а иногда даже раздражающей для пользователей, часто, формы прерывают основное внимание пользователя и направление на странице: они намерены заказать подарок, или попробовать новое веб-приложение, не давая вам их адреса доставки или еще одного пароля. Эти советы будут делать формы проще для вас как для разработчика / дизайнера, и их пользователей.
Семантика
1: используйте fieldsets для инкапсуляции в аналогичных областях
Как правило, формы состоят из input внутри тега form. Когда вы получили много полей, которые пользователь должен заполнить, это может быть легче, как для пользователей, так и для вас, разработчиков, отслеживать ввод с помощью fieldsets. Многолетним примером этого является использование fieldsets, чтобы отделить платежный адрес и адрес доставки.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<fieldset> <span>Billing Address</span><input type="text" /> <span>City</span><input type="text" /> <span>Province</span><input type="text" /> <span>Postal Code</span><input type="text" /> </fieldset> <fieldset> <span>Shipping Address</span><input type="text" /> <span>City</span><input type="text" /> <span>Province</span><input type="text" /> <span>Postal Code</span><input type="text" /> </fieldset> |
2: ярлыки fieldsets с легендами
Вряд ли имеет смысл использовать FIELDSET не дав ему четкое название. Мы можем улучшить приведенный выше код, используя элемент legend в контейнере fieldsets. FIELDSET элемент имеет границу по умолчанию, и легенда будет заложена над этой границей.
|
1 2 3 4 5 6 7 |
<fieldset> <legend>Billing Address</legend> <span>Address</span><input type="text" /> <span>City</span><input type="text" /> <span>Province</span><input type="text" /> <span>Postal Code</span><input type="text" /> </fieldset> |
3: Дайте имя inputs
Если вы хотите передать данные формы через скрипт, то каждый входной (input)элемент должен иметь имя, если вы используете PHP, эти имена станут ключом к глобальному массиву, как правило, $ _POST или $ _GET.
|
1 2 3 4 5 6 |
<fieldset> <span>Billing Address</span><input type="text" name="billAddress" /> <span>City</span><input type="text" name="billCity" /> <span>Province</span><input type="text" name="billProvince" /> <span>Postal Code</span><input type="text" name="billPC" /> </fieldset> |
4: Используйте тег label
Давайте продолжать совершенствовать этот код, там нет ничего плохого в использовании тега label перед input.
|
1 2 3 4 5 6 7 |
<fieldset> <legend>Billing Affress</legend> <label>Address</label><input type="text" name="billAddress" /> <label>City</label><input type="text" name="billCity" /> <label>Province</label><input type="text" name="billProvince" /> <label>Postal Code</label><input type="text" name="billPC" /> </fieldset> |
5: Дайте тегу label атрибут «for»
Мне очень нравится атрибут «for»; он дает возможность привязать тег label к input. Значение ‘for’ должно быть такое же, как идентификатор данных, с которыми вы хотите связать его.
|
1 2 3 4 5 6 7 |
<fieldset> <legend>Billing Affress</legend> <label for="billAddress">Address</label><input type="text" id="billAddress" name="billAddress" /> <label for="billCity">City</label><input type="text" id="billCity" name="billCity" /> <label for="billProvince">Province</label><input type="text" id="billProvince" name="billProvince" /> <label for="billPC" >Postal Code</label><input type="text" id="billPC" name="billPC" /> </fieldset> |
На первый взгляд, это одна из тех вещей, которая только кажется, что влияет на качество вашего кода, но они делают специальные работы в видимом содержании: когда определены атрибуты «for», label становится «интерактивной» областью , которая будет сосредоточена на input.
6: Используйте параметр OPTGROUP, чтобы классифицировать группы
Если у вас есть много вариантов выбора, обычно лучше сгруппировать их в optgroups. <optgroup> является малоизвестным элементом, который будет делать отступы для вариантов и давать им названия. Обратите внимание, что требуется метка атрибута.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<select> <optgroup label="USA"> <option>Alabama</option> <option>Alaska</option> <option>Arizona</option> </optgroup> <optgroup label="Canada"> <option>Alberta</option> <option>British Columbia</option> <option>Manitoba</option> </optgroup> </select> |
Это дает нам следующие результаты:
7: Всегда назначайте полные атрибуты
При работе с формами в частности, соблазнительно написать так:
|
1 2 |
<label for="live">Living?</label> <input name="live" id="live" type="checkbox" checked disabled /> |
Да, он делает то, что должен делать. Нет, вы не должны так кодировать! Это не соответствует стандартам. Всякий раз, когда вы добавляете атрибуты элемента, не срезайте углы.
|
1 2 |
<label for="live">Living?</label> <input name="live" id="live" type="checkbox" checked="checked" disabled="disabled" /> |
8: Используйте кнопки вместо Submit Inputs
Как правило, <input type=»submit» /> была универсальной кнопкой «Отправить». Но HTML имеет элемент <button> (кнопка). Почему бы вам его использовать? Ну, обычно, легче стилизировать кнопки; Также, вы можете поместить изображения в пределах кнопки, поэтому кнопки действительно обеспечивают большую гибкость. Вы можете читать больше в этих двух статьях.
Доступность
9: Положите tabindex в inputs
Определенно легче сделать вкладку с помощью формы, чем использовать мышь… Однако, по умолчанию, ваш пользователь будет проходить вкладки в том порядке, в котором они прописаны в HTML. Если это не тот порядок, который вы хотите, вы можете легко добавить свойства TabIndex в input; TabIndex принимает числовое значение, и будет прыгать в input со следующего большего значения, когда вы нажмете клавишу табуляции.
|
1 2 3 |
<input type="text" tabindex="2" /> <input type="text" tabindex="1" /> <input type="text" tabindex="3" /> |
10. Определите при необходимости ключ доступа
Ключ доступа атрибутов создает сочетание клавиш, которые будут определяться как ввод: Ярлык ALT (Option) + значения ключа доступа. Конечно, вы не установите ключ доступа на каждом вводе, но это, несомненно, будет полезно, например, поле поиска. Не забудьте указать пользователям о значении ярлыка, часто это делается подчеркиванием символа как части ярлыка.
|
1 2 |
<label for="search"><span class="shortcut">S</span>earch</label> <input type="text" name="s" id="search" accesskey="s" /> |
11. Используйте хорошие методы фокусировки
Можно утверждать, что этот пункт также на стороне дизайна, как и доступность. Это всегда хорошо, если поле формы (как правило, в текстовом поле, в данном случае) изменяет цвет при наведении, но для инвалидов по зрению, это почти требование, если использовать форму корректно. Для этого можно использовать наведение psuedoclass в вашем CSS; это будет работать во всех распространенных браузерах, кроме версии IE7 и ниже. Вы также можете использовать JavaScript для этого; Jquery имеет Hover .
|
1 2 3 4 |
input[type=text]:hover { background-color:#ffff66; border-color:#999999; } |
12. Подумайте о людях, использующих программы чтения с экрана
Поскольку формы имеют тенденцию быть такими утомительным, то каждый любит хорошо продуманные формы. Но не позволяйте фантазийным формам
игнорировать программы чтения с экрана: убедитесь, что ваш ввод ясно помечен. Если вы не хотите, чтобы эти ярлыки показывались (может быть применена маркировка текста input со значениями, которые исчезают при фокусе), вы можете удалить их из визуального представления (не используйте Display: есть лучшие способы). Кроме того, программа чтения с экрана обычно ассоциируется с текстом, чтобы прямо перед input был ярлык для input. Исключением являются радио-кнопки и флажки.
Функциональность
13. Используйте правильное содержание тега type
В большинстве случаев вам не нужно будет делать ENCTYPE атрибут тега form, он по умолчанию будет в «Application / X-WWW-форм-urlencoded». Однако, если у вас есть файл ввода (input), который позволяет пользователю загрузить файл, вы должны использовать «составные формы-данных (multipart/form-data)».
|
1 2 3 4 |
<form action="verify.php" method="get" enctype="multipart/form-data"> <label for="avatar">Upload your Avatar : </label> <input type="file" name="avatar" id="avatar" /> </form> |
14: Знайте, когда использовать «Get» и когда использовать «Post»
Форма может отправить свои данные двумя способами: «Get» и «Post», вы определяете один из методов в атрибуте тега form. Какая разница, и когда вы должны их использовать? Игнорируя то, что происходит на сервере, основным отличием является то, как браузер посылает информацию. С GET, данные формы отправляются в качестве запроса, видимого в URL. Итак, эта форма. . .
|
1 2 3 4 5 6 |
<form action="you.php" method="get"> <label for="fname">First Name</label> <input type="text" name="fname" id="fname" value="Bill" /> <label for="lname">Last Name</label> <input type="text" name="lname" id="lname" value="Gates" /> </form> |
. . . приведет к URL, когда это представляется: www.example.com/you.php?fname=Bill&lname=Gates
При использовании «Post», данные передаются в заголовке HTTP запроса. Таким образом, они не видны обычному пользователю. Итак, какие нужно использовать и когда? «Post» лучше для конфиденциальных данных (например, пароли) и любых данных, которые, как правило, что-то изменяют (например, добавить запись в базу данных). Кроме того, «Post» — единственный вариант, если вы загружаете файл. «Get» — хороший вариант для запросов к базе данных, и других запросов, которые не имеют прочного влияния ни на что (Spec называют «идемпотентным»). Вообще-то, я лишь поверхностно коснулся вопросов различия, затронутых здесь. Имеются другие статьи, которые рассматривают эту тему углубленно.
15. проверка на клиенте и сервере
Проверка — это бич формы. Но лучше проверять ввод (input), как на клиенте, так и на сервере; проверка в браузере позволяет предупредить пользователей об ошибках, прежде чем представить форму, которая требует менее одной транзакции с сервером. Тем не менее, всегда будьте готовы сделать проверку на сервере ради безопасности.
16. Дайте вашим пользователям хорошие предупреждения
Это идет рука об руку с предыдущим пунктом для улучшения практики использования форм. Слишком много раз я заполнял форму, и там говорилось: «поля не были заполнены правильно». Ты умеешь писать внятно, к какой форм это имело отношение? Как только вы определили, что ваш пользователь сделал ошибку, пусть он узнает скорее и как можно более четко. Пусть текст о некорректном вводе поля отображается рядом с некорректным полем, и пусть ваш пользователь знает, что случилось с их входом. Мне нравится использовать JQuery’s Blur () в этом случае: как только пользователь переходит в следующее окно, предыдущие проверяются.
17. Попробуйте использовать AJAX для submit
Много раз результаты после заполнения формы были следующими: «Спасибо», «Проверьте свою электронную почту для подтверждения», или «Мы вернемся к вам, когда мы сможем». В таком случае, это ли не лучшее место для использования AJAX? Вы можете просто снизить форму передачи данных с JQuery или (Ваша любимая библиотека), и исчезнуть в своем сообщении.
18. Убедитесь, что форма работает без Javascript
Возможно, следовало бы пойти по пути доступности, хотя последние пару советов должны работать всегда. Убедитесь, что форма является полностью функциональной.
Дизайн
19. Стиль формирует последовательность
Я не дизайнер, и я не претендую на эту роль, но я знаю многое: не располагать ваши поля формы в хаотичном положении. Ваша форма должна быть последовательна в своем порядке. Решите, Ваш ярлык будет слева или справа (или, может быть выше или ниже) , и придерживайтесь этого. Сделать все ваши вводы текста и поля такой же ширины. В пространстве все ваши поля одинаковы. Сохраните, по крайней мере, один край всех полей на одной линии. Tuts + формы комментариев – замечательные примеры хорошо-стилизованных форм.
20. Подумайте об использовании JavaScript последовательных Стилевых форм над разными платформами
С возрастными браузерами /операционными системами, согласованность элементов формы вряд ли возможна. . . без помощи JavaScript. Если вы хотите, чтобы ваши формы выглядели так же, практически на любом браузере нужно проверить jqTransform плагина Jquery, плагины, которые направлены непосредственно на решение проблемы совместимости. Просто включите его, звоните, и настройте CSS файл на свой вкус, оно работает с IE6 +, Safari 2 +, Firefox 2 +, и Chrome.
21.Пусть Вас вдохновляют другие
Если у вас возникли проблемы с придумыванием уникального дизайна формы для своего сайта, ищите вдохновение! Smashing Magazine имеет большую подборку форм и Smileycat «Элементы дизайна» Галерея имеет кучу Блогов Комментариев к формам, которые стоит проверить.
Заключение
22: Смотри вперед в HTML 5 Формы
HTML 5 имеет много функций для веб-форм. Две наиболее интересных из них имеют новые type для input (например, URL, электронной почты и дату) и DataList элемент, который может быть использован для простого автозаполнения. Когда эти и другие части спецификации выполнены, динамичные формы будут намного проще!
Перевод и редакция: Рог Виктор и Андрей Бернацкий.
Будем надеяться, что эти двадцать с лишним советов по работе с HTML формами на сайте, помогут вам.
Автор: Andrew Burgess.
Источник: //net.tutsplus.com
E-mail:contact@webformyself.com
Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения
Комментарии (5)