Вёрстка форм

DjTarik · March 24, 2010

Всем добрый вечер/день/утро/ночь (у кого как).

Верстаю уже не первый год, но вопросы всё ещё остаются.

Постоянно сталкиваюсь с различными формами и их реализациями.

Интересует, как семантически грамотно верстать различные формы.

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

Пример 1:

<form action="#" enctype="#" method="#" id="#">
		<fieldset>
			<label for="f1"><input type="text" name="#" value="Ваше имя" id="f1" /></label>
			<label for="f2"><input type="text" name="#" value="Ваш e-mail" id="f2" /></label>
			<label for="f3"><textarea name="#" cols="#" rows="#" id="f3">Ваш вопрос</textarea></label>
			<label for="f4"><input type="submit" name="#" value="Отправить" id="f4" /></label>
		</fieldset>
	</form>

Какой вариант предпочтительнее? Если оба не верны и у вас есть свой - поделитесь плиз.

(я вообще хотел в список засунуть лейблы с инпутами...)

Пример 2:

<form action="#" enctype="#" method="#" id="#">
		<fieldset>
			<label for="f1"><input type="text" name="#" value="" id="f1" /></label>
			<ul>
				<li><input type="checkbox" name="#" value="#" /></li>
				<li><input type="checkbox" name="#" value="#" /></li>
				<li><input type="checkbox" name="#" value="#" /></li>
				<li><input type="checkbox" name="#" value="#" /></li>
				<li><input type="checkbox" name="#" value="#" /></li>
				<li><input type="checkbox" name="#" value="#" /></li>
				<li><input type="checkbox" name="#" value="#" /></li>
			</ul>
			<label for="f2"><input type="submit" name="#" value="Проверить" id="f2" /></label>
		</fieldset>
	</form>

Пока так. Хочется услышать мнения.

Интересуют только теги HTML, которые нужно использовать.

P.S. Отдельно вдогонку пару вопросов:

1. Если кнопка submit стилизована - её нужно делать через тип "image"? Или можно просто стилизовать инпуп?

2. Нужны ли обёртки инпутам, если я могу обойтись и без них?

Ответы желательно обосновать. Можно ссылки на примеры.

Edited March 24, 2010 by DjTarik

rus · March 24, 2010

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

psywalker · March 24, 2010

Да можно вообще по разному вертеть формами, смотря какая ситуация. У тебя например http://photo.vvsh.ru/_ph/1/1269456572.jpg можно было бы сделать даж таблицами, т.е. три строки, первая и последняя с колспанами 1. А средняя где чекбоксы, они бы лежали в ячейках. Тут вариант наверняка, как говорится.

Если таблицы не нравятся, можно было бы и без них обойтись, просто разделить чекбоксы филдсетом, его посередине между импутами(текстовым и сабмитом), а в нём уже сделать флоатами чекбоксы с лейблами.

Кстати списки тут точно ни к чему. Вместо них нужны лейблы.

Quote
P.S. Отдельно вдогонку пару вопросов:
1. Если кнопка submit стилизована - её нужно делать через тип "image"? Или можно просто стилизовать инпуп?
2. Нужны ли обёртки инпутам, если я могу обойтись и без них?

1) Да нет, её можно так-же сделать через submit

2) Можно их в лейблы погрузить или оставить в покое, но не в ЛИ

Great Rash · March 24, 2010

В плане семантики второй вариант предпочтительней. Только я бы лейблы выкинул, зачем они там если собственно лейблов нет? Как дополнительный контейнер?

Если у вас инпут внутри лейбла, то атрибут for, кажись, не нужен. Могу ошибаться, но проверьте валидатором без него.

Quote
Нужны ли обёртки инпутам, если я могу обойтись и без них?

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

psywalker · March 24, 2010

Да, если импут в лейбле, то фор не нужен.

Далее Great Rash опятьже прав, нахрена лейблы писать, если они пустые, т.е. лишние контейнеры.

Вот тут бы я бы их поставил http://photo.vvsh.ru/_ph/1/1269456572.jpg, они как-бы оправданы, вместе с чекбоксами.

Кстати щас тока заметил. Техтарию ваще низя засовывать в лейбл точно, рядом можно для связки с for/id, но внутрь лейбла ни к чему

<label for="f3"><textarea name="#" cols="#" rows="#" id="f3">Ваш вопрос</textarea></label>

И то, тут связка не нужна, так как опятьже лейбл пустой.

DjTarik · March 24, 2010

rus said:
про стилизацию кнопок не скажу, ибо для меня это мало играет роли, а на счет примеров, так второй вариант используется чаще (еще можно туда добавить <legend>), по крайней мере с первым вариантом не сталкивался.

Ты про второй пример?

psywalker said:
Да можно вообще по разному вертеть формами, смотря какая ситуация. У тебя например http://photo.vvsh.ru/_ph/1/1269456572.jpg можно было бы сделать даж таблицами, т.е. три строки, первая и последняя с колспанами 1. А средняя где чекбоксы, они бы лежали в ячейках. Тут вариант наверняка, как говорится.
Если таблицы не нравятся, можно было бы и без них обойтись, просто разделить чекбоксы филдсетом, его посередине между импутами(текстовым и сабмитом), а в нём уже сделать флоатами чекбоксы с лейблами.
Кстати списки тут точно ни к чему. Вместо них нужны лейблы.
1) Да нет, её можно так-же сделать через submit
2) Можно их в лейблы погрузить или оставить в покое, но не в ЛИ

А почему списки не в тему? Вообще в формах их лучше не юзать?

Great Rash said:
В плане семантики второй вариант предпочтительней. Только я бы лейблы выкинул, зачем они там если собственно лейблов нет? Как дополнительный контейнер?
Если у вас инпут внутри лейбла, то атрибут for, кажись, не нужен. Могу ошибаться, но проверьте валидатором без него.
Ну если можете, значит обертки не нужны. Но, имхо, в резиновой форме без дополнительных оберток не обойтись.

Про какой пример речь?)

For нужен для IE6

Лейблы нужны для кроссбраузерного отображения полукруглой рамки.

DjTarik · March 25, 2010

В общем:

пример 2:

<form action="#" enctype="#" method="#" id="#">
            <fieldset>
              <label for="domain-name"><input type="text" name="#" value="#" maxlength="#" id="domain-name" /></label>
              <ul>
              	<li><input type="checkbox" name="#" value="#" id="domain-by" /><label for="domain-by">.by</label></li>
                <li><input type="checkbox" name="#" value="#" id="domain-ru" /><label for="domain-ru">.ru</label></li>
                <li><input type="checkbox" name="#" value="#" id="domain-com" /><label for="domain-com">.com</label></li>
                <li><input type="checkbox" name="#" value="#" id="domain-net" /><label for="domain-net">.net</label></li>
                <li><input type="checkbox" name="#" value="#" id="domain-org" /><label for="domain-org">.org</label></li>
                <li><input type="checkbox" name="#" value="#" id="domain-biz" /><label for="domain-biz">.biz</label></li>
                <li><input type="checkbox" name="#" value="#" id="domain-switch-info" /><label for="domain-switch-info">.info</label></li>
              </ul>  
              <input type="submit" name="#" value="Проверить" title="Проверить" />
            </fieldset>
          </form>

Решил остановиться на этом варианте.

1. Лейбл ставлю для обертки (хотел "p", но потом передумал, наверное так более семантически. Если кто думает иначе - скажите)

2. Всё-таки склоняюсь к спискам. Макс, разъясни, почему списки в формах - это плохо.)

3. И нужна ли кнопке какая-нить обертка?

Ответьте по пунктам, плиз...

Спасибо.

P.S. Ща напишу по первому примеру ещё.

psywalker · March 25, 2010

Quote
1. Лейбл ставлю для обертки (хотел "p", но потом передумал, наверное так более семантически. Если кто думает иначе - скажите)
2. Всё-таки склоняюсь к спискам. Макс, разъясни, почему списки в формах - это плохо.)
3. И нужна ли кнопке какая-нить обертка?

1) <label for="domain-name"><input type="text" name="#" value="#" maxlength="#" id="domain-name" /></label>

Нахрена тут нужен Лейбл, зачем лишняя обёртка?

2) Списки в формах - это несемантично, лучше уж тада таблицы

3) Если только она выполняет какую-то функцию, например связанную с тянущимся фоном либо для того, чтобы кнопка внутри тянулась на всю ширину, в общем только ради пользы. А так это снова лишняя обёртка

Great Rash · March 25, 2010

Quote
Нахрена тут нужен Лейбл, зачем лишняя обёртка?

Написал же, что для круглых углов. Как без обертки сделаешь?

psywalker · March 25, 2010

Great Rash said:
Написал же, что для круглых углов. Как без обертки сделаешь?

Тут согласен. А я в общем имел ввиду, что если без надобности, то тогда ни к чему она, лишний контейнер.

DjTarik · March 25, 2010

psywalker said:
1) <label for="domain-name"><input type="text" name="#" value="#" maxlength="#" id="domain-name" /></label>
Нахрена тут нужен Лейбл, зачем лишняя обёртка?
2) Списки в формах - это несемантично, лучше уж тада таблицы
3) Если только она выполняет какую-то функцию, например связанную с тянущимся фоном либо для того, чтобы кнопка внутри тянулась на всю ширину, в общем только ради пользы. А так это снова лишняя обёртка

1. Всё ясно. (я просто колебался, лэйбл, или параграф?)

2. Всё-таки я не вижу разницы. Мне удобнее делать списком. Есть ли что-нить уже написанное по этому вопросу? И почему списки - это не семантически? (хотелось бы разобраться, так как это распространённый элемент)

3. Тоже всё понятно.

Второй пункт мне не даёт покоя)

psywalker · March 25, 2010

DjTarik said:
2. Всё-таки я не вижу разницы. Мне удобнее делать списком. Есть ли что-нить уже написанное по этому вопросу? И почему списки - это не семантически? (хотелось бы разобраться, так как это распространённый элемент)
Второй пункт мне не даёт покоя)

Ну я не знаю, для меня это как-то неправильно, наверное уже так привык. Я бы выбрал таблицы например. Интересно, что скажет Great Rash

DjTarik · March 25, 2010

psywalker said:
Ну я не знаю, для меня это как-то неправильно, наверное уже так привык. Я бы выбрал таблицы например. Интересно, что скажет Great Rash

да.

Я бы ещё хотел услышать мнение Медведя и старожилов форума.

Всё время делал на списках)

Чуть позже выложу примет ещё одной формы. Потом скажешь, что думаешь)

По примеру 1:

<form action="#" enctype="#" method="#" id="#">
              <fieldset>
                <label for="FaqName"><input type="text" name="#" value="Ваше имя" maxlength="#" id="FaqName" /></label>
                <label for="FaqEmail"><input type="text" name="#" value="Ваш e-mail" maxlength="#" id="FaqEmail" /></label>
                <p><textarea name="#" rows="" cols="">Ваш вопрос</textarea></p>
                <input type="submit" name="#" value="Отправить" title="Отправить" class="submit" />
              </fieldset>
            </form>

Нормально? =)

psywalker · March 25, 2010

DjTarik said:

да.

Я бы ещё хотел услышать мнение Медведя и старожилов форума.

Всё время делал на списках)

Чуть позже выложу примет ещё одной формы. Потом скажешь, что думаешь)

По примеру 1:

<form action="#" enctype="#" method="#" id="#">
              <fieldset>
                <label for="FaqName"><input type="text" name="#" value="Ваше имя" maxlength="#" id="FaqName" /></label>
                <label for="FaqEmail"><input type="text" name="#" value="Ваш e-mail" maxlength="#" id="FaqEmail" /></label>
                <p><textarea name="#" rows="" cols="">Ваш вопрос</textarea></p>
                <input type="submit" name="#" value="Отправить" title="Отправить" class="submit" />
              </fieldset>
            </form>

Нормально? =)

1) Во-первых снова хочу поспорить с Great Rash и внести небольшую поправочку по поводу

Quote
Нахрена тут нужен Лейбл, зачем лишняя обёртка?
<label for="domain-name"><input type="text" name="#" value="#" maxlength="#" id="domain-name" /></label>
Написал же, что для круглых углов. Как без обертки сделаешь?

Дело в том, что лейблы не предназначены для тупо обёрток и закруглённых углов, они применяются для добавления описания к каждому элементу формы, но если его нет, то и лейбл по своей сути совершенно не нужен и лучше уж тогда для наших уголков и т.д. использовать Див. Например так <div><input type="text" name="#" value="#" maxlength="#" /></div>

Тоже самое касается и нашего примера

				<label for="FaqName"><input type="text" name="#" value="Ваше имя" maxlength="#" id="FaqName" /></label>

Незачем тут использовать лейбл, нет текста для связки с импутом!

2) Далее также неправильно будет использования параграфа в качестве обёртки текст-арии.

<p><textarea name="#" rows="" cols="">Ваш вопрос</textarea></p>

Потому-что раз уж есть у него закруглённые углы, то опятьже всё лучше обернуть в див(ы), а параграфы, которые ты используешь для того, чтобы тупо текст-арию обрамлял блочный элемент, лучше уж тогда просто в ЦСС сделать сам техт-арию блочным. Да и параграфы для этих целей уже не применяются давно.

3) Ну а тут опятьже делаем так, как нам нужно. Если необходимо, чтобы кнопка тянулась с закруглёнными углами, то может её и в дивы запихнуть, украсив нужным образом. А так можно оставить и без обёртки вполне, если тупо фон фикс повесить.

DjTarik · March 25, 2010

Спасибо, Макс. Я тебя понял.

Блин... ) Что же мне использовать тогда?) Как-то не хочется всё делать на дивах.

У кого есть ещё мнения? Кто как делает?

mishka · March 25, 2010

Все что я напишу это не истина в последней инстанции, это всего лишь мое мнение, и мои взгляды

<label for="FaqName"><input type="text" name="#" value="Ваше имя" maxlength="#" id="FaqName" /></label> - нехорошо так делать

<input type="text" name="#" value="Ваше имя" maxlength="#" id="FaqName" /> <label for="FaqName">Ваше имя</label> - Так предпочтительнее

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

Зачем для сабмита лейбл? (Я бы тут поставил попбольше знаков вопроса)

<form action="#">
	<fieldset>
		<div class="wrap">
			<!-- если есть лейбл -->
			<label for="input01">Label</label>
			<input id="input01" class="text" type="text" />
		</div>
		<div class="wrap">
			<!-- если нет лейбла -->
			<input class="text" type="text" />
		</div>
		<div class="wrap">
			<!-- если инпут нужно сделать с бг с круглыми углами (так как в ие6 бг на инпуте будет дергатся), если ие6 фтопку то можна без дива -->
			<label for="input02">Label</label>
			<div class="bg-text">
				<input id="input02" class="text" type="text" />
			</div>
		</div>
	</fieldset>
</form>

Так как я просто верстальщик, то name для инпутов я не пишу. Для верстки это ненужно, а программист сам поставит те имена которые нужны ему.

Чтобы инпуты не прыгали в ие6 их приходится флотать. Поэтому нужен блок wrap которому height:1%; overflow:hidden;

Сабмит как хочешь, можна имагой, можна сабмитом... единственное что - сабмиты на маке не стилизуются.

Я редко юзаю input type="image"

Great Rash · March 25, 2010

Quote
В форме где кучка чекбоксов - их лучше сделать списком. Опять же нестоит инпуты сунуть в лейблы.

Еще как стоит! Тогда при клике на текст будет чекаться чекбокс. Иначе придется дополнительно писать скрипт.

mishka · March 25, 2010

Quote
Еще как стоит! Тогда при клике на текст будет чекаться чекбокс. Иначе придется дополнительно писать скрипт.

Правильно это делать связкой for/id!

psywalker · March 25, 2010

