Структурирование HTML-формы на два раздела

0

У меня есть форма, которая разделена на две секции, которые сидят рядом друг с другом. Я не уверен, как это сделать, поскольку я прочитал, что некоторые люди используют таблицы, а другие используют списки? Я новичок в html и CSS, но я бы просто поместил два раздела в div и поместил один влево. Я читал, однако, что это не хороший метод, так как divs должны определять две разные вещи?

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

Вот код:

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>
Теги:
forms

2 ответа

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%;}

Кроме того, ваши ярлыки не должны обертывать все элементы imput, а только текст следующим образом:

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

Я обновил ваш код на JSfiddle здесь:

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

  • 1
    Вот версия, основанная на модификации вашей скрипки JCBiggar, но с расширенным текстовым полем, похожим на табличную форму.
  • 0
    Есть ли другой способ, кроме использования float: верно?
Показать ещё 1 комментарий
0

я отредактировал ваш код, и я надеюсь, что это поможет вам

вы должны указать 2 деления для каждого набора входов, которые у вас есть. затем поместите CSS, чтобы поместить их вправо друг к другу

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

Выше было добавлено к вашему коду и CSS для float.

JSFIDDLE

Ещё вопросы

Сообщество Overcoder
Наверх
Меню