Моя первая форма

[gryyny]

Вот собственно http://fotki.yandex.ru/users/gryyny/view/558547/ что надо было сделать, а тут gryyny.narod.ru то что получилось.

Прошу проверить, код. Не уверен что все сделал правильно, хотелось бы услышать как нужно... Заранее спасибо.

[Viper]

1. Много елементов <p> без которых можно было обойтись. Не использовали <fieldset> для группировки полей, где это было бы уместно.

2. <label> без "cursor: pointer". Не каждый догадаеться, что это метка и что на нее можно нажать...

3. Такие елементы формы как: ПІБ, Місце знаходження нерухомості, Адреса(та, что жирным), в вашем случае(логично) являються заголовками полей формы(групп), а не метками. И уместнее помещать их в тег <legend>

4. Многие поля справа не выровнены.

5. Не использовали HTML5 атрибуты для полей ввода. Почему?

6. Метод передачи GET, в данном случае - грубая ошибка безопасности.

П.С. Старайтесь давать ID, NAME, CLASS правильные(грамматически) названия. Семантически/логически правильные названия являються плюсом.

Edited May 4, 2012 by Viper

[SelenIT]

2. <label> без "cursor: pointer". Не каждый догадаеться, что это метка и что на нее можно нажать...

Имхо, в случае, когда площадь самого поля раз в пять больше площади лейбла — толку от этого пойнтера меньше 20%. Нормальные люди всё равно будут кликать в само поле. А увидев рядом с полем (но не на самом поле) "пальчик", лично я бы первым делом подумал, что по клику выпадет какая-нибудь пояснялка (и сильно удивился бы расхождению ожиданий с действительностью).

Хоть давно понял, что я в подавляемом меньшинстве, но всё равно не могу я понять и принять этой пальчиковой истерии. Все стандарты в один голос кричат, что "пальчик" — указатель ссылки, а не "кликабельности". Все стандартные контролы типа кнопок-чекбоксов-радиобаттонов-дропдаунов, что в ОС, что в браузере по дефолту — с дефолтным курсором, и покажите мне идио оригинала, который не поймет, что "туда можно кликнуть". А на тачскринах курсор как указатель на "нажимабельность" вообще неактуален, его попросту нет. Ну дайте мне наконец, пожалуйста, ссылку на серьезное исследование по юзабилити, обосновывающее, что этот "пальчик" на всех местах действительно чему-то/кому-то помогает...

[gryyny]

1. Много елементов <p> без которых можно было обойтись. Не использовали <fieldset> для группировки полей, где это было бы уместно.

2. <label> без "cursor: pointer". Не каждый догадаеться, что это метка и что на нее можно нажать...

3. Такие елементы формы как: ПІБ, Місце знаходження нерухомості, Адреса(та, что жирным), в вашем случае(логично) являються заголовками полей формы(групп), а не метками. И уместнее помещать их в тег <legend>

4. Многие поля справа не выровнены.

5. Не использовали HTML5 атрибуты для полей ввода. Почему?

6. Метод передачи GET, в данном случае - грубая ошибка безопасности.

П.С. Старайтесь давать ID, NAME, CLASS правильные(грамматически) названия. Семантически/логически правильные названия являються плюсом.

1. Нащёт <p> вы правы, а как их лучше заменить? Не использовал <fieldset> потому что их не видно на задании, а вообще то я думал о них...

2. С <label> вопрос спорный, подумаю ещё.

3. См. пункт 1.

4. Поля с подписями "Область" "Країна" плывут в остальных браузерах если сделать их по всей ширине в chrome, пока не знаю как выровнять что бы отображалось во всех браузерах.

5. Какие html5 атрибуты?

6. Метод GET был использован чисто в моих целях, я просто забыл его сменить перед заливкой на сервер.

Названия поменяю.

Спасибо за критику, прошу по возможности ответить на мои вопросы. Хотелось бы ещё узнать нормально ли я реализовал серые подписи снизу елементов, может их можно сделать проще?

[Viper]

SelenIT, я не утверждал что это являеться ошибкой, а только обратил внимание на тот факт, что в данной форме, пользователь(неопытный) не догадаеться про возможность использования меток. А "cursor: pointer" всеголиж один из вариантов. Ну забыл я добавить - "ИМХО". Каждый сайт уникален и подход к нему, соответственно, тоже. И я не подвергся "пальчиковой истерии", и не уверен, что она есть... Мне лично так понятней, удобней - Вам, нет. Сколько людей столько и мнений. Ссылки, в том числе локальные и интерфейсные, нужно правильно выделять(что являеться правильным, на 100%, думаю, не кто не может знать), что бы человек сразу выдел/понимал разницу между ссылкой и меткой.

Ну дайте мне наконец, пожалуйста, ссылку на серьезное исследование по юзабилити, обосновывающее, что этот "пальчик" на всех местах действительно чему-то/кому-то помогает...

Ну не стоит воспринимать все так глобально. Если уточнять все нюансы, то прийдеться писать "простыни" при ревью, даже какой-то формы... Все зависит от формы и от целевой аудитории. Здесь нету факторов для анализа необходимости выделения или не выделения меток в форме. Но я придерживаюсь мнения, что метки все же, желательно, в большинстве случаев как-то выделять при наведении, ИМХО. А "cursor: pointer" наиболее простой и ненавязчивый способ... ИМХО

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

П.С. Я придерживаюсь мнения, что при разработке сайта для, так сказать, всех, нужно делать акцент на наиболее не опытных пользователях, а не "как мне(разработчику) было бы удобней". Приятно делать сайт для себя...) Но в большенстве случаев, мы делаем сайты для других...ИМХО

Edited May 5, 2012 by Viper

[Viper]

Нащёт <p> вы правы, а как их лучше заменить?

Лучше всего - убрать. Меньше тегов(особенно, если они семантически там и не нужны) - проще читать и поддерживать сайт. А для крупных проектов, будет прибавление к скорости рендеринга/постоения страницы. Каждый тег, это DOM елемент. Он как кирпич в доме: чем меньше кирпичей, тем быстрей постоиться дом.

В ващем случае, можно, в большенстве сучаев, обойтись стилями. Например, можно добавить к label(особенно тех, что вы сделали жирными) в стилях "dislay: block", а елемент <p> убрать.

5. Какие html5 атрибуты?

_http://findmebyip.com/litmus

Здесь сможешь посмотреть какие есть и их поддержку. Например, вместо type="text", можно использовать type="email". Те браузеры, которые не поддерживают будут попросту воспринимать их как дефолтные - type="text".

4. Поля с подписями "Область" "Країна" плывут в остальных браузерах если сделать их по всей ширине в chrome, пока не знаю как выровнять что бы отображалось во всех браузерах.

Не совсем понял проблему. Как вариант - float: left/right; в зависимости от расположения

Edited May 5, 2012 by Viper

[SelenIT]

П.С. Я придерживаюсь мнения, что при разработке сайта для, так сказать, всех, нужно делать акцент на наиболее не опытных пользователях, а не "как мне(разработчику) было бы удобней". Приятно делать сайт для себя...) Но в большенстве случаев, мы делаем сайты для других...ИМХО

Я полностью поддерживаю такой подход. Но у меня складывается впечатление, что очень многие разработчики плоховато представляют себе этого "наиболее неопытного пользователя" — и за неимением реальной картины заменяют ее удобными для себя мифами. Например, представляют себе его этакой дрессированной крысой с примитивным рефлексом "вижу пальчик — можно нажимать, не вижу пальчика — нельзя нажимать". Тогда как по моим наблюдениям (да и не только моим) большинство таких пользователей (которые вообще чувствуют себя "не в своей тарелке" за компьютером и пугаются любых диалоговых окошек) не чувствуют границы между интерфейсом браузера и сайтом, для них нет никакой разницы между формой поиска Гугла на сайте Гугла, панелью поиска Гугла на панели браузера и даже адресной строкой (которая по умолчанию тоже ищет в Гугле, а в Хроме совмещена с панелью поиска by design). И мне странно бывает порой слышать, будто для таких людей будет "естественно", если в половине этих мест запрос будет отсылаться по нажатию "стрелочкой", а в половине — по нажатию "пальчиком". Интуиция упрямо шепчет мне, что принцип "лепи пальчик везде, так пользователю проще" придуман разработчиками именно для упрощения жизни себе — чтобы не думать о тонких различиях семантики () разных нажимабельных элементов, а "забота" о мифическом (?) пользователе-придурке — лишь прикрытие их собственной лени. Могу, конечно, заблуждаться...

[gryyny]

_http://findmebyip.com/litmus

спасибо за ссылку.

Вот внес правки form2, жду замечаний

Edited May 5, 2012 by gryyny