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
Related
so I am working to create this really simple website, but the problem of that I put for example to elements in one and I cant make them fit their places for example:
.Form {
border: 2px solid black;
background-color: white;
margin: 1px;
float: left;
width: 50%;
white-space: nowrap;
padding: 0;
}
.Member {
width: 40%;
}
.Not_member {
width: 50%;
text-align: center;
}
fieldset {
margin: 0;
float: left;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="Form">
<form action="/action_page.php" method="post">
<fieldset class="Member">
<legend>Sign In</legend>
Sign in today for more experience <br><br>
<b>Email:</b> <br>
<input type="text" name="email" placeholder="Enter Email">
<br><br>
<b>Password:</b> <br>
<input type="password" name="password" placeholder="Password">
<br><br>
<input type="checkbox" name="remember" value="yes">remember me
<input type="submit" value="Log in">
</fieldset>
</form>
<fieldset class="Not_member">
<legend>Not a member ?</legend>
You can create an account:<br>
<i class="fa fa-sign-in" style="font-size:500%;color: grey;"></i>
</fieldset>
</div>
what i want to do is:
make each one fit half the container vertically and horizontally
make them stay horizontal and shrink with the container, so what i mean that when the window becomes smaller they become vertical, how can I stop that?
thanks in advance
.Form {
border: 2px solid black;
background-color: white;
margin: 1px;
float: left;
width: 100%;
white-space: nowrap;
padding: 0;
}
form{
width:55%;
}
.Member{
width:40%;
}
.Not_member {
width: 45%;
text-align: center;
padding:0;
margin:0;
}
fieldset {
margin: 0;
float: left;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="Form">
<form action="/action_page.php" method="post">
<fieldset class="Member">
<legend>Sign In</legend>
Sign in today for more experience <br><br>
<b>Email:</b> <br>
<input type="text" name="email" placeholder="Enter Email">
<br><br>
<b>Password:</b> <br>
<input type="password" name="password" placeholder="Password">
<br><br>
<input type="checkbox" name="remember" value="yes">remember me
<input type="submit" value="Log in">
</fieldset>
</form>
<fieldset class="Not_member">
<legend>Not a member ?</legend>
You can create an account:<br>
<i class="fa fa-sign-in" style="font-size:500%;color: grey;"></i>
</fieldset>
</div>
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>
i'm not very familiar with CSS, i'm trying to apply a border on my login form, here is the code i use:
login.html:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<div id="login_container">
<form action="#" method="POST">
<div class="row">
<label for="username" class="label">Username</label>
<input type="text" class="field" name="username" />
</div>
<div class="row">
<label for="password" class="label">Password</label>
<input type="password" class="field" name="password" />
</div>
</form>
</div>
css/style.css:
#login_container {
margin-top:50px;
margin-left: auto;
margin-right: auto;
width: 300px;
border:1px solid black;
display:block;
}
.field {
float:right;
margin-left: 10px;
}
label {
float:left;
}
.row{
display:block;
clear:both;
}
and the output:
Why does the border cross the password text field?
EDIT:
with
form{
border:1px solid black;
}
the output is:
Add overflow:auto; to your #login_container div.
jsFiddle example
Because the inner elements are floated, you need to specify the overflow property to bring the border back around them.
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.
I'm noticing most folks are talking about using DIVs and CSS for
label, textbox pairs. How would one convert a table such as:
<table>
<tr>
<td><some Label1> </td>
<td><some TextBox1> </td>
</tr>
<tr>
<td><some Label2> </td>
<td><some TextBox2> </td>
</tr>
...
</table>
From using a table into say a div with CSS, a sample would be helpful! Currently I was using a table for such a thing, imagine say a site that just displays some user information. How would I display the pairs (the label, the text box) using DIVs rather than table format?
Assume the labels / textbox's are ASP.net labels and textboxes.
Consider this article at Woork titled Clean and Pure CSS Form Design
I've implemented this style, including the fieldset and tweaked all the styles appropriately for the look/feel that was required.
Consider using <label runat="server"> to inherit the style of the label via CSS instead of asp:label. Alternatively you could put your asp:label within label tags. Since asp:label emits <span>, that would simply result in a set of <label><span></span></label>.
Consider this article titled Tableless forms using CSS from CssDrive.
A little bit of style really helps. I've been refactoring/replacing all my table'd forms with the pattern found in the article above.
With the following code:
asp:textbox works perfectly, needs no modification for all kinds of textboxes
asp:button works perfectly, needs no modification
asp:checkbox would likely need modification, perhaps wrapped in another div with a special style
Here's the basic example presented:
The CSS:
<style type="text/css">
label{
float: left;
width: 120px;
font-weight: bold;
}
input, textarea{
width: 180px;
margin-bottom: 5px;
}
textarea{
width: 250px;
height: 150px;
}
.boxes{
width: 1em;
}
#submitbutton{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}
br{
clear: left;
}
</style>
The HTML:
<form>
<label for="user">Name</label>
<input type="text" name="user" value="" /><br />
<label for="emailaddress">Email Address:</label>
<input type="text" name="emailaddress" value="" /><br />
<label for="comments">Comments:</label>
<textarea name="comments"></textarea><br />
<label for="terms">Agree to Terms?</label>
<input type="checkbox" name="terms" class="boxes" /><br />
<input type="submit" name="submitbutton" id="submitbutton" value="Submit" />
</form>
Extract from my code:
<div>
<label for="Password"> Password:</label>
<input id="Password" type="password" name="Password"/>
<label for="ConfirmationPassword"> Confirmation: </label>
<input id="ConfirmationPassword" type="password" name="ConfirmationPassword"/>
<div class="clear"/>
</div>
<div>
<label for="FirstName"> Prénom:</label>
<input id="FirstName" type="text" value="" name="FirstName"/>
<label for="LastName"> Nom:</label>
<input id="LastName" type="text" value="" name="LastName"/>
<div class="clear"/>
</div>
</div>
with the following css:
label {
float:left;
margin-right:0.5em;
margin-top:10px;
padding-left:5px;
text-align:justify;
width:200px;
}
input[type="text"], textarea, input[type="password"], input[type="checkbox"], select {
float:left;
margin-right:10px;
margin-top:5px;
}
.clear {
clear:both;
}
I've used basically the same idea for creating a tableless form layout. But, I use an unordered list to hold my labels and inputs. For example:
<form>
<fieldset>
<ul class="formFields">
<li>
<label for="user">
Name</label><input type="text" name="user" value="" /></li>
<li>
<label for="emailaddress">
Email Address:</label><input type="text" name="emailaddress" value="" /></li>
<li>
<label for="comments">
Comments:</label><textarea name="comments"></textarea></li>
<li>
<label for="terms">
Agree to Terms?</label><input type="checkbox" name="terms" class="boxes" /></li>
</ul>
<p>
<input type="submit" name="submitbutton" id="submitbutton" value="Submit" /></p>
</fieldset>
</form>
The CSS styles can be just the same as what pcampbell has used in his example. The only difference for mine would be the addition of a style for the UL such as:
ul {list-style: none; margin: 0; padding: 0;}
Based on #p.cambell answer and the implementation with css, I wrote this code in asp.net for a login popup screen:
css
.flotante-login {
border:solid 2px #b7ddf2;
border-radius: 5px;
padding: 15px;
background:#ebf4fb;
}
.loginBox {
margin: 0 auto;
width: 400px;
padding: 10px;
}
#login{
}
#login h1 {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
#login p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#login label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#login .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#login input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#login a{
clear:both;
width:125px;
padding: 10px;
background-color: #E2B66B;
color:#FFFFFF;
text-align:center;
text-decoration: none !important;
line-height:30px;
font-weight:bold;
color: #FFF !important;
border-radius: 5px;
}
aspx page:
<div id="popupLogin" class="flotante-login" style="display:none;">
<asp:Panel ID="panelLogin" runat="server" DefaultButton="lbLogin">
<div id="login" class="loginBox">
<h1>Acceso</h1>
<label>
Usuario:
<span class="small">Ingresa tu email</span>
</label>
<asp:TextBox ID="txtUsuario" runat="server" MaxLength="250"></asp:TextBox>
<label>
Contraseña:
<span class="small">Ingresa tu contraseña</span>
</label>
<asp:TextBox ID="txtPassword" runat="server" MaxLength="8" TextMode="Password"></asp:TextBox>
<asp:LinkButton ID="lbLogin" Text="Ingresa" runat="server"></asp:LinkButton>
<div class="spacer"></div>
</div>
</asp:Panel>
</div>
The result is: