Оцените форму!

[amelice]

Год назад начинала форму Артема (Temiks), так как знаний не было по скриптам, далеко не ушла. ))

Решила закончить начатое.

Попинайте код, верстку.

(> ИЕ7)

http://chebureks.ru/tests/form-select/#

Edited September 26, 2012 by amelice

[cyklop77]

форма отправляется даже если не заполнено ни одно поле...

Edited September 27, 2012 by cyklop77

[amelice]

форма отправляется даже если не заполнено ни одно поле...

Да, есть такое... Валидация формы не сделана.

А все остальное?

[Viper]

Сразу отмечу, что сделано хорошо, но есть еще что можно улучшить)

1. Параметры: при вводе вручную минусовое значение, порции отмечаются. Не хватает валидации по всей форме. Зачем в span.txt-title - cursor: pointer?

2. Бокали: Всплывающие хинты к бокалам лучше(и уже можно) делать без js. Хинт должен убираться, если мышка выходит за пределы изображения. По заданию нужна была возможность выбора только 1-го бокала?

3. отсутствуют <h2> и <h1>.

4. зачем на #ingredients .sign-decor - cursor: pointer? И хинт сделан не лучшим образом.

5. на кнопке "Загрузить" присутствует неприятный переход между типами курсоров...

6. <header> бессмысленно использовать как контейнер только для логотипа, ИМХО.

7. Хинты в полях ввода, по моим соображениям, лучше делать через title или placeholder, ИМХО.

[amelice]

Сразу отмечу, что сделано хорошо, но есть еще что можно улучшить)

1. Параметры: при вводе вручную минусовое значение, порции отмечаются. Не хватает валидации по всей форме. Зачем в span.txt-title - cursor: pointer?

2. Бокали: Всплывающие хинты к бокалам лучше(и уже можно) делать без js. Хинт должен убираться, если мышка выходит за пределы изображения. По заданию нужна была возможность выбора только 1-го бокала?

3. отсутствуют <h2> и <h1>.

4. зачем на #ingredients .sign-decor - cursor: pointer? И хинт сделан не лучшим образом.

5. на кнопке "Загрузить" присутствует неприятный переход между типами курсоров...

6. <header> бессмысленно использовать как контейнер только для логотипа, ИМХО.

7. Хинты в полях ввода, по моим соображениям, лучше делать через title или placeholder, ИМХО.

Спасибо, за замечания

1. Исправлю.

Параметры: при вводе вручную минусовое значение, порции отмечаются.

upd: Больше не отмечаются.

Зачем в span.txt-title - cursor: pointer?

Да, он не нужен, уберу.

upd: Убрано.

2. Ошибку вижу, исправлю.

Для одного коктейля делается рецепт.

3. А они дожны обязательно присутствовать?

4. В макете так нарисовано.

5. Это уже исправлено.

6. Так, в хедере может быть не только лого..

7. placeholder не кроссбраузерный, а title не плейсхолдер.

Edited September 27, 2012 by amelice

[Диметр]

Вот блин! В поиск вводил "Пошаговая форма" - ничего подобного не нашёл... Если бы увидел сначала Вашу работу, думаю, свою бы не выкладывал.

По верстке:

На первый взгляд, всё сделано строго по макету, что у меня вызывает восхищение.(у меня в работе очень много погрешностей + она просто не работает)

Код комментировать не буду, так как нахожусь значительно ниже по уровню верстки.

Возникает вопрос, как Вы разбили весь код на четыре разных окна?

[Viper]

3. А они дожны обязательно присутствовать?

Ну желательно... С помощью их, ты строишь структуру своего документа. Использовать <h3> без его старших братьев не логично и бессмысленно. Лучше тогда вовсе не использовать <hN>.

4. В макете так нарисовано.

Может потому-что при клике на "клубничку" должно что-то происходить? Иначе pointer бессмыслен.

При наведении вбок от изображения "клубнички"(пикс на 20-30) хинт не пропадает...

а title не плейсхолдер.

Ты не поняла. Я про то, что бы хранить хинт в title(или другом удобном атрибуте, например, в том же, placeholder), а не в value. Но это, наверное, уже дело предпочтений...

[amelice]

Если бы увидел сначала Вашу работу, думаю, свою бы не выкладывал.

Мы тут все набираемся опыта, было бы глупо, не выкладывать.

Возникает вопрос, как Вы разбили весь код на четыре разных окна?

Один документ, видимость "окон" управляется свойством display:none филдсетов.

Попробуйте добавить свойство style="display:block;" всем филдсетам в моем коде в каком нибудь браузере, увидите все "окна" в одной странице.

[amelice]

Ну желательно... С помощью их, ты строишь структуру своего документа. Использовать <h3> без его старших братьев не логично и бессмысленно. Лучше тогда вовсе не использовать <hN>.

А как бы ты сделал в таком случае?

Как видно - только в одном филдсете два заголовка, по значимости не отличаются от других заголовков, но, относится по структуре к одному филсдсету- Параметры.

Один из них h1 , а другой h2?

Ты не поняла. Я про то, что бы хранить хинт в title(или другом удобном атрибуте, например, в том же, placeholder), а не в value. Но это, наверное, уже дело предпочтений...

Буду иметь в виду, об этом не задумалась...

[Viper]

А как бы ты сделал в таком случае?

Как видно - только в одном филдсете два заголовка, по значимости не отличаются от других заголовков, но, относится по структуре к одному филсдсету- Параметры.

Один из них h1 , а другой h2?

Если бы смотрел на форму как единственное составляющее страницы(сайта), то и не использовал бы, наверное, <hN>.

Если бы она использовалась бы на каком-то сайте, то: <h1> - название сайта(например, htmlbook.ru, как текст в alt'е логотипа) или заголовок формы. <h2> - заголовки табов("Описание", "Ингредиенты", "Параметры", "Бокалы"). Все...

П.С. И я бы не использовал <nav> в данном случае...

[amelice]

2. Бокали: Всплывающие хинты к бокалам лучше(и уже можно) делать без js.

Анимация не кроссбраузерная средстами css.

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

Исправила.

Может потому-что при клике на "клубничку" должно что-то происходить? Иначе pointer бессмыслен.

При наведении вбок от изображения "клубнички"(пикс на 20-30) хинт не пропадает...

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

[Viper]

Анимация не кроссбраузерная средстами css.

Ну не будет плавности в IE... Что плохого? Квадратные углы и отсутствие теней эти пользователи пережили, ИМХО. А IE10 скоро уже выйдет.

[nerv]

Анимация не кроссбраузерная средстами css.

Ну не будет плавности в IE... Что плохого? Квадратные углы и отсутствие теней эти пользователи пережили, ИМХО. А IE10 скоро уже выйдет.

мое мнение - надо способствовать смерти старых и рождению новых. Естественный отбор

Про работу. Молодец Смотрится (в хроме) нормально. html смотреть не возможно, судя по всему какой-то модный редактор. По форме. Внизу каждого "окна" справа, есть индикатор сообщающий пользователю о том, что размеры формы можно менять мышкой. Вводит в заблуждение. Сейчас присмотрелся, есть аналогичный в левом верхнем углу, но лично я сразу не заметил. js - мало ООП.

[amelice]

Если бы смотрел на форму как единственное составляющее страницы(сайта), то и не использовал бы, наверное, <hN>.

А какой тег бы ты использовал, не могу придумать как бы это исправить.

П.С. И я бы не использовал <nav> в данном случае...

Да, он в данном случае явно лишний.

Исправлю.

[amelice]

Анимация не кроссбраузерная средстами css.

Ну не будет плавности в IE... Что плохого? Квадратные углы и отсутствие теней эти пользователи пережили, ИМХО. А IE10 скоро уже выйдет.

мое мнение - надо способствовать смерти старых и рождению новых. Естественный отбор

Разделяю ваши мнения, буду учитывать в следующей работе.

Смотрится (в хроме) нормально. html смотреть не возможно, судя по всему какой-то модный редактор. По форме. Внизу каждого "окна" справа, есть индикатор сообщающий пользователю о том, что размеры формы можно менять мышкой. Вводит в заблуждение. Сейчас присмотрелся, есть аналогичный в левом верхнем углу, но лично я сразу не заметил. js - мало ООП.

Про уголки согласна, но, в данной форме они для красоты используются.

По поводу js, ООП в моем коде - отсутсвует.

Про работу. Молодец

Edited September 28, 2012 by amelice

[Viper]

А какой тег бы ты использовал, не могу придумать как бы это исправить.

Заместо <h3>? - <legend>

[amelice]

А какой тег бы ты использовал, не могу придумать как бы это исправить.

Заместо <h3>? - <legend>

Как видно - только в одном филдсете два заголовка, по значимости не отличаются от других заголовков, но, относится по структуре к одному филсдсету- Параметры.

Один из них h1 , а другой h2?

В том-то и дело, что легенд в одном филдсете только один может быть, а у меня их два.

Edited September 28, 2012 by amelice

[Viper]

А какой тег бы ты использовал, не могу придумать как бы это исправить.

Заместо <h3>? - <legend>

Как видно - только в одном филдсете два заголовка, по значимости не отличаются от других заголовков, но, относится по структуре к одному филсдсету- Параметры.

Один из них h1 , а другой h2?

В том-то и дело, что легенд в одном филдсете только один может быть, а у меня их два.

У меня и структура, просто, была бы другая... То что у тебя <fieldset>, я бы выделил как <section>. А <fieldset>'ты использовал бы только в "Параметрах", в виде 3-х групп. Но каждый видит структуру своего(или чужого) творения по своему... А единственно правильного решения - нету, ИМХО.

Edited September 28, 2012 by Viper

[amelice]

У меня и структура, просто, была бы другая... То что у тебя <fieldset>, я бы выделил как <section>. А <fieldset>'ты использовал бы только в "Параметрах", в виде 3-х групп. Но каждый видит структуру своего(или чужого) творения по своему... А единственно правильного решения - нету, ИМХО.

Идея понравилась, передалала структуру.

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

Исправлен баг.

[SelenIT]

Использовать <h3> без его старших братьев не логично и бессмысленно.

Разве в HTML5 уже не без разницы (при условии адекватной структуры sectioning content'а)?

[Viper]

Разве в HTML5 уже не без разницы (при условии адекватной структуры sectioning content'а)?

Что касаеться построения логической структуры(содержимого) сайта, то может и нет разницы. Но приоритет в <hN> все равно отличаеться, на сколько я знаю, для, например, поисковиков.

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

1. Описание

2. Ингридиенты

3. Параметры

4. Бокалы

Вроде все нормально, но к чему относяться эти заголовки? Непонятно... Один адекватный заголовок выше уровня поставил бы все на свои места, ИМХО. То есть, всегда нужен один(уникалиный) заголовок выше уровня для группы заголовков, которые его... так сказать, делять на разделы/секции. Хотя это и не значит, что не может быть исключений.

Если, например, заменить в структуре <h1>...<h3>, только приоритет заголов на - <h3>...<h6>, то логика содержания от этого не пострадает, на сколько я понимаю, но остаеться вопрос - зачем?)

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

А все выше сказанное, только мое личное видение правильного содержания(структуры) большенства сайтов, авторы которых видят эту "истину" посвоему...

[amelice]

Разве в HTML5 уже не без разницы (при условии адекватной структуры sectioning content'а)?

Что касаеться построения логической структуры(содержимого) сайта, то может и нет разницы. Но приоритет в <hN> все равно отличаеться, на сколько я знаю, для, например, поисковиков.

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

1. Описание

2. Ингридиенты

3. Параметры

4. Бокалы

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

Имхо, по структуре документа должно быть понятно что куда относится, а не по приоритету заголовков документа. Приоритеты заголовков должны помочь выделить важную информацию и только...

Viper, но, идея сделать три филдсета с тремя легенд в моем случае - отличное решение.

Edited September 30, 2012 by amelice

[Viper]

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

Ех... вы меня совсем не поняли...( Структура документа и его содержание - немного разные вещи. Структура документа стоиться стуктурными тегами, внутри которых может находиться свое собственное содержание, но которое непосредственно связанно с основным заголовком документа или родительским секционым контейнером. То есть, в итоге получаеться - "дерево". Есть сайты-исключения, в которых содержание не строиться в виде "дерева", но на то они и - исключения.

Я то и писал, что приорит заголовков не влияет на логичность структуры. Выше навел пример: где в нем можно понять к чему относяться эти заголовки? Не было бы понятнее, если бы содержание было, например, таким:

1. Коктейль
   1. Описание
   2. Ингридиенты
   3. Параметры
   4. Бокалы

?

Да, в твоем случае, когда сайт = одна форма, содержание не играет роли. И по другим структурным тегам, атрибутам можно понять что к чему. По-этому я и говорил, что не использовал бы тут заголовки, толку от них тут... Но есть таки и действительно сложные и огромные страницы/документы.

Приоритеты заголовков должны помочь выделить важную информацию и только...

Ты говоришь, как SEOшник...((

То есть, в пределах структурного элемента считаешь нормальным ставить заголовки в, например, таком порядке:

<h2>...</h2>
Text...
<h5>...</h5>
Text...
<h1>...</h1>
Text...
<h6>...</h6>
Text...
<h2>...</h2>
Text...
<h3>...</h4>

и тд.?

Как программе определить, что в этом структурном контейнере содержание должно(визуально, например, вигрядит) как:

1. H2
   1. H5
   2. H1
   3. H6
      1. H2
      2. H3  

?

Возможно, я утрирую, но это всего лишь пример, а на практике может(и встречаеться) все что угодно...

Edited October 1, 2012 by Viper

[amelice]

Viper, буду разбираться.

Спасибо.