Trying to get radio buttons to align properly in html/css - html

I was given a homework assignment to re-create a site that he made Here.
I have gotten it to look almost similar but cant seem to find out how to get the radio bubbles to the right of the checkbox items.
I did some research and have tried verticle-align but that has not worked out.
This is the HTML that I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Form Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<h1>Client Registration</h1>
<form>
<fieldset>
<legend>Identity Information</legend>
<label>Corporate Name: <input type= "text" name="corpName" id="corpName" size="40" /></label><br><br>
<label>Address: <input type="text" name="address" id="address" size="40" /></label><br><br>
<label>Contact Name: <input type="text" name="cname" id="cname" size="40" /></label><br><br>
<label>Contact Phone: <input type="text" name="cphone" id="cphone" size="15" /></label> <label>Contact Email: <input type="text" name="cemail" id="cemail" size="15"</label>
</fieldset>
<fieldset>
<legend>Service Information</legend>
<input type="checkbox" name="Delivery" id="Delivery" value="yes" /> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes" />Confirmation<br>
<div id="radioButtons">
<input type="radio" name="paymentType" id="creditAccount" value="creditAccount" />Credit Account<br>
<input type="radio" name="paymentType" id="Invoice" value="Invoice" />Invoice<br>
<input type="radio" name="paymentType" id="cod" value="cod" />Cash On Delivery<br>
</div>
</fieldset>
Comments: <br>
<textarea name="comments" id="comments" rows="3" cols="55">Please submit any comments here</textarea><br>
<input type="submit" value="Send Form" /> <input type="reset" />
<br>
<form>
</div>
</body>
And here is my CSS:
/*CSS Document*/
#container{
background-color: #C0C0C0;
border: 2px solid black;
width: 500px;
margin: auto;
}
form{
padding: 4px;
}
#radioButtons{
vertical-align: middle;
}
Any help would be great.


Here try this fiddle
http://jsfiddle.net/Lsh3rqLj/3/
I just wrapped the checkboxes in a div and set both the checkboxes and radiobuttons div's float to left.
#radioButtons{
vertical-align: middle;
float: left;
}
#first{
float:left;
}
The float is what you need here. you can play with it some more to get a perfect positioning.
EDIT: IF you wanted to make it EXACTLY like you are instructed in your assignment add padding-top: 10px; to your checkboxes. I have updated the fiddle to give you the exact effect as you'd see in the img you posted.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Form Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<h1>Client Registration</h1>
<form>
<fieldset>
<legend>Identity Information</legend>
<label>Corporate Name: <input type="text" name="corpName" id="corpName" size="40"></label><br><br>
<label>Address: <input type="text" name="address" id="address" size="40"></label><br><br>
<label>Contact Name: <input type="text" name="cname" id="cname" size="40"></label><br><br>
<label>Contact Phone: <input type="text" name="cphone" id="cphone" size="15"></label> <label>Contact Email: <input type="text" name="cemail" id="cemail" size="15" <="" label="">
</label></fieldset>
<fieldset style="
">
<legend>Service Information</legend>
<div id="checkBox"><input type="checkbox" name="Delivery" id="Delivery" value="yes"> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes">Confirmation<br>
</div>
<div id="radioButtons">
<input type="radio" name="paymentType" id="creditAccount" value="creditAccount">Credit Account<br>
<input type="radio" name="paymentType" id="Invoice" value="Invoice">Invoice<br>
<input type="radio" name="paymentType" id="cod" value="cod">Cash On Delivery<br>
</div>
</fieldset>
Comments: <br>
<textarea name="comments" id="comments" rows="3" cols="55">Please submit any comments here</textarea><br>
<input type="submit" value="Send Form"> <input type="reset">
<br>
</form>
</div>
</body>
#container{
background-color: #C0C0C0;
border: 2px solid black;
width: 500px;
margin: auto;
}
form{
padding: 4px;
}
#radioButtons{
float:left;
}
#checkBox{
float:left;
}
please remember that always wrap the content with a div tag. so you will not face such problems.
here is the working demo: Working Demo
wrap the check boxes with a div tag, later give float left for both div id
i hop this will be helpful to you...


