Вёрстка форм

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

mishka · March 25, 2010

при верстке таких форм у меня был бы такой html:

<form action="#">
	<fieldset>
		<div class="wrap">
			<div class="bg-text"><input class="text" type="text" value="Ваше имя" /></div>
		</div>
		<div class="wrap">
			<div class="bg-text"><input class="text" type="text" value="Ваш e-mail" /></div>
		</div>
		<div class="wrap">
			<div class="bg-textarea"><textarea cols="50" rows="5"></textarea></div>
		</div>
		<div class="wrap">
			<input class="submit" type="submit" value="Отправить" />
		</div>
	</fieldset>
</form>

<form action="#">
	<fieldset>
		<div class="wrap">
			<div class="bg-text"><input class="text" type="text" /></div>
		</div>
		<div class="wrap">
			<ul class="togglegroup">
				<li>
					<input id="check-bu" class="checkbox" type="checkbox" checked="checked" />
					<label for="check-bu">.bu</label>
				</li>
				<li>
					<input id="check-ru" class="checkbox" type="checkbox" />
					<label for="check-ru">.ru</label>
				</li>
				<li>
					<input id="check-com" class="checkbox" type="checkbox" checked="checked" />
					<label for="check-com">.com</label>
				</li>
				<li>
					<input id="check-net" class="checkbox" type="checkbox" />
					<label for="check-net">.net</label>
				</li>
				<li>
					<input id="check-org" class="checkbox" type="checkbox" />
					<label for="check-org">.org</label>
				</li>
				<li>
					<input id="check-biz" class="checkbox" type="checkbox" />
					<label for="check-biz">.biz</label>
				</li>
				<li>
					<input id="check-info" class="checkbox" type="checkbox" checked="checked" />
					<label for="check-info">.info</label>
				</li>
			</ul>
		</div>
		<div class="wrap">
			<input class="submit" type="submit" value="Проверить" />
		</div>
	</fieldset>
</form>

psywalker · March 25, 2010

Медведь, а почему тебе таблицы не нравятся?

mishka · March 25, 2010

Медведь, а почему тебе таблицы не нравятся?

Макс, чтото я в этих формах таблиц невижу. Где они там?

psywalker · March 25, 2010

Макс, чтото я в этих формах таблиц невижу. Где они там?

Ну я имел ввиду вместо списков

mishka · March 25, 2010

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

psywalker · March 25, 2010

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

Понял, а вообще как реальные пацаны верстают на фирмах знатных? Тоже списками не брезгают?

DjTarik · March 25, 2010

А есть ли смысл делать список для полей <input type="text" /> ???

s0rr0w · March 25, 2010

А есть ли смысл делать список для полей <input type="text" /> ???

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

mishka · March 25, 2010

Понял, а вообще как реальные пацаны верстают на фирмах знатных? Тоже списками не брезгают?

Макс, да я ж по чем знаю?

А есть ли смысл делать список для полей <input type="text" /> ???

Лучше ненадо

psywalker · March 25, 2010

Макс, да я ж по чем знаю?

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

mishka · March 25, 2010

Это лучше всего спросить у программиста который это все выводить будет.

кстати, s0rr0w, как лучше чекбоксы сделать - в списке или например так:

<div class="togglegroup">
	<div class="item">
		<input id="check-bu" class="checkbox" type="checkbox" checked="checked" />
		<label for="check-bu">.bu</label>
	</div>
	<div class="item">
		<input id="check-ru" class="checkbox" type="checkbox" />
		<label for="check-ru">.ru</label>
	</div>
	<div class="item">
		<input id="check-com" class="checkbox" type="checkbox" checked="checked" />
		<label for="check-com">.com</label>
	</div>
	<div class="item">
		<input id="check-net" class="checkbox" type="checkbox" />
		<label for="check-net">.net</label>
	</div>
	<div class="item">
		<input id="check-org" class="checkbox" type="checkbox" />
		<label for="check-org">.org</label>
	</div>
	<div class="item">
		<input id="check-biz" class="checkbox" type="checkbox" />
		<label for="check-biz">.biz</label>
	</div>
	<div class="item">
		<input id="check-info" class="checkbox" type="checkbox" checked="checked" />
		<label for="check-info">.info</label>
	</div>
</div>

?

psywalker · March 25, 2010

Это лучше всего спросить у программиста который это все выводить будет.

Ладно, спрошу напрямую. Как у вас на работе это парни верстают обычно? Списками не брезгают? Вообще используют их, как правило для этих целей?

mishka · March 25, 2010

Незнаю.. Я привел пример как бы это сделал я. Кто как это делает я незнаю.

Ты где пропал последнее время? Я те в скайп писал пару раз, а ты такое ощущение что на полюсе

s0rr0w · March 25, 2010

Это лучше всего спросить у программиста который это все выводить будет.
кстати, s0rr0w, как лучше чекбоксы сделать - в списке или например так:
?

Мне так нравится. Все понятно и доступно.

psywalker · March 25, 2010

Ты где пропал последнее время? Я те в скайп писал пару раз, а ты такое ощущение что на полюсе

Блин, щас проблемы имеются, как выпутаюсь, сразу отвечу всем.

DjTarik · March 25, 2010

Есть ещё вот такой тип форм. Очень распространённый:

Пример 3:

Вообще - примерно так:

