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>
Related
I'm trying to make a form but when I try to centralise it, it just stay tight to the left side of #wrapper. It reacts to margin-top but not anything to do with going across. I've tried putting a value on margin, using margin-left and still nothing. I'm pretty sure I've followed the YouTube tutorial I'm working with character for character so not sure where I've gone wrong, does anybody have any ideas?
body {
padding: 0;
margin: 0;
background-color: #ccc;
}
#wrapper {
width: 1000px;
background-color: #FFF;
margin: 0px auto;
min-height: 400px;
margin-top: 40px;
border: 1px solid #999;
border-bottom: 3px solid #999;
border-radius: 5px;
}
#formDiv {
width: 200px;
margin: 0px auto;
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Registration Page</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="wrapper">
<div id="formDiv"></div>
<form method="POST" action="index.php" enctype="multipart/form-data">
<label>First Name:</label><br>
<input type="text" name="fname" /> <br/><br/>
<label>Last Name:</label><br>
<input type="text" name="lname" /> <br/><br/>
<label>Email:</label><br>
<input type="text" name="email" /> <br/><br/>
<label>Password:</label><br>
<input type="password" name="password" /> <br/><br/>
<label>Image:</label><br>
<input type="file" name="image" /> <br/><br/>
<input type="submit" name="submit" />
</form>
</div>
</body>
</html>
You closed your formdiv tag to early. Use this:
<html>
<head>
<title>Registration Page</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="wrapper">
<div id="formDiv">
<form method="POST" action="index.php" enctype="multipart/form-data">
<label>First Name:</label><br>
<input type="text" name="fname" /> <br/><br/>
<label>Last Name:</label><br>
<input type="text" name="lname" /> <br/><br/>
<label>Email:</label><br>
<input type="text" name="email" /> <br/><br/>
<label>Password:</label><br>
<input type="password" name="password" /> <br/><br/>
<label>Image:</label><br>
<input type="file" name="image" /> <br/><br/>
<input type="submit" name="submit" />
</form>
</div>
</div>
</body>
</html>
If you need to center it, you also need to center form element
#wrapper form{
width: 180px;
margin: 0 auto;
}
http://jsfiddle.net/47ku1qud/
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;
}
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
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!
I am wanting to make a label on a form that is much longer than the other labels in the form appear on multiple lines. I then want to align the inputs to the labels on the colons of the labels.
Here is a picture of the current set up:
Basically, I need Releasse Date to appear as
Release Date
(YYYY-MM-DD): [input box]
HTML Code:
<form action="http://localhost/songadded.php" method="post" id="songform">
<h4>Add a New Song</h4>
<div>
<label for="name">Name:</label>
<input type="text" name="name" size="30" value=""/>
</div>
<div>
<label for="artist">Artist:</label>
<input type="text" name="artist" size="30" value=""/>
</div>
<div>
<label for="album">Album:</label>
<input type="text" name="album" size="30" value=""/>
</div>
<div>
<label for="genre">Genre:</label>
<input type="text" name="genre" size="30" value=""/>
</div>
<div>
<label for="release_date" id="rdlabel">Release Date (YYYY-MM-DD):</label>
<input type="text" name="release_date" size="30" value="" id="rdinput"/>
</div>
<div>
<label for="bpm">BPM:</label>
<input type="text" name="bpm" maxlength="3" value=""/>
</div>
<div id="songsubmit">
<input type="submit" name="submit" value="Add Song"/>
</div>
</form>
CSS Code:
#songform {
margin: 20px;
}
label {
float: left;
width: 250px;
margin-top: 20px;
clear: right;
}
input{
margin-top: 20px;
}
#songsubmit {
margin-left: 80px;
}
Use display:inline-block and vertical-align:bottom. No floats or absolute positioning needed.
#songform {
margin: 20px;
}
#songform > div {
position: relative;
margin-top: 20px;
}
label {
display:inline-block;
width: 250px;
vertical-align:bottom;
}
#songsubmit {
margin-left: 80px;
}
<form action="http://localhost/songadded.php" method="post" id="songform">
<h4>Add a New Song</h4>
<div>
<label for="name">Name:</label>
<input type="text" name="name" size="30" value=""/>
</div>
<div>
<label for="artist">Artist:</label>
<input type="text" name="artist" size="30" value=""/>
</div>
<div>
<label for="album">Album:</label>
<input type="text" name="album" size="30" value=""/>
</div>
<div>
<label for="genre">Genre:</label>
<input type="text" name="genre" size="30" value=""/>
</div>
<div>
<label for="release_date" id="rdlabel">Release Date<br>(YYYY-MM-DD):</label>
<input type="text" name="release_date" size="30" value="" id="rdinput"/>
</div>
<div>
<label for="bpm">BPM:</label>
<input type="text" name="bpm" maxlength="3" value=""/>
</div>
<div id="songsubmit">
<input type="submit" name="submit" value="Add Song"/>
</div>
</form>
I've made a fiddle with code for your case: http://jsfiddle.net/862xc2j1/
You can solve it with adding clear:left to each div wrapper for each form field block.
<div class="form-item">
<label for="name">Name:</label>
<input type="text" name="name" size="30" value=""/>
</div>
.form-item {
clear: left;
}
To get this alignment next to the colon, you can use absolute positioning. Here is a working example - I made a few more changes to get it to work:
#songform {
margin: 20px;
}
#songform > div {
position: relative;
margin-top: 20px;
}
#songform > div:after {
/* Clearfix */
content:"";
display:table;
clear:both;
}
#songform > div > input {
position: absolute;
bottom: 0;
}
label {
float: left;
width: 250px;
clear: right;
}
#songsubmit {
margin-left: 80px;
}
<form action="http://localhost/songadded.php" method="post" id="songform">
<h4>Add a New Song</h4>
<div>
<label for="name">Name:</label>
<input type="text" name="name" size="30" value=""/>
</div>
<div>
<label for="artist">Artist:</label>
<input type="text" name="artist" size="30" value=""/>
</div>
<div>
<label for="album">Album:</label>
<input type="text" name="album" size="30" value=""/>
</div>
<div>
<label for="genre">Genre:</label>
<input type="text" name="genre" size="30" value=""/>
</div>
<div>
<label for="release_date" id="rdlabel">Release Date<br>(YYYY-MM-DD):</label>
<input type="text" name="release_date" size="30" value="" id="rdinput"/>
</div>
<div>
<label for="bpm">BPM:</label>
<input type="text" name="bpm" maxlength="3" value=""/>
</div>
<div id="songsubmit">
<input type="submit" name="submit" value="Add Song"/>
</div>
</form>