You can get the <input type="radio"> elements to align properly by adding a div element around the checkboxes and then floating the checkboxes and radio elements left. You should also add padding to the checkboxes for consistency.
HTML:
<div id="checkboxes"> <!-- add this div -->
<input type="checkbox" name="Delivery" id="Delivery" value="yes" /> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes" />Confirmation<br>
</div>
CSS:
#checkboxes {
float: left;
padding-top: 10px;
}
#radioButtons {
float: left;
}
Try it Online!

Related

How to align input boxes in 2 lines

I'm doing a form where I want 3 input boxes to the left and to the right. Now, I copied the code from a past project of mine where it worked but now it wont work in this new project. I've tried every text-align and float I know about. I really don't know what to do anymore.
This is the code i have for this so far.
input[id=fname], input[id=lname], input[id=phone], input[id=city],i nput[id=email], input[id=birthday] {
width: 420px;
margin-bottom: 15px;
padding: 3px;
}
#left {
width: 40px;
display: inline-block;
box-sizing: border-box;
}
#right {
width: 440px;
display: inline-block;
float: right;
padding-left: 8px;
box-sizing: border-box;
}
<!doctype html>
<html>
<head>
<title>Employee Directory</title>
<link rel="stylesheet" type="text/css" href="css/Styles.css">
</head>
<body>
<div class="form">
<form method="post">
<div id="left">
<label>First Name</label>
<input id="fname" type="text" tabindex="1" >
<label>Phone</label>
<input id="phone" type="phone" tabindex="3">
<label>City</label>
<input id="city" type="text" tabindex="5">
</div>
<div id="right" class="box">
<label>Last Name</label>
<input id="lname" type="text" tabindex="2">
<label>Email</label>
<input id="email" type="email" tabindex="4">
<label>Birthday</label>
<input id="bday" type="date" tabindex="6">
</div>
</form>
</div>
</body>
</html>

You can simplify the HTML and CSS a lot here. Use display:grid to align everything:
form {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 9px 20px;
}
input {
display: block;
width: 100%;
}
<form class="form" method="post">
<label>First Name
<input name="fname" type="text">
</label>
<label>Last Name
<input name="lname" type="text">
</label>
<label>Phone
<input name="phone" type="phone">
</label>
<label>Email
<input name="email" type="email">
</label>
<label>City
<input name="city" type="text">
</label>
<label>Birthday
<input name="bday" type="date">
</label>
</form>

You should try to make it so your order of inputs is left to right down the page as tabbing from first name to Phone and then back up to last name is not very intuitive (Although fixed with tabindex this can be default).
Here is how I would do it.
input[id=fname], input[id=lname], input[id=phone], input[id=city],input[id=email], input[id=birthday] {
width: 50%;
margin-bottom: 15px;
padding: 3px;
}
#form_fields {
display:flex;
flex-wrap:wrap;
}
#form_fields label {
width:50%;
}
#form_fields label input {
width:50%;
}
<!doctype html>
<html>
<head>
<title>Employee Directory</title>
<link rel="stylesheet" type="text/css" href="css/Styles.css">
</head>
<body>
<div class="form">
<form method="post">
<div id="form_fields">
<label>First Name<br />
<input id="fname" type="text" />
</label>
<label>Last Name<br />
<input id="lname" type="text" />
</label>
<label>Phone<br />
<input id="phone" type="phone" />
</label>
<label>Email<br />
<input id="email" type="email" />
</label>
<label>City<br />
<input id="city" type="text" />
</label>
<label>Birthday<br />
<input id="bday" type="date" />
</label>
</div>
</form>
</div>
</body>
</html>

nth child in forms using html and css not working