<form action="#" enctype="#" method="#" id="#">
		<fieldset>
			<legend>Поля, помеченные звёздочкой, обязательны к заполнению.</legend>
			<div>
				<label for="f1">Ф.И.О.</label>
				<input type="text" name="#" value="Тут будет всякая лажа..." maxlength="#" id="f1" />
			</div>
			<div>
				<label for="f2">Телефон</label>
				<input type="text" name="#" value="+375 33 123 45 67" maxlength="#" id="f2" />
			</div>
			<div>
				<label for="f3">E-mail</label>
				<input type="text" name="#" value="" maxlength="#" id="f3" />
			</div>
			<div>
				<label for="f4">Сообщение</label>
				<textarea name="#" cols="10" rows="2" id="f4"></textarea>
			</div>
			<div>
				<label for="f5">Прикрепить файл</label>
				<input type="file" name="#" value="#" id="f5"  />
			</div>
			<div>
				<label for="f6">Введите текст с картинки</label>
				<img src="#" width="#" height="#" alt="#" /><input type="file" name="#" value="#" id="f6" />
			</div>
			<input type="submit" name="#" value="#" />			
		</fieldset>
	</form>

Но я склоняюсь к списку, вместо дивов. Или вообще без них.

Полей может быть в раза два больше...

Кто как бы сделал?

mishka · March 25, 2010

<legend>Поля, помеченные звёздочкой, обязательны к заполнению.</legend>

Это не легенда, это просто инфа для юзера. Легенда это название формы.

<div>
	<label for="f1">Ф.И.О.</label>
	<input type="text" name="#" value="Тут будет всякая лажа..." maxlength="#" id="f1" />
</div>

Старайся диву клас дать, ато вдруг придется еще внутрь див всунуть, и начнется определение и переопределение...

Красная звездочка обычно делается так:

<label>Ф.И.О.<span class="recuried" title="это поле обязятельно для заполнения">*</span></label>

Зачем постоянно пишешь инпутам name="#" ?? Это разве облегчает жизнь программисту?

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

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

Но я склоняюсь к списку, вместо дивов. Или вообще без них.

Дивами делай, дивами.

Edited March 25, 2010 by mishka2

mishka · March 25, 2010

Непойму почему ты так к спискам прикипел, а дивов боишся.

Разве не проще вместо:

<ul class="class">
	<li>...</li>
	<li>...</li>
</ul>

Сделать:

<div class="class">...</div>
<div class="class">...</div>

?

Темболее что инпуты в форме по симантике явно не список.

Да и если стили отключить то форма с списком будет смотрется некрасиво.

А бывае такое что в форму потом еще какойнить явно список всунут, тогда начинается переопределение и нервотрепка.

Edited March 25, 2010 by mishka2

DjTarik · March 25, 2010

Это не легенда, это просто инфа для юзера. Легенда это название формы.
<div>
	<label for="f1">Ф.И.О.</label>
	<input type="text" name="#" value="Тут будет всякая лажа..." maxlength="#" id="f1" />
</div>
Старайся диву клас дать, ато вдруг придется еще внутрь див всунуть, и начнется определение и переопределение...
Красная звездочка обычно делается так:
<label>Ф.И.О.<span class="recuried" title="это поле обязятельно для заполнения">*</span></label>
Зачем постоянно пишешь инпутам name="#" ?? Это разве облегчает жизнь программисту?
Валидация формы - тут немогу сказать как более правильно это делать. Можна конечно генерить какойнить элемент с текстом ошибки, а стилями убрать текст и бг всунуть...
Можна класс на родителя и по классу просто бг... Кому как нравится, тут можна долго спорить что более симантично и более оправданно.
Дивами делай, дивами.

Ну, с легендой, может быть и так...

Просто всегда делал списками - а тут решил спросить - может я не верно делаю)))

Программисту пофигу, напишу я 'name' или нет) Я сам эти формы буду подключать) и какие поля, я, в принципе, знаю... Но это так. Для вида)

А звездочку и иконки слева - я засовывал в бекгроунд... Они потом типо меняются при валидации... не верно?

Непойму почему ты так к спискам прикипел, а дивов боишся.
Разве не проще вместо:
<ul class="class">
	<li>...</li>
	<li>...</li>
</ul>
Сделать:
<div class="class">...</div>
<div class="class">...</div>
?
Темболее что инпуты в форме по симантике явно не список.
Да и если стили отключить то форма с списком будет смотрется некрасиво.
А бывае такое что в форму потом еще какойнить явно список всунут, тогда начинается переопределение и нервотрепка.

Да не боюсь я... Просто ищу варианты) Не знаю, как привильно... А в инете ничего не пишут.)

mishka · March 25, 2010

Блин, ну привык списками... Вот тебе вариант блоками. Ненравится - спанами пробуй

DjTarik · March 25, 2010

Блин, ну привык списками... Вот тебе вариант блоками. Ненравится - спанами пробуй

ладно =) буду пробовать на дивах)

А если вообще без них? Т.е. сразу лэйбл и инпут?)))))))))))))))

Flyer · July 21, 2010

Эх, три страницы пустопорожнего флуда развели

Нет чтоб меня спросить сразу, и забить на это дело :-D

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

Логичным было бы, наверно, посмотреть как верстают подобные дела разработчики стандарта, W3, однако заглянув к ним на сайт, я увидел, что их-же валидатор, на вот этой http://www.w3.org/2001/sw/sweo/public/Info/ странице, например, давится ошибками.

Думайте сами, решайте сами, есть ли истина в этом мире, если даже в W3 страшно небрежно кодят.

Верстайте как хотите - вот истина в этом вопросе.

Для финального слова, так сказать.

Edited July 21, 2010 by Flyer

max999 · October 9, 2010

А почему в формах все применяют для кнопок тег input? И никто не использует для кнопок специальный тег <button>? ведь он специально для кнопок введён.

Вот: http://htmlbook.ru/html/button

Edited October 9, 2010 by max999

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

Join the conversation

Обсуждения

Important Information