将HTML表单结构化为两个部分

Question

我有一个表格，分为两个部分，彼此相邻。我不知道如何解决这个问题，因为我读过有些人使用表格而其他人使用列表？我是html和CSS的新手，但我只是将两个部分放在div中并向左浮动一个。然而，我读到这不是一个好方法，因为div应该定义两个不同的东西？

我已经阅读了很多关于此的问题和博客，但这让我更加困惑。我只是想知道这个特定形式的最佳方法。

这是代码：

http://jsfiddle.net/EdZ32/

<div class="bookingForm">
    <form action="">
        <label for="flightType">
            Please select your flight<br>
            <select name="type" id="flightType">
            <option value="Fixed Wing">Fixed Wing</option>
            <option value="Helicopter">Helicopter</option>
            <option value="Glider Flights">Glider Flights</option>
            </select> <br>
        </label>
        <label for="numberPassengers">
            Number of Passengers<br>
            <select name="type">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            </select><br>
        </label>
        <label for="startDate">
            Start date <input type="date" name="startDate"><br>
        </label>
        <label for="departureTime">
            Departure itme <input type="date" name="departureTime"><br>
        </label>
    <!--SECTION TWO -->
        <label for="name">
            Full Name* <input type="text" name="name"><br>
        </label>
        <label for="email">
            Email* <input type="text" name="email"><br>
        </label>
        <label for="phoneNumber">
            Phone Number* <input type="number" name="phoneNumber"><br>
        </label>
        <label for="postalAddress">
            Postal Address <input type="text" name="postalAddress"><br>
        </label>
        <label for="city">
            City <input type="text" name="city"><br>
        </label>
        <label for="additionalInfo">
        Additional Information<br>
        <textarea rows="10" cols="30" name="comment" form="usrform">
                    Enter    text here...</textarea>
    </label>

    </form>

Answer 1

我会为此使用两个不同的div：

HTML

<div class="left">
<!-- Second Section Here-->
</div>

CSS

.bookingForm {width:600px;} /* Choose your custom width or no width at all */
.bookingForm .left {float:left;width:49%;}
.bookingForm .right {float:right;width:49%;}

此外，您的标签不应该包装所有输入元素，而只包括这样的文本：

<label for="additionalInfo">
   Additional Information
</label>

我在这里更新了JSfiddle的代码：

http://jsfiddle.net/EdZ32/4/

Answer 2

我已经编辑了你的代码，我希望这对你有帮助

您必须为每组输入指定2个分区。然后把CSS放到彼此的右边

<div id="sec1"></div>
<div id="sec2"></div>

上面添加到您的代码和CSS的浮动。

JSFIDDLE