Правильные HTML-формы

Работа с xHTML формами порой может быть достаточно сложной, ведь формы не только используют определенные HTML-теги, но и размывают границу между статическим и интерактивным контентом. Посему рассмотрим несколько вещей, о которых нужно помнить при создании форм.

При создании формы следует обратить внимание по крайней мере на 4 вещи:

  1. Семантика;
  2. Доступность;
  3. Функционал;
  4. Дизайн;

Форма может быть непонятной, а иногда даже раздражать пользователей. Часто форма отвлекает внимание пользователя и меняет его поведение: они хотят заказать какую-то вещь или попробовать новое web-приложение, а не вводить свой адрес или очередной пароль. Эти советы помогут сделать формы проще для вас как разработчиков/дизайнеров, так и для конечных пользователей.

Семантика

1: Использование fieldset для группировки сходных полей

Обычно вормы состоят из полей внутри тега form. И если пользователю нужно заполнить много различных полей, то лучше всего сгрупировать сходные поля с помощью тега fieldset. Классическим примером служит разделение адреса для платежа и адреса доставки:

<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: Заголовки для fieldset

Вряд ли имеет смысл использовать fieldset, не дав ему четкое название. Мы можем улучшить приведенный выше код, используя элемент legend для задания названия fieldsets. Fieldset по-умолчанию имеет границу, а заголовок будет отображаться над этой границей.

<fieldset>   
    <legend>Billing Affress</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: Имя для поля

Если вы хотите передать данные формы скрипту, каждое поле должно иметь уникальное имя. Если вы используете PHP, эти имена станут переменными в глобальном массиве.

<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

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

<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: Использование аттрибута for для label

С помощью аттрибута for можно привязать заголовок к конкретному полю. Для этого значение этого аттрибута должно совпадать со значение аттрибута name поля.

<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" for="billPC" name="billPC" />   
</fieldset>

Может показаться, что подобные вещи мало влияют на конечный результат. Однако, после привязывания заголовка к полю, заголовок становиться интерактивным элементом. Так, при клике по заголовку текстового поля, в поле установится курсор, а при клике на заголовок чекбокса, в этом чекбоксе появится отметка (или снимется).

6: Использование optgroup для организации опций

Если у вас есть много вариантов выбора, лучше сгруппировать их в optgroups. <optgroup> является малоизвестным элементом, который позволяет групировать опции и давать этим группам названия. Обратите внимание, что аттрибут label обязателен.

<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: Всегда назначайте полные атрибуты

При работе с формами есть соблазн назначить некоторые атритубы в сокращенной форме:

<label for="live">Living?</label>   
<input name="live" id="live" type="checkbox" checked disabled />

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

<label for="live">Living?</label>   
<input name="live" id="live" type="checkbox" checked="checked" disabled="disabled" />   

8: Изпользование элемента button вместо поля с типом submit

Как правило, <input type="submit" /> является универсальной кнопкой «Отправить». Но HTML имеет специальный элемент <button>. Почему бы вам его использовать? С помощью этого элемента проще стилизовать кнопку. Вы можете поместить изображения в пределах кнопки, поэтому этот элемент действительно обеспечивает большую гибкость. Вы можете читать больше в этих двух статьях.

Доступность

9: Использование tabindex для полей

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

<input type="text" tabindex="2" />   
<input type="text" tabindex="1" />   
<input type="text" tabindex="3" />   

10: Определение кнопок быстрого доступа

Аттрибут accesskey создает сочетание клавиш, благодаря которому фокус будет появляться на нужном поле при нажатии сочетания ALT (Option) + значение accesskey. Естественно, не стоит назначать accesskey всем элементам формы, однако кое-где это может быть полезно. Чтобы пользователь узнал о назначенных клавиатурных сочетаниях, применяется подчеркивание одного из символов заголовка.

<label for="search"><span class="shortcut">S</span>earch</label>   
<input type="text" name="s" id="search" accesskey="s" />

11: Правильная фокусировка

