Расстояние между элементами опроса (input)

[Deacon]

Есть такая схема:

<form action="#">
<input type="radio" name="answer" value="a1" /> ТестТестТест<br />
<input type="radio" name="answer" value="a1" /> ТестТест<br />
<input type="radio" name="answer" value="a1" /> Тест<br />
<input type="submit" value="Проголосовать" /> <input type="button" value="Результаты" />
</form>

В какие элементы лучше заключить варианты ответов, чтобы можно было нормально margin задать для пространства между вариантами опроса?

<p>, <li>? Какие ещё будут предложения? Что лучше еподойдёт?

[ZoNT]

А кто тебе мешает и так задать расстояния?

[SelenIT]

По смыслу явно ul-li напрашивается - это же именно список вариантов. Плюс крайне желательно подписи в label-ы обернуть...

[imfate]

присоединяюсь к вышесказанному

[Deacon]

В смысле в лэйблы обернуть, можете на моём примере показать как что лучше. По поводу списков, сокрее так и сделаю.

[SelenIT]

Примерно так:

<form action="#">
<ul style="list-style: none;">
<li><input type="radio" name="answer" value="a1" id="answer1" /> <label for="answer1">ТестТестТест</label></li>
<li><input type="radio" name="answer" value="a2" id="answer2" /> <label for="answer2">ТестТест</label></li>
<li><input type="radio" name="answer" value="a3" id="answer3" /> <label for="answer3">Тест</label></li>
</ul>
<input type="submit" value="Проголосовать" /> <input type="button" value="Результаты" />
</form>

А дальше можно как угодно "играть" с отступами, vertical-align'ом и всем остальным...

[Deacon]

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

[Argus]

Примерно так:

<form action="#">
<ul style="list-style: none;">
<li><input type="radio" name="answer" value="a1" id="answer1" /> <label for="answer1">ТестТестТест</label></li>
<li><input type="radio" name="answer" value="a2" id="answer2" /> <label for="answer2">ТестТест</label></li>
<li><input type="radio" name="answer" value="a3" id="answer3" /> <label for="answer3">Тест</label></li>
</ul>
<input type="submit" value="Проголосовать" /> <input type="button" value="Результаты" />
</form>

А дальше можно как угодно "играть" с отступами, vertical-align'ом и всем остальным...

намного удобнее в данном случае в <label> включать и <input>. тогда никакой for и id не нужны. и управлять удобнее, т.к. у нас уже будут элементы-строчки. т.ч. можно будет и без <li>

[rash]

...можно будет и без <li>

А вот этого не надо. Как же тогда список вариантов останется списком вариантов?

<form action="#">
<ul style="list-style: none;">
<li><label for="answer1"><input type="radio" name="answer" value="a1" /> ТестТестТест</label></li>
<li><label for="answer2"><input type="radio" name="answer" value="a2" /> ТестТестТест</label></li>
<li><label for="answer3"><input type="radio" name="answer" value="a3" /> ТестТестТест</label></li>
</ul>
<input type="submit" value="Проголосовать" /> <input type="button" value="Результаты" />
</form>

Так мне кажется лучше.

[Argus]

А вот этого не надо. Как же тогда список вариантов останется списком вариантов?

<form action="#">
<ul style="list-style: none;">
<li><label for="answer1"><input type="radio" name="answer" value="a1" /> ТестТестТест</label></li>
<li><label for="answer2"><input type="radio" name="answer" value="a2" /> ТестТестТест</label></li>
<li><label for="answer3"><input type="radio" name="answer" value="a3" /> ТестТестТест</label></li>
</ul>
<input type="submit" value="Проголосовать" /> <input type="button" value="Результаты" />
</form>

Так мне кажется лучше.

список - дело принципиальное. хочешь делай, хочешь нет.

тут можно и оставить списком.

for только убери

[rash]

Ну да, невнимательно поправил, for, конечно, не нужен.

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

[SelenIT]

for только убери

И в IE6 после этого не забудьте протестить

[rash]

Да когда он уже исчезнет... Эххх...

В общем, конечно, label в нем не работает как label, но разметку не ломает и ничего больше не портит. Иногда можно пользоваться, если осторожно и аудитория подходящая :-)

[SelenIT]

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