I have created a simple html code to test nth child, however it is not working for me. any value i put into the nthe child selector other than 1 wont work?
.username{
margin-bottom: 20px;
}
.username:nth-child(n + 2){
margin-left: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>forms</title>
<link rel="stylesheet" type="text/css" href="../css/form.css">
</head>
<body>
<form action="" method="post">
<div class="username">
<input type="text" name="First_Name" value="First Name">
<input type="text" name="Middle_Name" value=" Middle Name">
<input type="text" name="Last_Name" value="Last Name">
</div>
<input type="radio" name="gender" value="Male">Male<br>
<input type="radio" name="gender" value="Female">Female<br>
<input type="submit" name="submit" value="Submit">
</form>
</html>
How do i fix this?

Actually, nth-child, looks for the "nth" element ocurrency. If you call nth-child(n+2) in your "username" div, you are looking for all ocurrencies of "username" divs equal or grater then two, that doesn't exist, you only have one ocurrency for "username", therefore, it only works if you use nth-child(1).
If you want all "input" elements, equal or grater then two, inside your "username" div, have a margin, you should do that:
.username input:nth-child(n+3){
margin-left: 100px;
}
You can put two or three more inputs inside the "username" div for more clarification, and change the value of "nth-child" for (n+1), (n+2), and (n+3), to check what happen.
Note that "nth-child" starts in "1".
.username{
margin-bottom: 20px;
}
.username input:nth-child(n+3){
margin-left: 100px;
border: 1px solid red;
}
<form action="" method="post">
<div class="username">
<input type="text" name="First_Name" value="First Name">
<input type="text" name="Middle_Name" value=" Middle Name">
<input type="text" name="Last_Name" value="Last Name">
<input type="text" name="Last_Name" value="Last Name">
<input type="text" name="Last_Name" value="Last Name">
</div>
<input type="radio" name="gender" value="Male">Male<br>
<input type="radio" name="gender" value="Female">Female<br>
<input type="submit" name="submit" value="Submit">
</form>

You are not writing the name of the tag to which nth-child should be applied.
.username {
margin-bottom: 20px;
}
.username input:nth-child(n + 2) {
background-color:red;
}

HTML: What would I put in between for the label for""

I'm getting an error as I tried using compturnon as the label for, but it didn't work can anyone let me know what it should be? If I put yes it works but I'm not sure if that's totally correct.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fix This - Computer Repair Reporting</title>
<meta content="width=device-width, maximum-scale=1, initial-scale=1" name="viewport">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="/assets/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/assets/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/assets/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/assets/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/assets/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/assets/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/assets/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon-180x180.png" />
</head>
<body>
<div id="container">
<header><h1>Computer Repair Reporting</h1></header>
<form action="http://webdevbasics.net/scripts/demo.php" method="post">
<div>
<p>There are several methods for reporting a problem at problem to ITS, the easiest way
is the fill out the form below and submit it to ITS. If you need immediate assistance or are not able to describe the issue, please call <i>1-888-FIX-THIS.</i></p>
</div>
<div>
<fieldset>
<legend><strong>Personal Information</strong></legend>
<div class="spacings">
<label for="fullname">Full Name:</label>
<input id="fullname" name="fullname" type="text" placeholder="First and last name" required>
</div>
<div class="spacings">
<label for="email">Email:</label>
<input id="email" name="email" type="email" placeholder="jsmith#gmail.com" required>
</div>
<div>
<label for="phone">Phone Number:</label>
<input id="phone" name="phone" type="tel" placeholder="(###) ###-####" required>
</div>
</fieldset>
</div>
<div>
<fieldset>
<legend><strong>Fix It Information</strong></legend>
<div class="spacings">
<label for="room">Select Your Room:</label>
<select id="room" name="room" required>
<option disabled selected value="">
Choose a room
</option>
<option value="S308">
S308
</option>
<option value="S324">
S324
</option>
<option value="L2">
L2
</option>
<option value="ME201">
ME201
</option>
<option value="ME208">
ME208
</option>
</select><br>
</div>
<div class="spacings">
<label for="machinenum">Select Your Machine Number (1 - 15): </label>
<input id="machinenum" name="machinenum" type="number" min="1" max="15" value="" placeholder="#" required><br>
</div>
<div class="spacings">
<p>Does the computer turn on?</p>
<input id="yes" name="compturnon" type="radio" value="yes" required>
<label for="yes">Yes </label>
<input id="no" name="compturnon" type="radio" value="no">
<label for="no">No </label>
</div>
<div class="spacings">
<label for="reportdate">Reporting Date:</label>
<input id="reportdate" name="reportdate" type="date" required>
</div>
<div>
<label for="message">Brief Description of Problem(s):</label><br>
<textarea id="message" name="message" cols="50" rows="5" placeholder="Please indicate the problem(s) you are experiencing" required></textarea>
</div>
</fieldset>
</div>
<div>
<p>Please submit this form and we will attempt to get the issue fixed within 12 hours.</p>
</div>
<input type="submit" value="Fix me">
<input type="reset" value="Reset">
</form>
</div>
<footer>
<small>© 2016 Michael Manieri</small>
</footer>
</body>
</html>
CSS
body, input[type=submit], input[type=reset] {
background-color: #333333;
color: #fff;
font-family: Arial,Helvetica,sans-serif;
font-size:16px;
}
h1 {
color:#E60957;
font-size:35px;
margin-bottom:30px;
letter-spacing:1px;
text-align: center;
}
input[type=submit], input[type=reset]{
background:#E60957;
border:2px solid #E60957;
border-radius:15px;
font-size:14px;
padding:5px 15px;
}
input[type=submit]:hover, input[type=reset]:hover {
background-color:#B73F69;
border:none;
}
fieldset {
border-color:#E60957;
margin-bottom:25px;
width:545px;
}
legend {
color:#E60957;
font-size:20px;
margin-bottom:5px;
}
#container, footer {
margin:25px auto;
width:575px;
}
.spacings {
margin-bottom:15px;
}

First off, change the second input's value to no.
Second, replace the first label with a fieldset/legend, and since you used a fieldset already, this one does not have a border and set your legend color back to black
fieldset.borderless {
border: none;
margin: 0;
padding: 0;
}
fieldset.borderless legend {
color: black;
padding: 0;
}
<fieldset class="borderless">
<legend>Does the computer turn on</legend>
<input id="yes" name="compturnon" type="radio" value="yes" required>
<label for="yes">Yes </label>
<input id="no" name="compturnon" type="radio" value="no">
<label for="no">No </label>
</fieldset>
Here is you original code, updated
body,
input[type=submit],
input[type=reset] {
background-color: #333333;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
h1 {
color: #E60957;
font-size: 35px;
margin-bottom: 30px;
letter-spacing: 1px;
text-align: center;
}
input[type=submit],
input[type=reset] {
background: #E60957;
border: 2px solid #E60957;
border-radius: 15px;
font-size: 14px;
padding: 5px 15px;
}
input[type=submit]:hover,
input[type=reset]:hover {
background-color: #B73F69;
border: none;
}
fieldset {
border-color: #E60957;
margin-bottom: 25px;
width: 545px;
}
legend {
color: #E60957;
font-size: 20px;
margin-bottom: 5px;
}
#container,
footer {
margin: 25px auto;
width: 575px;
}
.spacings {
margin-bottom: 15px;
}
fieldset.borderless {
border: none;
margin: 0 0 15px 0;
padding: 0;
}
fieldset.borderless legend {
color: white;
padding: 0;
font-size: 16px;
}
<div id="container">
<header>
<h1>Computer Repair Reporting</h1>
</header>
<form action="http://webdevbasics.net/scripts/demo.php" method="post">
<div>
<p>There are several methods for reporting a problem at problem to ITS, the easiest way is the fill out the form below and submit it to ITS. If you need immediate assistance or are not able to describe the issue, please call <i>1-888-FIX-THIS.</i>
</p>
</div>
<div>
<fieldset>
<legend><strong>Personal Information</strong>
</legend>
<div class="spacings">
<label for="fullname">Full Name:</label>
<input id="fullname" name="fullname" type="text" placeholder="First and last name" required>
</div>
<div class="spacings">
<label for="email">Email:</label>
<input id="email" name="email" type="email" placeholder="jsmith#gmail.com" required>
</div>
<div>
<label for="phone">Phone Number:</label>
<input id="phone" name="phone" type="tel" placeholder="(###) ###-####" required>
</div>
</fieldset>
</div>
<div>
<fieldset>
<legend><strong>Fix It Information</strong>
</legend>
<div class="spacings">
<label for="room">Select Your Room:</label>
<select id="room" name="room" required>
<option disabled selected value="">
Choose a room
</option>
<option value="S308">
S308
</option>
<option value="S324">
S324
</option>
<option value="L2">
L2
</option>
<option value="ME201">
ME201
</option>
<option value="ME208">
ME208
</option>
</select>
<br>
</div>
<div class="spacings">
<label for="machinenum">Select Your Machine Number (1 - 15):</label>
<input id="machinenum" name="machinenum" type="number" min="1" max="15" value="" placeholder="#" required>
<br>
</div>
<fieldset class="spacings borderless">
<legend>Does the computer turn on</legend>
<input id="yes" name="compturnon" type="radio" value="yes" required>
<label for="yes">Yes </label>
<input id="no" name="compturnon" type="radio" value="no">
<label for="no">No </label>
</fieldset>
<div class="spacings">
<label for="reportdate">Reporting Date:</label>
<input id="reportdate" name="reportdate" type="date" required>
</div>
<div>
<label for="message">Brief Description of Problem(s):</label>
<br>
<textarea id="message" name="message" cols="50" rows="5" placeholder="Please indicate the problem(s) you are experiencing" required></textarea>
</div>
</fieldset>
</div>
<div>
<p>Please submit this form and we will attempt to get the issue fixed within 12 hours.</p>
</div>
<input type="submit" value="Fix me">
<input type="reset" value="Reset">
</form>
</div>
<footer>
<small>© 2016 Michael Manieri</small>
</footer>

Per MDN’s <label> docs:
for
The ID of a labelable form-related element in the same document as the label element. The first such element in the document with an ID matching the value of the for attribute is the labeled control for this label element.
A label element can have both a for attribute and a contained control element, as long as the for attribute points to the contained control element.
Though if you want to “label” more than one field, you should wrap them in a <fieldset> and use a <legend>. E.g.
<fieldset class="spacings">
<legend>Does the computer turn on</legend>
<input id="yes" name="compturnon" type="radio" value="yes" required>
<label for="yes">Yes</label>
<input id="no" name="compturnon" type="radio" value="yes">
<label for="no">No</label>
</fieldset>

<div class="spacings">
<span>Does the computer turn on?</span>
<input id="compturnon_yes" name="compturnon" type="radio" value="yes" />
<label for="computernon_yes">Yes </label>
<input id="computernon_no" name="compturnon" type="radio" value="yes" />
<label for="computernon_no" name="compturnon" type="radio" value="no">No</label>
</div>
Would be an example of correct usage of the "label" tag and its "for" attribute -- The "for" attribute is used to specify the ID of the element to which the label applies; each "for" attribute make must reference a unique form element.
In your case you have not defined such an element.
For more information, see: https://www.w3.org/wiki/HTML/Elements/label

Trouble aligning labels, input in a form

Hello i'm having trouble aligning labels, input field and drop box in my html page. I want the labels aligned at the left and input right next to it. But it's allover the place and having trouble aligning it. I would like my form to look like this
But my page currently looks like this:
Below is my html and css code:
<!Doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Assignment 3 using Ajax" />
<!-- Title -->
<title>Assignment 3</title>
<!--CSS Styling -->
<link type="text/css" href="style.css" rel="stylesheet" />
<!-- script -->
<script type="text/javascript" src="script.js">
</script>
</head>
<body>
<header><h1> Registration </h1></header>
<form name="myForm" action="#" method="post" onsubmit="return validate()">
<fieldset>
<label for="username">Username: </label>
<input type="text" id="username" name="user" placeholder="Enter username" />
<label for="password">Password: </label>
<input type="password" id="password" name="user_p" />
<progress id="progress" value='0' max="100"></progress><span id="text"></span>
<label for="re_password">Verify Password: </label>
<input type="password" id="re_password" name="user_pass" placeholder="Re-enter password" />
<label for="email">Email: </label>
<input type="email" id="email" name="user_email" placeholder="Enter email" />
<label for="email">Verify Email: </label>
<input type="email" id="email" name="user_email2" />
<label for="question1">Security Question </label>
<select id="question1" name="question1">
<option value="none"> --- Select a question --- </option>
<option value="a">What's your favorite color?</option>
<option value="b">What's the make of your first car?</option>
<option value="c">What's your mother's maiden name?</option>
<option value="d">What city were you born?</option>
<option value="e">What high school did you attend?</option>
</select>
<label for="answer">Security Answer: </label>
<input type="text" name="user_answer1" />
<label for="question2">Security Question </label>
<select id="question2" name="question2">
<option value="none"> --- Select a question --- </option>
<option value="a">What's your favorite color?</option>
<option value="b">What's the make of your first car?</option>
<option value="c">What's your mother's maiden name?</option>
<option value="d">What city were you born?</option>
<option value="e">What high school did you attend?</option>
</select>
<label for="answer2"> Security Answer: </label>
<input type="text" id="answer2" name="user_answer2" />
<label for="mobile">Phone: </label>
<input type="text" id="mobile" name="user_mobile" />
<label for="address">Address: </label>
<textarea id="t1" rows="8" cols="40"name="user_address" style="vertical-align: top;"></textarea>
<label for="interests">Areas you may be interested in, please select one or more: </label>
<textarea id="interests" rows="10" cols="40" name="user_extra" style="vertical-align: top;"></textarea>
<div id="box1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="Red_Apple.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="110" height="40" />
</div>
<div id="box2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="Banana.jpg" draggable="true" ondragstart="drag(event)" id="drag2" width="110" height="40" />
</div>
<div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</fieldset>
<input type="button" name="submit" value="Register" onclick="return validate()" />
<input type="button" value="Clear" />
</form>
</body>
CSS:
form {
max-width: 750px;
margin-left: 50px;
background: #f4f7f8;
border-radius: 8px;
}
label {
display:block;
text-align: right;
width:145px;
float: left;
padding-top: 5px;
}
input {
display: inline-block;
margin-bottom: 5px;
margin-top: 5px;
margin-left: 20px;
vertical-align: middle;
}
fieldset {
margin-bottom: 30px;
border: none;
}
#box1, #box2 {
float:right;
width: 112px;
height: 42px;
border: 1px solid;
}
div#box3{
width:112px;
height:42px;
border: 1px solid;
}
Please could some lead me in the right directions of how to currently aligning the labels and input like in the first pic.