Вы можете отнести эту методу к дизайну, однако это больше относится к доступности форм. Когда форма (обычно текстовое поле) изменяет свой цвет при фокусе, это удобно. Однако для инвалидов по зрению это просто необходимо. Для достижения нужного эффекта можно использовать псевдоклассы в CSS, однако это будет работать во всех нормальных браузерах, кроме IE7 и старше. Хотя можно использовать и JavaScript. Например, jQuery

input[type=text]:hover {   
        background-color:#ffff66;   
        border-color:#999999;   
}   

Функционал

12: Использование правильного типа контента

В большинстве случаев вам не нужно будет задавать атрибут enctype для тега формы, он по умолчанию будет «application/x-www-form-urlencoded». Однако, если у вас есть поле, которое позволяет пользователю загрузить файл, вы должны использовать «multipart/form-data».

<form action="verify.php" method="get" enctype="multipart/form-data">   
    &tl;label for="avatar">Upload your Avatar : </label>   
    <input type="file" name="avatar" id="avatar" />   
</form>   

13: Знайте, когда нужно использовать GET, а когда POST

Форма может передать свои данные двумя способами: GET и POST. Вы определяете метод в теге формы. Какая разница между ними, и когда вы должны их использовать? Игнорируя то, что происходит на сервере, основным отличием является то, как браузер посылает информацию. С GET данные формы отправить в качестве запроса, видимого в URL. Т.е. эта форма…

<form action="you.php" method="get">   
    &tl;label for="fname">First Name</label>   
    <input type="text" name="fname" id="fname" value="Bill" />   
    &tl;label for="lname">Last Name</label>   
    <input type="text" name="lname" id="lname" value="Gates" />   
</form>   

…передаст данные в виде такого URL: http://www.example.com/you.php?fname=Bill&lname=Gates

При использовании метода POST, данные передаются в заголовке HTTP запроса. Таким образом, передаваемые данные не видны обычному пользователю. Итак, какой метод и когда нужно использовать? POST лучше подходит для конфиденциальных данных (например, пароли) и любых данные, которые, как правило, что-то изменяют (например, добавляют запись в базу данных). Кроме того, POST — единственный вариант, если вы загружаете файл. Но это только верхушка асберга различий. На эту тему есть другие статьи

14: Проверка на стороне клиента и на стороне сервера

Проверка введенных данных — это извечная проблема форм. Но лучше проверять данные как на стороне клиента, так и на стороне сервера; проверка в браузере позволяет обнаружить ошибки до того, как данные будут отправлены на сервер. Тем не менее, из соображений безопасности проверку данных лучше проводить на сервере.

15: Используйте понятные предупреждения

Я слишком часто вижу формы, в которых предупреждение выглядит так — «Поля были заполнены не правильно.» Как только вы определили, что пользователь допустил ошибку, пусть он узнает об этом как можно скорее и как можно более понятным образом. Разместите сообщения об ошибках рядом с ошибочным полем, и пусть пользователь знает, что случилось с введенными данными. Мне нравится использовать JQuery’s Blur () в подобном случае: до тех пор, пока пользователь не перешел в следующее поле, предыдущее не проверяется.

16: Использование AJAX для отправки формы

В большинстве случаев после отправки формы происходит перенаправление на страницу с одной фразой: «Спасибо», «Проверьте свою электронную почту для подтверждения», или «Мы вернемся к вам, когда сможем». Если это так, то лучшее место для использования AJAX сложно придумать. Вы можете просто скрыть форму, передать данные помощью с JQuery или (Ваша_любимая_библиотека), и показать сообщение.

17: Убедитесь, что все работает и без JavaScript

Убедитесь, что форма будет нормально работать и без JavaScript. Это подразумевает, что форма будет нормально отправляться, данные будут проверяться на сервере, а после перезагрузки страницы с формой будут выводиться нормальные ошибки.

Дизайн

18: Последовательные формы

Я не дизайнер, и совсем на эту роль не претендую, но я уверен в следующем: не стоит располагать поля формы случайным образом. Ваша форма должна быть оформлена последовательно. Определитесь, будут ли заголовки слева или справа (а может быть и сверху или снизу) от поля, после чего придерживайтесь этого принципа. Сделайте все текстовые поля одинаковой ширины, а так же сделайте одинаковые отступы. Выровняйте все поля по крайней мере по одной стороне. Форма для комментариев на Tuts+ может служить хорошим примером.

