I have a form that is divided into two sections both sitting next to each other. I am not sure how to go about this as I have read that some people use tables and others use lists? I am new to html and CSS but I would just put the two sections in divs and float one to the left. I read however that this is not a good method as divs are supposed to define two different things?
I have read a lot of questions and blogs about this but it's making me slightly more confused.I am just wanting to know the best way to go about this for this particular form.
Here is the code:
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>
I would just use two different divs for this:
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%;}
Also, your Labels should not wrap all the imput elements but just the text like this:
<label for="additionalInfo">
Additional Information
</label>
I have updated your code on JSfiddle here:
http://jsfiddle.net/EdZ32/4/
i have edited your code and i hope this helps you
you must specify 2 division for each set of inputs you have. then put CSS to float them right to each other
<div id="sec1"></div>
<div id="sec2"></div>
Above was added to your code and a CSS for float.
JSFIDDLE
Related
Hello all I am very new to HTML and CSS and am currently working on a small lab for school. I am trying to have my two reset and submit button be horizontal with each other instead, they are one on top of the other. I am not supposed to change any of the HTML just make changes to the CSS code. The buttons are in a span element at the bottom. I added my form code to add more context
<form>
<span class="row">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Jaylen Carroll">
</span>
<span class="row">
<label for="dob">Date of Birth</label>
<input type="date" id="dob" name="dob">
</span>
<span class="row">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="jaylen#gmail.com">
</span>
<span class="row">
<label for="city">City</label>
<input type="city" id="city" name="city" placeholder="Ottawa">
</span>
<span class="row">
<label for="province">Province</label>
<select id="province" name="province">
<option>Please Select..</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NL">Newfoundland and Labrador</option>
<option value="NS">Nova Scotia</option>
<option value="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="NT">Northwest Territories</option>
<option value="NU">Nunavut</option>
<option value="YT">Yukon</option>
</select>
</span>
<span class="row">
<input type="reset" id="reset" name="reset">
<input type="submit" id="submit" name="submit">
</span>
</form>
When you paste the code in an HTML editor it comes out like this:
How I need it to be:
My Css code looks like this:
h1{
text-align:center;
}
label{
margin-top: 16px;
font-weight: bold;
display: block;
text-align: center;
font-size: medium;
}
input{
text-align:center;
display: block;
margin: 15px;
width:150px;
}
form{
margin:0 auto;
width:215px;
}
HTML elements start on separate lines by default. One solution would be to put your buttons in a group with a div element then use the float CSS property to horizontally align them.
HTML
<div class="button-group">
<input type="reset" id="reset" name="reset">
<input type="submit" id="submit" name="submit">
</div>
CSS
.button-group input {
float: left;
}
You can refer to this w3 schools link for more information on button groups:
https://www.w3schools.com/howto/howto_css_button_group.asp
you can use display flex
This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.
Set flex:direction as column.
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
.row{
display:flex;
flex-direction:column;
}
<form>
<span class="row">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Jaylen Carroll">
</span>
<span class="row">
<label for="dob">Date of Birth</label>
<input type="date" id="dob" name="dob">
</span>
<span class="row">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="jaylen#gmail.com">
</span>
<span class="row">
<label for="city">City</label>
<input type="city" id="city" name="city" placeholder="Ottawa">
</span>
<span class="row">
<label for="province">Province</label>
<select id="province" name="province">
<option>Please Select..</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NL">Newfoundland and Labrador</option>
<option value="NS">Nova Scotia</option>
<option value="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="NT">Northwest Territories</option>
<option value="NU">Nunavut</option>
<option value="YT">Yukon</option>
</select>
</span>
<span class="row">
<input type="reset" id="reset" name="reset">
<input type="submit" id="submit" name="submit">
</span>
</form>
for the last class row which contains the 2 buttons you can replace its class name and apply this CSS to it
.class-name {
display:"flex",
// if you want to keep space between the two buttons
justify-content:"space-between"
// if not don't put `justify-content` and instead put a margin to one of the buttons to
// keep a little distance between them
}
so display "flex" is your friend when you want to group elements as a row
I'm quite new to the HTML. I have to make a simple booking form. I'm getting stuck at the 'radio checking' label. After the "optgroup label" I need the radio option on a new line with a simple yes or no option after a text. Whatever I try it won't work and the yes or no option are right after the optgroup options.
<label for="Aantal personen">Aantal personen</label>
<input id="Aantal personen" name="Aantal personen" type="number" min="1" max="10"><br>
<label for="Aankomstdatum">Aankomstdatum</label>
<input id="Aankomstdatum" name="Aankomstdatum" type="date"><br>
<label for="Verblijfsduur">Verblijfsduur</label>
<input type="range" name="weight" id="range_weight" step="2" min="2" max="20" oninput="range_weight_disp.value = range_weight.value">
<output id="range_weight_disp"></output><br>
<label for="Verzorging">Verzorging</label>
<select id="Verzorging" name="Verzorging">
<optgroup label="opties">
<option value="logies">Logies</option>
<option value="Logies met ontbijt">Logies met ontbijt</option>
<option value="Halfpension">Halfpension</option>
<option value="Volpension">Volpensension</option>
</optgroup>
<form id="radio">"Annuleringsverzekering"</label>
<label for="annuleringsverzekering">
<label for="opt1"><input id="opt1" type="radio" name="mw" value="ja" required>Ja</label>
<label for="opt2"><input id="opt2" type="radio" name="mw" value="nee" required>Nee</label>
</form>
I hope someone can explain what I'm doing wrong, thank you:)
Welcome to Stack Overflow, there are some problems with your code:
You're not closing the <select> tag.
You are closing the annuleringsverzekering label before you even open it.
Here's how you can fix it. Make sure that you also assign the label for annuleringsverzekering to an id.
<label for="Aantal personen">Aantal personen</label>
<input id="Aantal personen" name="Aantal personen" type="number" min="1" max="10"><br>
<label for="Aankomstdatum">Aankomstdatum</label>
<input id="Aankomstdatum" name="Aankomstdatum" type="date"><br>
<label for="Verblijfsduur">Verblijfsduur</label>
<input type="range" name="weight" id="range_weight" step="2" min="2" max="20" oninput="range_weight_disp.value = range_weight.value">
<output id="range_weight_disp"></output><br>
<label for="Verzorging">Verzorging</label>
<select id="Verzorging" name="Verzorging">
<optgroup label="opties">
<option value="logies">Logies</option>
<option value="Logies met ontbijt">Logies met ontbijt</option>
<option value="Halfpension">Halfpension</option>
<option value="Volpension">Volpensension</option>
</optgroup>
</select>
<form id="radio"><label for="annuleringsverzekering">Annuleringsverzekering</label>
<label for="opt1"><input id="opt1" type="radio" name="mw" value="ja" required>Ja</label>
<label for="opt2"><input id="opt2" type="radio" name="mw" value="nee" required>Nee</label>
</form>
you can add this CSS code to your form tag with radio Id:
display: block;
you can use this code to every element to have full line for it
I got 2 input fields below. One select another input text. I need it to stay inline even in mobile mode.
How do I prevent input fields within from breaking? They stay inline regardless of screen size.
<div class="col-sm-4">
<label class="control-label">Form label</label>
<div class="form-inline">
<div class="form-group">
<select class="form-control">
<option value="A">Option A</option><option value="B">Option B</option><option value="C">Option C</option><option value="D">Option D</option>
</select>
</div>
<div class="form-group">
<input class="form-control" type="text">
</div>
</div>
</div>
From http://getbootstrap.com/css/
Bootstrap's inline forms, as in:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="form-inline">
<div class="form-group">
<select class="form-control" >
<option>Thing One</option>
<option>Thing Two</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control">
</div>
</form>
States in the docs 'This only applies to forms within viewports that are at least 768px wide.'
You could directly force them to stay inline with a fluid width in CSS and floating the elements.
Ex: https://jsfiddle.net/cm94dup9/
You can use tables for both select field and text field.
In table you can specify the width of the so both are inline.
<table>
<tr><td><div class="form-group">
<select class="form-control">
<option value="A">Option A</option><option value="B">Option B</option><option value="C">Option C</option><option value="D">Option D</option>
</select>
</div></td></tr>
<tr><td>
<div class="form-group">
<input class="form-control" type="text">
</div>
</td></tr>
</table>
if you mean inline, both to be have same width and are on each other. Not that both are in same line.
What has worked for me is wrapping the label and input, select, checkbox, etc.. in a div tag.
<form>
<div style=" white-space: nowrap;overflow: hidden;" >
<label>
<select>
<option value="?">Select</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
</select>
</label>
</div>
</form
i have a form which i implemented form-inline and bootstrap-select . That is working fine for screen width> 768, however when i try to resize it to ipad size, it is no longer inline. How to solve my problems:
because i set data-width="auto" for bootstrap-select, it is no 100% (1 column) or 50%(2 columns, which is most ideal in ipad case to display two select box side by side). i tried many ways, e.g. resetting the attribute data-width to "50%" then call $('.selectpicker').selectpicker(render);, but failed, what to do?
the checkboxes are auto break into four lines, for ipad size, i think it is better to keep them in one line, what can i do?
JSFiddle links: http://jsfiddle.net/nc16ntwq/ as the codes cant appear
<form class="form-inline" style="margin:10px 0px;">
<div class="form-group">
<select id="date" name="date" class="date selectpicker" data-width="auto">
<option value='01'>01</option>
<option value='02'>02</option>
</select>
</div>
<div class="form-group">
<select id="dateYear" name="dateYear" class="date selectpicker" data-width="auto">
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
</select>
</div>
<div class="form-group">
<select id="toDate" name="toDate" class="date selectpicker" data-width="auto">
<option value='01'>01</option>
<option value='02'>02</option>
<option value='03'>03</option>
</select>
</div>
<div class="form-group">
<select id="toDateYear" name="toDateYear" class="date selectpicker" data-width="auto">
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019" selected>2019</option>
</select>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input id="v1" type="checkbox" checked> Value 1
</label>
</div>
<div class="checkbox">
<label>
<input id="v2" type="checkbox" checked> value 2
</label>
</div>
<div class="checkbox">
<label>
<input id="v3" type="checkbox"> value 3
</label>
</div>
<div class="checkbox">
<label>
<input id="v4" type="checkbox"> Values 4
</label>
</div>
</div>
</form>
JSFIddle. I only do this for dropdown. Just add this to you CSS
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
I have a <select> dropdown in my HTML form. How do I add required attribute to my <select> element? I would like a pure HTML5 solution. I googled but I dont seem to find it.
Here is my fiddle.
The first <option> needs to be empty. Otherwise, required will see it as a value filled.
Example
<select required>
<option></option>
<option>1</option>
<option>2</option>
</select>
First of all you must insert empty field in movie list.and add required
HTML
<form id="book_tickets">
<fieldset>
<legend>Booking Details</legend>
<p>
<label for="movie_name">Choose Movie</label>
<select id="movie_name" name="movie_name" required>
<option></option>
<option value="Movie 1">Movie 1</option>
<option value="Movie 2">Movie 2</option>
<option value="Movie 3">Movie 3</option>
</select>
</p>
<p>
<label for="theaters">Theaters</label>
<input list="theaters" name="theaters" required>
<datalist id="theaters">
<option value="Inox" />
<option value="E Square" />
</datalist>
</input>
</p>
<p>
<label for="date">Select Date</label>
<input type="date" name="date" id="date" required />
</p>
<p>
<label for="email">Enter Email</label>
<input type="email" name="email" id="email" placeholder="abc#gmail.com" required />
</p>
<p>
<label for="tickets_quantity">Number of Tickets</label>
<input type="number" min="1" max="10" name="tickets_quantity" id="tickets_quantity" required />
</p>
<p>
<label>Total Price</label>
<span id="total_price"></span>
</p>
<p>
<input type="submit" id="book_tickets" value="Book Tickets" />
</p>
</fieldset>
</form>
The required attribute on select element: video demo
select element HTML5 here
referring to the first option, check out the placeholder label option demo