If you put each 'line' of input and label inside a wrapper div, you can easily solve the problems you're getting. The wrapper acts like a full width wrapper around the label and input of that row. Every new label & input will go onto the next line.
I also did some adjustments to your label styling, as it needs to be display: inline-block; and no float: left; is needed.
See my JSFiddle demo.

I know that you want a native css solution but I've done a bootstrap version for fun. You can check it here.
The equivalent of my solution would be to make specific width for label and input :
input,label{
display:inline-block;
width:60%;
}
label{
width:30%;
}
And make sure that the sum will be 100% or use container div as I do in bootstrap.

Dividing page in two parts

I want to divide page horizontally in two parts. On upper part I want a form and on lower part I want an image. But it's not working. Please help me.
<!DOCTYPE html>
<html>
<head>
<title>JN DIAMONDS</title>
</head>
<style>
#upper {
height:50%;
}
#lower {
height: 50%;
background-image: r1.jpg;
}
</style>
<body>
<div id="upper">
<form align="center" method="POST" action="insert_rough.php">
<fieldset>
<legend>JN Patel <b>Rough Diamond</b> Information</legend>
<br>
<input type="text" name="fname" placeholder="Name" required><br><br>
<input type="text" name="twait" placeholder="Total Rough Weight"><br><br>
<input type="text" name="cprice" placeholder="1 Carat Price"><br><br>
<input type="text" name="dprice" placeholder="Dollar Rate"><br><br>
<input type="text" name="date" placeholder="Payment Days" required><br><br>
<input type="image" src="submit.jpg" alt="Submit" width="90" height="35"><br>
</fieldset>
</div>
<body>
<div id="lower"></div>
</body>
</form>
</body>
</html>

So I took out the extra body tag and added an image under the form. Here is a working codepen of what I think you want.
http://codepen.io/anon/pen/epeWYQ?editors=100
<!DOCTYPE html>
<html>
<head>
<title>JN DIAMONDS</title>
</head>
<style>
#upper {
height:50%;
}
#lower {
height: 50%;
background-image: r1.jpg;
}
</style>
<body>
<div id="upper">
<form align="center" method="POST" action="insert_rough.php">
<fieldset>
<legend>JN Patel <b>Rough Diamond</b> Information</legend>
<br>
<input type="text" name="fname" placeholder="Name" required><br><br>
<input type="text" name="twait" placeholder="Total Rough Weight"><br><br>
<input type="text" name="cprice" placeholder="1 Carat Price"><br><br>
<input type="text" name="dprice" placeholder="Dollar Rate"><br><br>
<input type="text" name="date" placeholder="Payment Days" required><br><br>
<input type="image" src="submit.jpg" alt="Submit" width="90" height="35"><br>
</fieldset>
</div>
<div id="lower"></div>
<img src="http://i.cdn.turner.com/asfix/repository//8a250ba13f865824013fc9db8b6b0400/thumbnail_8234390180613999969.jpg" alt="" />
</form>
</body>
</html>
You need an image tag which is why it’s not working if you're linking it to css use background: url(./img/r1.jpg) no-repeat; you need to change the img folder name to whatever the folder is called that you keep your images in.