Great Rash said:
Еще как стоит! Тогда при клике на текст будет чекаться чекбокс. Иначе придется дополнительно писать скрипт.

+1. Если только лейблы добавляют какое нибудь описание к чекбоксам.

DjTarik · March 25, 2010

mishka2 said:
Все что я напишу это не истина в последней инстанции, это всего лишь мое мнение, и мои взгляды
<label for="FaqName"><input type="text" name="#" value="Ваше имя" maxlength="#" id="FaqName" /></label> - нехорошо так делать
<input type="text" name="#" value="Ваше имя" maxlength="#" id="FaqName" /> <label for="FaqName">Ваше имя</label> - Так предпочтительнее
В форме где кучка чекбоксов - их лучше сделать списком. Опять же нестоит инпуты сунуть в лейблы.
Зачем для сабмита лейбл? (Я бы тут поставил попбольше знаков вопроса)
<form action="#">
	<fieldset>
		<div class="wrap">
			
			<label for="input01">Label</label>
			<input id="input01" class="text" type="text" />
		</div>
		<div class="wrap">
			
			<input class="text" type="text" />
		</div>
		<div class="wrap">
			
			<label for="input02">Label</label>
			<div class="bg-text">
				<input id="input02" class="text" type="text" />
			</div>
		</div>
	</fieldset>
</form>
Так как я просто верстальщик, то name для инпутов я не пишу. Для верстки это ненужно, а программист сам поставит те имена которые нужны ему.
Чтобы инпуты не прыгали в ие6 их приходится флотать. Поэтому нужен блок wrap которому height:1%; overflow:hidden;
Сабмит как хочешь, можна имагой, можна сабмитом... единственное что - сабмиты на маке не стилизуются.
Я редко юзаю input type="image"

Т.е, если я тебя правильно понял:

1. для обёртки инпутов используем див, а не параграф (к примеру).

2. про список - так и буду делать. Всё таки мне так удобнее (можешь поспорить с Максом =).

3. Про сабмит понял.

psywalker · March 25, 2010

mishka2 said:
Правильно это делать связкой for/id!

Если описания нет, то и связка эта не нужна.

DjTarik · March 25, 2010

Great Rash said:
Еще как стоит! Тогда при клике на текст будет чекаться чекбокс. Иначе придется дополнительно писать скрипт.

mishka2 said:
Правильно это делать связкой for/id!

psywalker said:
+1. Если только лейблы добавляют какое нибудь описание к чекбоксам.

Ребята, тут как раз таки всё понятно) Если есть связка интупт с описанием - тогда лейбл и инпут связываю через id и for.

Просто в моём примере я хотел сразу еще и уголки туда засунуть.

psywalker said:
Если описания нет, то и связка эта не нужна.

Теперь так и буду делать.

mishka · March 25, 2010

Quote
Если описания нет, то и связка эта не нужна.

тогда и лейбл ненужен

psywalker · March 25, 2010

mishka2 said:
тогда и лейбл ненужен

Ну я так и описал выше

DjTarik · March 25, 2010

Итог:

Деление на логические блоки и группы внутри формы - через 'fieldset'.

Если нужна обёртка для 'input' или 'textarea' - через див.

Если есть описание к полю - через 'label' и связку 'for' и 'id'.

Кнопки отправки можно смело стилизовать без каких либо обёрток.

В исключительный случаях, если явно прослеживается список однородных полей - через 'ul' и 'li'.

Но тогда я могу взять форму в которой 20 полей. Сделать её на списках (ведь это список полей), а уже в 'li' засунуть связку 'label' 'input'? или это уже будет не верно? O_o

psywalker · March 25, 2010

DjTarik said:
В исключительный случаях, если явно прослеживается список однородных полей - через 'ul' и 'li'.
Но тогда я могу взять форму в которой 20 полей. Сделать её на списках (ведь это список полей), а уже в 'li' засунуть связку 'label' 'input'? или это уже будет не верно? O_o

Ну да, как бы используя список вместо таблиц.

Sign In

Вёрстка форм

Question

Link to comment

Share on other sites

48 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information