I have designed registration from. I want place reset button before submit on same line. I tried to place using br tag but the tag didn't worked.
Also suggest some links to validate form properly.
thanks
here is my
<!doctype html>
<html>
<head>
<style>
.inputfields{
width:100%;
padding:12px 12px;
margin:8px 0;
display:inline-block;
border:none;
border-bottom:1px solid red;
border-radius:8px;
box-sizing:border-box;
outline:none;
font-size:105%;
}
.inputradio{
margin:0 0 0 10px;
}
.inputfields:focus {
border: 3px solid gray;
}
input[type=submit]{
width:50%;
background-color: #4CAF50;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
margin:9px 0 0 200px;
padding:15px 20px;
}
input[type=reset]{
width:20%;
background-color: #4CAF50;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
margin:;
padding:15px 20px;
}
input[type=submit]:hover{
background-color: #45a049;
}
#d01{
background-color:#E0EEEE ;
padding:20px;
border:2px solid #9BDDFF;
border-radius:5px;
width:35%;
float:center;
margin-left:150px;
}
#selectbox{
color:white;
background-color:#b20000;
height:30px;
width:90px;
padding:5px;
font-size:15px;
margin-left:0px;
margin-right:40px;
}
</style>
</head>
<body>
<h3 style="margin-left:250px">Using CSS to Style HTML Forms</h3>
<div id="d01">
<form action="CSSForms.html">
<label>FirstName</label>
<input type="text" class="inputfields" name="firstname">
<label>LastName</label>
<input type="text" class="inputfields" name="lastname">
<br>
<label>Select gender:</label>
<input type="radio" class="inputradio" name="gender" value="male" checked checked">Male
<input type="radio" class="inputradio" name="gender" value="female">Female<br>
<label>Email-Id</label>
<input type="email" class="inputfields" name="lastname">
<label>Contact Number</label>
<input type="number" class="inputfields" name="lastname">
<label>Date of Birth</label>
<input type="Date" class="inputfields" name="lastname">
<label>Address</label>
<input type="text" class="inputfields" name="lastname">
<label style="margin:20px"> Select Your Country : </label>
<select name="country"id="selectbox">
<option value="india"> India</option>
<option value="Japan">Japan</option>
<option value="Switzerland">Switzerland</option>
<option value="France">France</option>
<input type="reset" value="Reset All" style="margin-left:10px">
<input type="submit" value="Register">
</form>
</div>
</body>
</html>
Here's a working version of your code - also fixed a couple HTML errors, like a missing </select> and a checked-value that was broken.
.inputfields{
width:100%;
padding:12px 12px;
margin:8px 0;
display:inline-block;
border:none;
border-bottom:1px solid red;
border-radius:8px;
box-sizing:border-box;
outline:none;
font-size:105%;
}
.inputradio{
margin:0 0 0 10px;
}
.inputfields:focus {
border: 3px solid gray;
}
input[type=submit]{
width:50%;
background-color: #4CAF50;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
padding:15px 20px;
}
input[type=reset]{
width: auto;
background-color: #4CAF50;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
padding:15px 20px;
}
input[type=submit]:hover{
background-color: #45a049;
}
#d01{
background-color:#E0EEEE ;
padding:20px;
border:2px solid #9BDDFF;
border-radius:5px;
width:35%;
float:center;
margin-left:150px;
}
#selectbox{
color:white;
background-color:#b20000;
height:30px;
width:90px;
padding:5px;
font-size:15px;
margin-left:0px;
margin-right:40px;
}
<!doctype html>
<html>
<body>
<h3 style="margin-left:250px">Using CSS to Style HTML Forms</h3>
<div id="d01">
<form action="CSSForms.html">
<label>FirstName</label>
<input type="text" class="inputfields" name="firstname">
<label>LastName</label>
<input type="text" class="inputfields" name="lastname">
<br>
<label>Select gender:</label>
<input type="radio" class="inputradio" name="gender" value="male" checked>Male
<input type="radio" class="inputradio" name="gender" value="female">Female<br>
<label>Email-Id</label>
<input type="email" class="inputfields" name="lastname">
<label>Contact Number</label>
<input type="number" class="inputfields" name="lastname">
<label>Date of Birth</label>
<input type="Date" class="inputfields" name="lastname">
<label>Address</label>
<input type="text" class="inputfields" name="lastname">
<label style="margin:20px"> Select Your Country : </label>
<select name="country"id="selectbox">
<option value="india"> India</option>
<option value="Japan">Japan</option>
<option value="Switzerland">Switzerland</option>
<option value="France">France</option></select>
<br><input type="reset" value="Reset All" style="margin-left:10px">
<input type="submit" value="Register">
</form>
</div>
</body>
</html>
Related
I am trying to align the input fields of a form like in How it should be actually but I have not been able to get it done.
You can see the code that I have done so far, but still it does not work.
What am I missing?
label.gegevens {
display: inline-block;
float: right;
clear: right;
width: 350px;
text-align: left;
}
input.gegevens {
display: inline-block;
float: left;
clear:left;
text-align:right;
}
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<p><label><span class="client-info">Naam: </span><input type="text" name="FirstName" required></label></p>
<p><label><span class="client-info">Adres: </span><input type="text" name="Adres" required></label></p>
<p><label><span class="client-info">Postcode: </span><input type="text" name="postcode" pattern="[1-9][0-9]{3}\s?[A-Z]{2}" required></label></p>
<p><label><span class="client-info">Woonplaats: </span><input type="text" name="Woonplaats" required></label></p>
<p><label><span class="client-info">Email: </span><input type="text" name="Email"></label></p>
<p><label><span class="client-info">Genwenste leverdatum: </span><input id="date" type="date" name="Leverdatum"></label></p>
<p><label><span class="client-info">Bestand: </span><input type="file" name="Bestand"></label></p>
<input type="submit" value="Bestellen">
</form>
Try adding a div around the form and then floating the inputs to the right. Here's what I did:
<div id="box">
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<p><label><span class="client-info">Naam: </span><input type="text" name="FirstName" required></label></p>
<p><label><span class="client-info">Adres: </span><input type="text" name="Adres" required></label></p>
<p><label><span class="client-info">Postcode: </span><input type="text" name="postcode" pattern="[1-9][0-9]{3}\s?[A-Z]{2}" required></label></p>
<p><label><span class="client-info">Woonplaats: </span><input type="text" name="Woonplaats" required></label></p>
<p><label><span class="client-info">Email: </span><input type="text" name="Email"></label></p>
<p><label><span class="client-info">Genwenste leverdatum: </span><input id="date" type="date" name="Leverdatum"></label></p>
<p><label><span class="client-info">Bestand: </span><input type="file" name="Bestand"></label></p>
<input type="submit" value="Bestellen">
</form>
and here's the CSS
label.gegevens {
display: inline-block;
float: left;
clear: left;
width: 200px;
text-align: left;
}
input {
display: inline-block;
float: right;
clear:right;
text-align:right;
}
#box {
width:50%
}
Link to jsbin
I have simplified your code a little. One of the problems was label.gegevens while that class wasn't used. I changed it to label.client-info.
I use a flexbox for the layout and vertical alignment of the line elements. To learn more about flexbox have a look here.
I don't use floats to keep all elements in the document flow.
Please note: flexbox may cause issues when using IE11 or lower.
label.client-info {
width: 180px;
}
form p {
display: flex;
align-items: center;
}
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<p><label class="client-info">Naam:</label><input type="text" name="FirstName" required></p>
<p><label class="client-info">Adres:</label><input type="text" name="Adres" required></p>
<p><label class="client-info">Postcode:</label><input type="text" name="postcode" pattern="[1-9][0-9]{3}\s?[A-Z]{2}" required></p>
<p><label class="client-info">Woonplaats:</label><input type="text" name="Woonplaats" required></p>
<p><label class="client-info">Email:</label><input type="text" name="Email"></p>
<p><label class="client-info">Genwenste leverdatum:</label><input id="date" type="date" name="Leverdatum"></p>
<p><label class="client-info">Bestand:</label><input type="file" name="Bestand"></p>
<input type="submit" value="Bestellen">
</form>
JSFiddle
input{
position:absolute;
right:50%;
left:200px;
}
label {
display: inline-block;
float: right;
clear: right;
width: 350px;
text-align: left;
}
input {
display: inline-block;
float: right;
clear:left;
text-align:right;
}
I notice you had used both the form element and class name, but you don't need a class name for this CSS. If you would need special CSS properties for an element, then you should use a class.
I managed to get what I wanted to achieve (see codes). Now I do not know how to make it responsive. In shorter viewports, everything gets messy. Any tips for this?
html {
background-image: url(boeken.jpeg);
background-size: cover;
}
span.list {
color:white;
background:black;
padding:4px;
margin-right:5px;
}
input#opt1, input#opt2, input#opt3 {
width:10px;
}
input#karen, input#paula {
width:20px;
border: #03A9F4;
border-style: solid;
border-width: 2px;
margin-left:5px;
}
input#esther {
width:120px;
border-top-width: 0px;
border-bottom-width: 0px;
margin-left:5px;
z-index:10;
}
select#lijst-fail, input#naam, input#adres, input#postcode, input#woonplaats, input#email, input#date {
margin-left: 5px;
}
small {
margin-left:10px;
}
form input {
width: 300px;
border: #03A9F4;
border-style: solid;
border-width: 2px;
}
.button-verzenden {
position:absolute;
top:35%;
padding-left:80%;
z-index:-10;
}
div#section-1 p {display:flex; align-items: center;}
label#karen, label#paula, label#esther, label#suzanne, label#samuel {width:260px;}
div#section-2 p {display:flex; align-items: center;}
div#section-2 label {width:165px;}
input#verzenden {
background-color: #6d4435;
font-size: 25px;
font-weight: bold;
color: white;
border: #03A9F4;
border-style: solid;
border-width: 2px;
cursor:pointer;
}
input[type="file"] {
border: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="boeken_bestellen.css">
<title>Bestel hier uw boeken</title>
</head>
<body>
<main>
<header>
<h1>Boeken bestellen</h1>
<p>Op deze pagina kunt u snel de boeken bestellen die in de top 5 staan. Geef per boek aan hoeveel u er van wilt bestellen. Sommige boeken zijn er populair en daardoor kunnen we slechts een beperkt aantal boeken naar u toesturen. Dit is aangegeven bij het boek.</p>
</header>
<div id="section-1">
<section>
<h2>Bestel hier uw boeken</h2>
<form id="formulier" action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<p><span class="list">1</span><label for="karen" id="karen">Karin Slaughter - Mooie meisjes:</label><input id="karen" name="karen" type="number" value="1" min="1" max="10"><small>Max. 10 exemplaren</small></p>
<p><span class="list">2</span><label for="paula" id="paula">Paula Hawkins - Het meisje in de trein:</label><input id="paula" type="text" name="paula" pattern="[0-9]{2}"><small>Max. 99 exemplaren</small></p>
<p><span class="list">3</span><label for="esther" id="esther">Esther Verhoef - Lieve mama:</label><input id="esther" type="range" min="0" max="15" step="5" list="bereik"><small>Bestel 0, 5, 10 of 15 exemplaren</small>
<datalist id="bereik">
<option value="0">
<option value="5">
<option value="10">
<option value="15">
</datalist></p>
<p><span class="list">4</span><label for="suzanne" id="suzanne">Suzanne Vermeer - Costa del Sol:</label>
<label for="opt1"><input id="opt1" type="radio" name="mw" value="1">1</label>
<label for="opt2"><input id="opt2" type="radio" name="mw" value="10">10</label>
<label for="opt3"><input id="opt3" type="radio" name="mw" value="20">20</label>
</p>
<p><span class="list">5</span><label for="lijst-fail" id="samuel">Samuel Bjork - Ik reis alleen:</label><select id="lijst-fail" name="stijl">
<option value="">
<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></p>
</form>
</section>
</div>
<div id="section-2">
<section>
<h2>Geef hier uw adres gegevens op</h2>
<form id="formulier" action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<p><label for="naam">Naam: <abbr title="Vereist">*</abbr></label>
<input id="naam" name="naam" required></p>
<p><label for="adres">Adres: <abbr title="Vereist">*</abbr></label>
<input id="adres" name="adres" required></p>
<p><label for="pc3">Postcode:</label>
<input id="postcode" name="postcode" pattern="[0-9]{4}\s[A-Z]{2}" title="Een postcode bestaat uit 4 cijfers, 1 spatie en 2 hoofdletters" placeholder="1234 AB"></p>
<p><label for="woonplaats">Woonplaats: <abbr title="Vereist">*</abbr></label>
<input id="woonplaats" name="woonplaats" required></p>
<p><label for="email">Email:</label><input id="email" name="email" type="email" placeholder=iemand#domein.nl pattern="^[a-zA-Z0-9._%+-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$"> </p>
<p><label for="date">Gewenste leverdatum:</label><input id="date" name="date" type="date"></p>
<p><label for="file">Bestand:</label><input type="file" name="Bestand"></p>
</form>
<div class="button-verzenden">
<input id="verzenden" form="formulier" type="submit" value="Bestellen">
</div>
</section>
</div>
</main>
</body>
</html>
How to make a web form with 3 columns using CSS? In the above example all elements are placed just in a single column.
<html>
<head>
<style>
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
padding:14px;
}
#stylized{
border-width:1px;
border-style:solid;
border-color:#b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
border-width:1px;
border-style:solid;
border-color:#b7ddf2;
padding-bottom:10px;
}
#stylized label{
font-size:11px;
font-weight:bold;
text-align:right;
}
#stylized input{
font-size:11px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:70px;
margin:2px 0 20px 10px;
display: block;
}
/* --------- End of Form --------- */
</style>
</head>
<body>
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Data</h1>
<label>Name: </label>
<input type="text" name="name" id="name"/>
<label>Email: </label>
<input type="text" name="email" id="email"/>
<label>Password: </label>
<input type="text" name="password" id="password"/>
</form>
</div>
</body>
</html>
DEMO: http://jsfiddle.net/bfZR4/
Basically, if you put all three into divs with a class of column like so:
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Data</h1>
<div class="column">
<label>Name: </label>
<input type="text" name="name" id="name"/>
</div>
<div class="column">
<label>Email: </label>
<input type="text" name="email" id="email"/>
</div>
<div class="column">
<label>Password: </label>
<input type="text" name="password" id="password"/>
</div>
</form>
Then you can apply the following style to the column class:
.column
{
float: left;
width: 33%;
}
you can use this for all form or if you want to do this in a particular form so you can define css name with class or id.
form div
{
display: inline;
width: 33%;
float: left;
}
Hey you can used display:inline-block;
HTML
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Data</h1>
<div class="column">
<label >Name:
<input type="text" name="name" id="name"/></label>
</div>
<div class="column">
<label>Email:
<input type="text" name="email" id="email"/></label>
</div>
<div class="column">
<label>Password:
<input type="text" name="password" id="password"/></label>
</div>
</form>
</div>
Css
.column
{
display: inline-block;
margin-left: 23px;
vertical-align: top;
}
.column + .column{
margin-left:25px;
}
Live demo http://jsfiddle.net/bfZR4/2/
Put every 3 fields in a div with id section. and then each of field in a div havin class subsection
<html>
<head>
<style>
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
padding:14px;
}
#stylized{
border-width:1px;
border-style:solid;
border-color:#b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
border-width:1px;
border-style:solid;
border-color:#b7ddf2;
padding-bottom:10px;
}
#stylized label{
font-size:11px;
font-weight:bold;
text-align:right;
}
#stylized input{
font-size:11px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:70px;
margin:2px 0 20px 10px;
display: block;
}
#section{
width:100%;
padding: 10px;
}
.subsection{
width:30%;
margin:0px 5px 0px 5px;
float: left;
}
/* --------- End of Form --------- */
</style>
</head>
<body>
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Data</h1>
<div id="section">
<div class="subsection">
<label>Name: </label>
<input type="text" name="name" id="name"/>
</div>
<div class="subsection">
<label>Email: </label>
<input type="text" name="email" id="email"/>
</div>
<div class="subsection">
<label>Password: </label>
<input type="text" name="password" id="password"/>
</div>
</form>
</div>
</div>
</body>
</html>
thanks
I am trying to place two input forms next to eachother and position some text underneath them. Somehow it never ends up aligned correctly. This picture shows what I am trying to do:
HTML:
<form action="#" class="cleanForm" method="POST">
<fieldset>
<input type="text" name="firstname" placeholder="first name" required>
<em>Please enter your first name</em>
<input type="text" name="lastname" placeholder="last name" required>
<em>Enter your last name</em>
<input type="email" name="email" placeholder="e-mail" required>
<em>Enter your e-mail address</em>
<input type="email" name="email2" placeholder="re-enter e-mail" required>
<em>Re-enter your e-mail address</em>
<input type="password" name="password" placeholder="password" required>
<em>Enter a password between 8 and 20 digits</em>
<input type="password" name="password2" placeholder="re-enter password" required />
<em>Re-enter the password</em>
<p>
<input type="radio" name="gender" value="Female" checked>
<label for="female">Female</label>
<input type="radio" name="gender" value="Male">
<label for="male">Male</label>
</p>
<p>
<input type="checkbox" id="agree-TOS">
<label for="agree-TOS">I have read and agree to the Terms of Service.</label>
</p>
<input type="submit" value="Create account">
</fieldset>
</form>
CSS:
form.cleanForm {
width:700px;
margin:0 auto;
}
form.cleanForm p {
margin-bottom:15px;
}
input[type="email"], input[type="password"], input[type="text"] {
font-family: Arial, Sans-Serif;
font-size: 18px;
color: #adadad;
padding: 10px;
outline:none;
float:left;
border: solid 1px #adadad;
width: 230px;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow:inset 0 0 5px 5px #E6E6E6;
-webkit-box-shadow:inset 0 0 5px 5px #E6E6E6;
box-shadow:inset 0 0 5px 5px #E6E6E6;
clear: right;
}
input[type="email"]:focus, input[type="email"]:hover, input[type="password"]:focus,
input[type="password"]:hover, input[type="text"]:focus, input[type="text"]:hover {
border:1px solid #FF003F;
}
form.cleanForm em {
font-size:12px;
}
You're applying float:left to the <input>s, but not to the <em>s. That's why all the fields are pushed to the left, while the labels remain in the ordinary page flow.
One possible solution is wrapping both of them in a <div> and applying the float to that:
HTML:
<div class="field">
<input type="text" name="firstname" placeholder="first name" required />
<em>Please enter your first name</em>
</di>
CSS:
div.field {
float: left;
}
Also, it would be more sematically correct to use a <label> instead of an <em>.
I think your markup needs a redo. Use <label>s to describe form element labels, not <em>s. There's no semantic value in the emphasis. Also, you can use the labels themselves to align the form easily. Here's my code (Live Example Here):
HTML
<form action="#" class="cleanForm" method="POST">
<fieldset>
<label><input type="text" name="firstname" placeholder="first name" required>
Please enter your first name</label>
<label><input type="text" name="lastname" placeholder="last name" required>
Enter your last name</label>
<label><input type="email" name="email" placeholder="e-mail" required>
Enter your e-mail address</label>
<label><input type="email" name="email2" placeholder="re-enter e-mail" required>
Re-enter your e-mail address</label>
<label><input type="password" name="password" placeholder="password" required>
Enter a password between 8 and 20 digits</label>
<label><input type="password" name="password2" placeholder="re-enter password" required>
Re-enter the password</label>
<div id="gender">
<label><input type="radio" name="gender" value="Female" checked>
Female</label>
<label><input type="radio" name="gender" value="Male">
Male</label>
</div>
<label class="tos"><input type="checkbox" id="agree-TOS">
I have read and agree to the Terms of Service.</label>
</fieldset>
<button type="submit">Create account</button>
</form>
CSS
.cleanForm {
width: 550px;
}
fieldset > label > input {
display: block;
}
input[type="checkbox"] {
display: inline;
}
label {
margin: 10px;
padding: 5px;
}
fieldset > label {
float: left;
width: 200px;
}
label:nth-child(2n+1) {
clear: both;
}
#gender, .tos, button {
clear: both;
}
.tos {
width: 400px;
}
input[type="text"], input[type="email"], input[type="password"] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);
padding: 5px;
}
You may try this:
HTML
<form action="#" class="cleanForm" method="POST">
<fieldset>
<div class="column">
<input type="text" name="firstname" placeholder="first name" required />
<em>Please enter your first name</em>
</div>
<div class="column last">
<input type="text" name="lastname" placeholder="last name" required />
<em>Enter your last name</em>
</div>
<div class="column">
<input type="email" name="email" placeholder="e-mail" required />
<em>Enter your e-mail address</em>
</div>
<div class="column last">
<input type="email" name="email2" placeholder="re-enter e-mail" required />
<em>Re-enter your e-mail address</em>
</div>
<div class="column">
<input type="password" name="password" placeholder="password" required />
<em>Enter a password between 8 and 20 digits</em>
</div>
<div class="column last">
<input type="password" name="password2" placeholder="re-enter password" required /><br />
<em>Re-enter the password</em>
</div>
<p style="clear:both;">
<input type="radio" name="gender" value="Female" checked />
<label for="female">Female</label>
<input type="radio" name="gender" value="Male" />
<label for="male">Male</label>
</p>
<p>
<input type="checkbox" id="agree-TOS" />
<label for="agree-TOS">I have read and agree to the Terms of Service.</label>
</p>
<input type="submit" value="Create account" />
</fieldset>
</form>
CSS
form.cleanForm {
width:700px;
margin:0 auto;
}
form.cleanForm p {
margin-bottom:15px;
}
input[type="email"], input[type="password"], input[type="text"] {
font-family: Arial, Sans-Serif;
font-size: 18px;
color: #adadad;
padding: 10px;
outline:none;
float:left;
border: solid 1px #adadad;
width: 230px;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow:inset 0 0 5px 5px #E6E6E6;
-webkit-box-shadow:inset 0 0 5px 5px #E6E6E6;
box-shadow:inset 0 0 5px 5px #E6E6E6;
clear: right;
}
input[type="email"]:focus, input[type="email"]:hover, input[type="password"]:focus, input[type="password"]:hover, input[type="text"]:focus, input[type="text"]:hover {
border:1px solid #FF003F;
}
form.cleanForm em {
font-size:12px;
}
.column{
width:250px;
float:left;
margin-right:20px;
padding: 10px;
}
.last{
margin:0;
padding: 10px;
}
Output
#PPvG's answer is very close, but not perfect:
In almost all cases, every <input> tag should have a matching <label> tag, and where you have used <em> is a perfect place for a label.
In this case, inline-block is more appropriate than float
Here's how I would do it:
HTML:
<div class="field">
<input type="text" name="firstname" id="firstname_field" placeholder="first name" required />
<label for="firstname_field">Please enter your first name</label>
</div>
CSS:
div.field {
display: inline-block;
width: 200px;
}
div.field label
{
display: block;
}
How could I align my input boxes so that the first one is aligned with the label and the other two is aligned underneath the top input box.
Why is my domain and dropdown menu not aligning?
CSS:
#newwebsiteForm{
padding:10px;
margin:10px 0;
width:480px;
position: relative
}
#newwebsiteForm label{
display:block;
float:left;
clear:both;
margin:0 15px 0 25px;
width:240px;
border:1px solid green;
height:15px
}
#newwebsiteForm input{
display:block;
float:left;
width:240px;
height:15px;
}
#newwebsiteForm .radioButton {
width:15px;
height:15px;
}
#newwebsiteForm .radioText {
display:block;
width:30px;
height:20px;
float:left;
font-size:12px;
border:1px solid red;
}
#newwebsiteForm #color1,#color2,#color3,#fav1,#fav2,#fav3{
display:block;
float:left;
margin-left:25px;
background-color:red;
}
#newwebsiteForm textarea{
display:block;
float:left;
}
input#domain,#newwebsiteForm select,
.form-field{float:right;width:200px;margin-top:-15px}
.form-field{width:220px}
HTML:
<div id="newwebsiteSection">
<form action="#" id="newwebsiteForm" method="get">
<fieldset>
<div>
<label>Do You Require Hosting?</label>
<span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
<span class="radioText">No</span><input class="radioButton" type="radio" name="No" value="No"/>
</div>
<div>
<label>Do You Require A Domain?</label>
<span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
<span class="radioText">No</span><input class="radioButton" type="radio" name="No" value="No"/>
</div>
<label>Do You Have A Logo?</label>
<span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
<span class="radioText">No</span><input class="radioButton" type="radio" name="No" value="No"/>
<label for="domain">What is your Domain?</label>
<input type="url" id="domain" value="http://example.com"/>
<label for="newwebsiteType">Type of site Required?</label>
<select name="newwebsiteType" id="newwebsiteType">
<option value="shoppingCart">Shopping Cart</option>
<option value="CMS">Content Management System</option>
<option value="static">Static Website</option>
<option value="otherDevelopment">Other Development</option>
</select>
<label>Do You Require A Design?</label>
<span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
<span class="radioText">No</span><input class="radioButton" type="radio" name="No" value="No"/>
<div>
<label>Three Favorite colors?</label>
<div class="form-field">
<input id="color1" value=""/>
<input id="color2" value=""/>
<input id="color3" value=""/>
</div>
</div>
<div>
<label>What are your favorite websites?</label>
<div class="form-field">
<input type="text" id="fav1" value=""/>
<input type="text" id="fav2" value=""/>
<input type="text" id="fav3" value=""/>
</div>
</div>
<label for="comments">Comments?</label>
<textarea name="comments" id="comments"></textarea>
<input type="submit" name="submit" value="Send Quote Request"/>
</fieldset>
</form>
</div>
Despite all the flack they've gotten lately, I feel like this is one of the few examples of where a table is actually not only useful, but the most correct solution.
HTML
<form id="contact_form" action="#" name="" method="POST">
<label for="name">NAME</label>
<input type="text" name="name" id="name" class="contact_form_input" />
<label for="email">EMAIL</label>
<input type="text" name="email" id="email" class="contact_form_input" />
<label for="subject">SUBJECT</label>
<input type="text" name="subject" id="subject" class="contact_form_input" />
<label for="message">MESSAGE</label>
<textarea name="message" id="message"></textarea>
<input type="submit" class="submit" name="submit" value="Submit" />
<input type="reset" class="reset" name="reset" value="Reset" />
</form>
CSS
form#contact_form{
width:auto;
height:auto;
margin:0px;
margin-left:73px;
padding:0px;
float:left;
clear:both;
}
form#contact_form label{
float:left;
clear:both;
margin-left:3px;
margin-bottom:6px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:italic;
font-weight:bold;
}
input.contact_form_input{
width:474px;
height:36px;
margin:0px;
margin-bottom:9px;
padding:0px;
float:left;
clear:left;
}
form#contact_form textarea{
width:479px;
height:150px;
margin-bottom:9px;
float:left;
clear:left;
}
you can see here that in IE7 that text inputs gets some kind of "margin-left". How can i get rid of that margin? thanks
Your easiest option would actually be to use the following CSS:
form#contact_form label{
display: block;
margin-left:3px;
margin-bottom:6px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:italic;
font-weight:bold;
}
But I would recommend you wrap each of your input rows (including the label) in a block-level element such as a <p> tag or a list item:
<form id="contact_form" action="#" name="" method="POST">
<ul>
<li>
<label for="name">NAME</label>
<input type="text" name="name" id="name" class="contact_form_input" />
</li>
...
This article from A List Apart is an excellent introduction.
I'd suggest using conditional comments: (Put this in the head)
<!--[if lt IE 8]>
<link href="IE.css" rel="Stylesheet" type="text/css"/>
<![endif]-->
and setting up some separate CSS_
input.contact_form_input{
width:474px;
height:36px;
margin:0px;
margin-bottom:9px;
margin-left:-10px;/*or whatever px distance works*/
padding:0px;
float:left;
/*remove clear:left;*/
}
That's what I always do to make IE behave.