Разделение HTML-форм на разные элементы

Question

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

У меня есть 4 основных раздела, которые мне нужно разделить на отдельные div, но все они должны быть опубликованы в одном файле php.,Разделение необходимо, так как я пытаюсь установить макет страницы.

    <div id="1">
    <form method="post" action="process.php"> 
    URL <input type="text" name="url" size="50"/>
    </div>

    <div id="2">
    <input type="checkbox" name="ck1" value="option1" />
    <input type="checkbox" name="ck2" value="option2" />
    <input type="checkbox" name="ck3" value="option3" />
    </div>

    <div id="3">
    <input type="checkbox" name="ck4" value="option4" />
    <input type="checkbox" name="ck5" value="option5" />
    <input type="checkbox" name="ck6" value="option6" />
    </div>

    <div id="4">
    <input type="submit" value="Submit">
</form>
    </div>

Это работает, но не проверяется по очевидной причине.Я попытался использовать элемент fieldset, но у него есть граница строки вокруг наборов файлов, просто не подходящая для моей ситуации.Каков будет правильный способ формирования этой формы, и он все еще будет работать?

Answer 1

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

Пример: fieldset

Чтобы проиллюстрировать этот пример, посмотрите мой код / ​​результат здесь: http://jsfiddle.net/grARw/

Убедитесь, что теги формы находятся сверху и снизу, а не между элементами div.

Вот код:

<form method="post" action="process.php"> 
    <fieldset id="f1">
        <label>URL</label><input type="text" name="url" size="50"/>
    </fieldset>    
    <fieldset id="f2">
        <p><input type="checkbox" name="ck1" value="option1" /> Yes</p>
        <p><input type="checkbox" name="ck2" value="option2" /> No</p>
        <p><input type="checkbox" name="ck3" value="option3" /> Maybe</p>
    </fieldset>  
    <fieldset id="f3">
        <input type="checkbox" name="ck4" value="option4" /> Great
        <input type="checkbox" name="ck5" value="option5" /> Average
        <input type="checkbox" name="ck6" value="option6" /> Poor
    </fieldset >
    <fieldset id="f4">
        <input type="submit" value="Submit">
    </fieldset>
</form>

Answer 2

Вам необходимо поместить теги

внутри тега (идентификаторы не могут начинаться с цифр, следовательно, D):

<form method="post" action="process.php"> 
<div id="d1">
URL <input type="text" name="url" size="50" />
</div>

<div id="d2">
<input type="checkbox" name="ck1" value="option1" />
<input type="checkbox" name="ck2" value="option2" />
<input type="checkbox" name="ck3" value="option3" />
</div>

<div id="d3">
<input type="checkbox" name="ck4" value="option4" />
<input type="checkbox" name="ck5" value="option5" />
<input type="checkbox" name="ck6" value="option6" />
</div>

<div id="d4">
<input type="submit" value="Submit" />
</div>
</form>

Answer 3

Семантический способ сделать это с помощью тега <fieldset>.

http://www.w3schools.com/TAGS/tag_fieldset.asp

Кроме того, это большая причина, по которой ваш код не проверяется:

</form>
</div>