19: Вдохновляйтесь

Если у вас возникли трудности с придумыванием уникальной формы для своего сайта, не бойтесь подсматривать у других. У Smashing Magazine есть “большой обзор форм“http://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/, а так же стоит глянуть формы комментариев у Elements of Design.

Заключение

20: Обратите внимание на HTML5-формы

В HTML 5 есть много решений для веб-форм. Из нововведений можно отметить новые типы полей (например, URL, электронная почта и дата) и DataList элементы, который могут быть использованы для простого автозаполнения. Когда эти и другие части спецификации будут официально утверждены, динамичные формы станут намного проще!

Формы на сайтах могут быть сложными, но я надеюсь, что эти советы помогут вам сделать ваши формы выделяющимися на фоне остальных. Есть что добавить? Пишите в комментариях!

Перевод статьи: 20+ HTML Forms Best Practices for Beginners

Комментарии (RSS)

xXDeMoNXx29.09.2009 20:04№1

Пишеш про валидность кода, но при этом если кликнуть внизу страницы на ссылки валидатора – то видно что все же не все так хорошо…

xXDeMoNXx29.09.2009 20:05№2

Strict Standards: Non-static method timezone::is_dst() should not be called statically in /home/kotelnik/public_html/textpattern/lib/txplib_misc.php on line 1265

Strict Standards: Non-static method timezone::is_supported() should not be called statically in /home/kotelnik/public_html/textpattern/lib/txplib_misc.php on line 2523

Владимир30.09.2009 16:13№3

Ээээ… Это где?

Владимир04.10.2009 14:36№4

Не знаю, откуда вы выкопали эти строки, но единственный косяк был в неэкранированном тэге optgroup в тексте…

mapron10.11.2009 08:31№5

предыдущий комментатор имел ввиду
jigsaw.w3.org/css
забей, валидатор 2.1 проверяет, а не 3

Владимир10.11.2009 14:02№6

Ну в данный момент CSS валидатор ругается только на text-shadow и псевдокласс :not. :)

Исправил ссылку на CSS-ный валидатор, дабы не вводить людей в заблуждение. :D

loan09.03.2010 13:53№7

I strictly recommend not to hold back until you earn big sum of cash to buy goods! You should just take the <a href=“http://lowest-rate-loans.com/topics/personal-loans”>personal loans</a> or just short term loan and feel yourself free

Алексей06.09.2010 16:28№8

Замечание по тегу label , а именно по атрибуту for , как параметр он получает не name элемента формы,a id. Сам на эти грабли один раз наступил.

Пруф

UGGs On Sale14.11.2013 12:59№9

Greetings! Very useful advice in this particular post! It is the little changes that will make the most significant changes. Thanks a lot for sharing!

Alexander01.01.2014 04:16№10

I’m a partner in <a href=” www.wesearchtogether… “>where to buy diflucan over the counter</a> Please note that if a claim is rejected with the messages “DIN NOT COVERED”, “DIN/PIN NOT A BENEFIT”, “CARRIER AUTH <a href=” www.sierraenergycorp… “>10mg accutane results</a> When the [WHITE BALANCE] button is pressed <a href=” clnews.org/community “>amitriptyline hydrochloride tablets ip 25 mg</a> among faculty members; a systematic approach to partnership that is inclusive of

Aubrey19.08.2014 06:28№11

I’m sorry, he’s <a href=” www.hqinc.net/resear… “>buy doxycycline nz</a> But Nadal and Djokovic have now played 37 times and Nadal has won 22 of those, including this match on Monday night. He has come back from injury again. He is still 27, and still playing every point as if it is match point, making you think he will chase even the balls he cannot reach — or cannot hit for winners — until they stop rolling. <a href=” www.firstcirclelearn… “>tadacip 20 mg cheap</a> The short-term risks associated with kidney donation are relatively modest, but because many donors have additional medical conditions, it is important to evaluate their ongoing health. That’s the conclusion of a study appearing …

Bella19.08.2014 06:28№12

