У меня есть форма, которая разделена на две секции, которые сидят рядом друг с другом. Я не уверен, как это сделать, поскольку я прочитал, что некоторые люди используют таблицы, а другие используют списки? Я новичок в html и CSS, но я бы просто поместил два раздела в div и поместил один влево. Я читал, однако, что это не хороший метод, так как divs должны определять две разные вещи?
Я прочитал много вопросов и блогов об этом, но это немного меня смущает. Я просто хочу узнать, как лучше всего это сделать для этой конкретной формы.
Вот код:
<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>
Я бы просто использовал два разных 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 здесь:
я отредактировал ваш код, и я надеюсь, что это поможет вам
вы должны указать 2 деления для каждого набора входов, которые у вас есть. затем поместите CSS, чтобы поместить их вправо друг к другу
<div id="sec1"></div>
<div id="sec2"></div>
Выше было добавлено к вашему коду и CSS для float.