What company are you calling from? <a href=” www.romparoo.com/?pa… “>tadacip 10 price</a> England needed to beat Montenegro to bring it all back to a familiar place – requiring victory over old adversaries Poland at Wembley on Tuesday to secure qualification for Brazil, reviving bitter memories of October 1973 and goalkeeper Jan Tomaszewski&#039;s one-man barricade between Sir Alf Ramsey&#039;s side and their place in the following summer&#039;s World Cup. <a href=” www.firstcirclelearn… “>tadacip 20mg (generic cialis)</a> San Francisco police and fire officials, at an airport news conference, described a dramatic scene in the moments after the crash, with firefighters quickly putting out an initial blaze and clambering up escape slides to help evacuate passengers.

Maya19.08.2014 06:28№13

Where do you live? <a href=” ramadaplazabeirut.co… “>best place buy nolvadex</a> Let’s go back to my first semester at the University of Alabama. It was the night before my first collegiate final exam &ndash; an introductory economics class, I think &ndash; and I was, frankly, not ready for it. So, being a typical arrogant freshman, I thought, “Oh, no problem. I’ll just pull an all-nighter, ace the test and be playing NBA 2K11 by lunchtime. Piece of cake.” <a href=” craigthompson.net/ga… “>doxycycline 100</a> &#8220;We measured the amount and isotopic abundances of nitrogen and argon in the ancient air,&#8221; Marty posited. &#8220;Argon is a noble gas which, being chemically inert, is an ideal element to monitor atmospheric change. Using the nitrogen and argon measurements we were able to reconstruct the amount and isotope composition of the nitrogen dissolved in the water and, from that, the atmosphere that was once in equilibrium with the water.&#8221;

Madison19.08.2014 06:28№14

Could you ask her to call me? <a href=” susanronald.com/?pag… “>tadacip online bestellen</a> And the Swiss National Bank has told Credit Suisse and UBS they must cut debt levels that still topinternational rivals. Both banks reported a leverage ratio of3.8 percent at the end of the first quarter, below the 4.3percent regulators want to see by 2019. <a href=” www.firstcirclelearn… “>how to take tadacip 20 mg</a> Now, Pikmin 3 has landed on Wii U, bringing the much-loved series into the high definition era for the first time and with it, a whole heap of expectations from a Wii U audience starved of first-party Nintendo titles.

Wyatt19.08.2014 06:28№15

Sorry, you must have the wrong number <a href=” newstart.com/health “>tamoxifeno cinfa 10 mg</a> It&#8217;s called the Sourtoe Cocktail and more than 60,000 people have tried it, according to the staff at the Downtown Hotel in Dawson City, Canada, where the cocktail is served. These drinkers belong to the Sourtoe Cocktail Club. For $10, you can, too. <a href=” susanronald.com/?pag… “>order tadacip</a> Still, storm clouds lie ahead for the third-largest U.S.bank by assets as rising bond yields in the United States areexpected to cut into debt underwriting volume, and slowinggrowth in emerging markets may cut into profit from overseas.About 58 percent of its revenue last year came from outside ofNorth America.

Madelyn26.08.2014 10:03№16

Did you go to university? <a href=” www.globalinsulation… “>generic atarax</a> The academies have created mechanisms to prevent situations where young people recruited by buscones “slip in without first undergoing an examination to show that they are free from doping,” Constante said. <a href=” www.motivetrimarans…. “>flomax 0.4mg for kidney stones</a> The two men spoke privately without note-takers for 20 to 30 minutes. After the meeting, Obama aides said the conversation was &#8220;not acrimonious&#8221; and included talk about how they might work together on Syria in the future but came to no agreements.

Mackenzie26.08.2014 10:03№17

I wanted to live abroad <a href=” www.jadisshadows.com… “>suhagra 100mg reviews</a> Under Baer and his predecessors, the division has coined a term – “litigation-ready” – to represent a new willingness to go to court, and it has built up its courtroom experience with the hiring of its first director of litigation, Mark Ryan. <a href=” www.globalinsulation… “>purchase atarax</a> There have been some newsworthy moments for the Federal Reserve in the last few years, but the general public must wonder why the central bank is on the front page with such regularity these days. Whether it’s about the tapering of its quantitative easing policy or the appointment of a new chairman to replace Ben Bernanke, the Fed has been a focal point for pundits and policy thinkers alike.

Nevaeh26.08.2014 10:03№18

Could I order a new chequebook, please? <a href=” www.puntodevistacr.c… “>tamsulosin costco price</a> And while he might have got away with election fixing in 2008, it would surely be harder to repeat it in 2013, with the outside world watching more closely than ever. There was also a good chance, anyway, that Mr Mugabe’s ailing health would finish him off well before any ballot. <a href=” www.si “>suhagra price</a> To those who could lose their homes, fires are terrifying. Animals die, property is damaged, and ecosystems change. Since ecosystems and the plants within them can grow on very long time scales, these ecological changes last for generations of humans.

Mason26.08.2014 10:03№19

Jonny was here <a href=” www.globalinsulation… “>atarax 50 mg</a> In Japan they have stopped the HPV vaccine due to the high number of side effects it causes, perhaps caution is the best way forward. Fergus says that we won’t know if the vaccine works until it is used, but I don’t think we should use our children as test subjects with all the dangers that entails <a href=” www.si “>suhagra force 50 how to use</a> In a statement DMK chief Karunanidhi also said that action will be taken against any MP who is found to have signed the letter. “Will take action against DMK MPs if they signed petition against US visa for Modi. DMK does not approve of interference in visa issue. DMK does not interfere with centre’s foreign policy, and in internal affairs of a foreign country,” Karunanidhi said in his statement.

Xavier26.08.2014 10:03№20

What sort of work do you do? <a href=” dancebrazil.org/abou… “>hydroxyzine online</a> “Heaven got four beautiful angels … Jennifer, Brendan, Eva and my beautiful son Aidan,” Tarbell posted on his Facebook page. “I miss you my son my life will never be the same without you, LOVE YOU Aidan James.” <a href=” ieeesbcet.org/tag/fe… “>hydroxyzine hcl (atarax) 25mg tab</a> Elsewhere this year Lloyd’s has made U.S. mortgage portfoliodisposals and sold its Spanish retail banking business. Lastweek it agreed to sell a portfolio of European commercial realestate loans to private equity group Cerberus for 263 millionpounds.

Cheap North Face Jackets07.10.2014 00:34№21

Правильные HTML-формы / Статьи / Владимир Котельников

horny09.10.2014 15:01№22

C3Cpll www.QS3PE5ZGdxC9IoVK…

horny09.10.2014 15:01№23

PHr0Ys www.QS3PE5ZGdxC9IoVK…

pandora sale14.10.2014 07:18№24

Правильные HTML-формы / Статьи / Владимир Котельников

replica hermes handbags china usa15.10.2014 12:40№25

replica hermes handbags china usa tbnimm replica hermes reviews necklace exdxyskvko

louboutin homme juste nimubona16.10.2014 21:11№26

Mice homozygous for the Extra toes mutation (Xt/Xt) die perinatally with multiple malformations involving the brain, the eye, the nasal mucosa, the face and the skeleton. We have investigated the development of the eye defect in Xt/Xt embryos until late gestation. In early midgestation, three classes of homozygotes can be identified: some form an apparently normal optic cup and are associated with an apparently normal lens vesicle, some have distorted optic cups with abnormal and small lens vesicles, and others do not form an optic cup and have no lens placode or vesicle. In late gestation, some embryos have obviously continued to develop small eyes, which develop coloboma because the optic fissure in the optic nerve does not close. The others show degeneration of the optic nerve and eye cup, with no remnants of lenses. Even in the absence of an eye in these mutants, extra ocular muscles develop. Upon comparison with other mouse mutants with eye defects, our data suggest that the malformation of the eye in Extra toes homozygotes is due to the defective optic vesicle, and not as previously stated because of generic forces interfering with lens induction.the doomsday trail

matt17.10.2014 15:14№27

7ZhpPT www.QS3PE5ZGdxC9IoVK…

timberland boots sale in uk17.10.2014 15:56№28

The finished vinegar is tasted by assagiatori, expert tasters, from the consorzio, the consortium, to which the acetaia belongs, and, if it passes, is bottled by the consorzio.