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.
Related
i had a look at some examples here and followed one, but it is not wokting. what am i missing please?
fieldset {
overflow:hidden;
width:90%
}
label {
padding-left:26px;
width:250px;
display:block; float:left; clear:left;
}
input {
width:200px;
display:block; float:left;
}
.formFieldDiv { float:left; width:500px }
<td style="width:70%" align="left" valign="top">
<form id="divorce" name="divorce" method="post" action="send_form_email.php">
<fieldset>
<div id="spouse1" class="formFieldDiv" >
<label for="spouse1">Full Names + Surname Spouse 1*</label>
<input type="text" name="spouse1" id="spouse1" maxlength="50" size="30" />
</div>
<div id="spouse2" class="formFieldDiv">
<label for="spouse2">Full Names</label>
<input type="text" name="spouse2" id="spouse2" maxlength="50" size="30"/>
</div>
</fieldset>
</form>
</td>
what am i missing? I want to get the input's all in line
formFieldDiv is a class so use . before it in css ie-
.formFieldDiv { float:left; width:500px } instead of
formFieldDiv { float:left; width:500px }
Add
display:inline-block;
to your label
<div id="spouse1" class="formFieldDiv" >
<label for="spouse1">address</label>
<input type="text" name="spouse1" id="address" maxlength="50" size="30" />
</div>>
change </div>> to </div>
And i need to look your send_form_email.php file
I created a jfiddle. I'm sure it is easy to fix, but I can't figure it out.
http://jsfiddle.net/mt4jK/8/
<h1 class="allpages">Questions or Concerns about Compliance Issues?</h1>
<h3>We welcome all compliments and constructive criticism!</h3>
<form class="webform" action="http://hsc.unm.edu/scripts/cfmailform/cfmailer.cfm" method="post">
<!--Required hidden operators-->
<input name="recipient" type="hidden" value="bfloran#salud.unm.edu" />
<input name="subject" type="hidden" value="HSC Compliance Office Email Form" />
<input type="hidden" name="cc" value="mgwilson#salud.unm.edu" />
<input name="redirect" type="hidden" value="http://hsc.unm.edu/admin/compliance/ThankYOU.html" /> <!-- Field validation for the user -->
<label for "name">Your Name (optional):</label>
<input name="name" type="text" id="name" value="" /><br />
<label for "name">Your E-mail (Optional):</label>
<input name="mail" type="text" value="" /><br>
<label for "name">Comment:</label>
<textarea name="comment" value="" ></textarea>
<p>
<div class="submit">
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</div>
</form>
CSS:
h3{text-align:center;}
.webform {background-color: #eeeeee;
width: 655px; border: solid;
border-color: #e9e9e9;margin-left: auto; margin-right: auto; padding: 15px 0px 15px 17px;}
.webform label { width:200px; vertical-align:top; text-align:right; padding: 5px; float:left; font-size:14px; font-weight:bold;}
.webform textarea {width:200px; text-align:right; float:left; }
.submit{width:50px:}
edit: formatting the CSS code to easy visibility.
you have a float:left in textarea remove it like this:
.webform textarea {width:200px; text-align:right; }
instead of this:
.webform textarea {width:200px; text-align:right; float:left; }
DEMO
It looks like the margin-bottom of your comment boxes is messing with the .submit div. I found that adding some margin top to your .submit wrapper pushes it far enough down to clear the other container's margin-bottom. Try adding this to your ".submit" class:
css:
width: 230px;
margin: 50px auto;
I'm having a problem here. My first two heading doesn't have a problem. But when I insert my 3rd heading the form is screwed. Here is the code. Yes, i'm quite new.
![enter image description here][1]
<html>
<head>
<link rel="stylesheet" href="form.css" type="text/css">
</head>
<body>
<div id="stylized" class="assestment-form">
<form id="form" name="form" method="post" action="assesment-form-handler.php">
<h1>Application Information</h1>
<p> </p>
<label>Name</label>
<input type="text" name="client_name" id="client_name" />
<label>Date of Birth</label>
<input type="text" name="client_dob" id="client_dob" />
<label>Gender</label>
<input type="text" name="client_gender" id="client_gender" />
<label>Address</label>
<textarea name="client_address" rows=5 cols=40 id="client_address"></textarea>
<label>Contact No.</label>
<input type="text" name="client_contact" id="client_contact" />
<label>Email Address</label>
<input type="text" name="client_dob" id="client_dob" />
<label>Marital Status</label>
<input type="text" name="client_status" id="client_status" />
<label>Citizenship</label>
<input type="text" name="client_citizen" id="client_citizen" />
<h1>Formal Training</h1>
<p> </p>
<label>DIPLOMA 1 </label>
<input type="text" name="client_dip1" id="client_dip1" />
<label>Field of Training </label>
<input type="text" name="client_field1" id="client_field1" />
<label>Educational Institution</label>
<input type="text" name="client_edu1" id="client_edu1" />
<label>Began Studies on</label>
<input type="text" name="client_stud1" id="client_stud1" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip1" id="client_obtaindip1" />
<label>DIPLOMA 2 </label>
<input type="text" name="client_dip2" id="client_dip2" />
<label>Field of Training </label>
<input type="text" name="client_field2" id="client_field2" />
<label>Educational Institution</label>
<input type="text" name="client_edu2" id="client_edu2" />
<label>Began Studies on</label>
<input type="text" name="client_stud2" id="client_stud2" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip2" id="client_obtaindip2" />
<label>DIPLOMA 3 </label>
<input type="text" name="client_dip3" id="client_dip3" />
<label>Field of Training </label>
<input type="text" name="client_field3" id="client_field3" />
<label>Educational Institution</label>
<input type="text" name="client_edu3" id="client_edu3" />
<label>Began Studies on</label>
<input type="text" name="client_stud3" id="client_stud3" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip3" id="client_obtaindip3" />
<h1>Work Experience</h1>
<p> </p>
<label>JOB 1</label>
<input type="text" name="client_job1" id="client_job1" />
<label>Company</label>
<input type="text" name="client_company1" id="client_company1" />
<label>Date of Beginning</label>
<input type="text" name="client_begin1" id="client_begin1" />
<label>Date of End</label>
<input type="text" name="client_end1" id="client_end1" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties1" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob1">
<label>JOB 2</label>
<input type="text" name="client_job2" id="client_job2" />
<label>Company</label>
<input type="text" name="client_company2" id="client_company2" />
<label>Date of Beginning</label>
<input type="text" name="client_begin2" id="client_begin2" />
<label>Date of End</label>
<input type="text" name="client_end2" id="client_end2" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties3" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob2">
<label>JOB 3</label>
<input type="text" name="client_job3" id="client_job3" />
<label>Company</label>
<input type="text" name="client_company3" id="client_company3" />
<label>Date of Beginning</label>
<input type="text" name="client_begin3" id="client_begin3" />
<label>Date of End</label>
<input type="text" name="client_end3" id="client_end3" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties3" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob3">
<h1>Language Skills</h1>
<p>(Please specify level: beginner, intermediate or advance) </p>
<h2>Reading</h2>
<label>French</label>
<input type="text" name="client_readfrench1" id="client_readfrench1" />
<label>English</label>
<input type="text" name="client_readenglish1" id="client_readenglish1" />
<label>Have you passed the test?</label>
<input type="text" name="client_langtest1" id="client_langtest1"
value="Please put Yes or No"/>
<label>If yes, please specify test</label>
<textarea name="client_specify1" id="client_specify1" rows=5 cols=40></textarea>
<label>Date Passed</label>
<input type="text" name="client_datepassed1" id="client_datepassed1" />
<h2>Writing</h2>
<label>French</label>
<input type="text" name="client_readfrench2" id="client_readfrench2" />
<label>English</label>
<input type="text" name="client_readenglish2" id="client_readenglish2" />
<label>Have you passed the test?</label>
<input type="text" name="client_langtest2" id="client_langtest2"
value="Please put Yes or No"/>
<label>If yes, please specify test</label>
<textarea name="client_specify2" id="client_specify2" rows=5 cols=40></textarea>
<label>Date Passed</label>
<input type="text" name="client_datepassed2" id="client_datepassed2" />
<h2>Oral Expression</h2>
<label>French</label>
<input type="text" name="client_readfrench2" id="client_readfrench2" />
<button type="submit">Submit</button>
<div class="spacer"></div>
</form>
</div>
<body>
</html>
css code
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.assestment-form{
margin:0 auto;
width:400px;
padding:14px;
}
/* ----------- stylized ----------- */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:20px;
font-weight:bold;
margin-bottom:8px;
}
#stylized h2 {
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:left;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:left;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
#stylized textarea {
loat:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
Remember input elements are inline elements, so the headings will appear after the input element if there is enough space for it to do so. The Oral in the heading Oral Expression is wide enough to fit after the input element and that is why it is behaving that way.
Try changing the width of .assestment-form from 400px to 375px and the heading will appear in the next line.
Live demo....................................................................
Hi now define your #stylized h2 to clear both
as like this
#stylized h2{
clear:both;
}
Live demo
This is happening because there is enough space to hold part of text from the h2 tag
so in your h2 css add
clear:left;
The answer is here: http://jsfiddle.net/2dcPE/5/
Please check. Please keep in mind:
Add float: left; for h1 and h2 in Css
Add to Css
br{
clear: left;
}
Add <br /> in HTML to make new line
UPDATE:
HTML
<html>
<head>
<link rel="stylesheet" href="form.css" type="text/css">
</head>
<body>
<div id="stylized" class="assestment-form">
<form id="form" name="form" method="post" action="assesment-form-handler.php">
<h1>Application Information</h1><br/>
<p> </p>
<label>Name</label>
<input type="text" name="client_name" id="client_name" />
<label>Date of Birth</label>
<input type="text" name="client_dob" id="client_dob" />
<label>Gender</label>
<input type="text" name="client_gender" id="client_gender" />
<label>Address</label>
<textarea name="client_address" rows=5 cols=40 id="client_address"></textarea>
<label>Contact No.</label>
<input type="text" name="client_contact" id="client_contact" />
<label>Email Address</label>
<input type="text" name="client_dob" id="client_dob" />
<label>Marital Status</label>
<input type="text" name="client_status" id="client_status" />
<label>Citizenship</label>
<input type="text" name="client_citizen" id="client_citizen" />
<h1>Formal Training</h1><br/>
<p> </p>
<label>DIPLOMA 1 </label>
<input type="text" name="client_dip1" id="client_dip1" />
<label>Field of Training </label>
<input type="text" name="client_field1" id="client_field1" />
<label>Educational Institution</label>
<input type="text" name="client_edu1" id="client_edu1" />
<label>Began Studies on</label>
<input type="text" name="client_stud1" id="client_stud1" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip1" id="client_obtaindip1" />
<label>DIPLOMA 2 </label>
<input type="text" name="client_dip2" id="client_dip2" />
<label>Field of Training </label>
<input type="text" name="client_field2" id="client_field2" />
<label>Educational Institution</label>
<input type="text" name="client_edu2" id="client_edu2" />
<label>Began Studies on</label>
<input type="text" name="client_stud2" id="client_stud2" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip2" id="client_obtaindip2" />
<label>DIPLOMA 3 </label>
<input type="text" name="client_dip3" id="client_dip3" />
<label>Field of Training </label>
<input type="text" name="client_field3" id="client_field3" />
<label>Educational Institution</label>
<input type="text" name="client_edu3" id="client_edu3" />
<label>Began Studies on</label>
<input type="text" name="client_stud3" id="client_stud3" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip3" id="client_obtaindip3" />
<h1>Work Experience</h1><br/>
<p> </p>
<label>JOB 1</label>
<input type="text" name="client_job1" id="client_job1" />
<label>Company</label>
<input type="text" name="client_company1" id="client_company1" />
<label>Date of Beginning</label>
<input type="text" name="client_begin1" id="client_begin1" />
<label>Date of End</label>
<input type="text" name="client_end1" id="client_end1" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties1" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob1">
<label>JOB 2</label>
<input type="text" name="client_job2" id="client_job2" />
<label>Company</label>
<input type="text" name="client_company2" id="client_company2" />
<label>Date of Beginning</label>
<input type="text" name="client_begin2" id="client_begin2" />
<label>Date of End</label>
<input type="text" name="client_end2" id="client_end2" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties3" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob2">
<label>JOB 3</label>
<input type="text" name="client_job3" id="client_job3" />
<label>Company</label>
<input type="text" name="client_company3" id="client_company3" />
<label>Date of Beginning</label>
<input type="text" name="client_begin3" id="client_begin3" />
<label>Date of End</label>
<input type="text" name="client_end3" id="client_end3" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties3" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob3">
<h1>Language Skills</h1><br/>
<p>(Please specify level: beginner, intermediate or advance) </p>
<h2>Reading</h2><br/>
<label>French</label>
<input type="text" name="client_readfrench1" id="client_readfrench1" />
<label>English</label>
<input type="text" name="client_readenglish1" id="client_readenglish1" />
<label>Have you passed the test?</label>
<input type="text" name="client_langtest1" id="client_langtest1"
value="Please put Yes or No"/>
<label>If yes, please specify test</label>
<textarea name="client_specify1" id="client_specify1" rows=5 cols=40></textarea>
<label>Date Passed</label>
<input type="text" name="client_datepassed1" id="client_datepassed1" />
<h2>Writing</h2><br/>
<label>French</label>
<input type="text" name="client_readfrench2" id="client_readfrench2" />
<label>English</label>
<input type="text" name="client_readenglish2" id="client_readenglish2" />
<label>Have you passed the test?</label>
<input type="text" name="client_langtest2" id="client_langtest2"
value="Please put Yes or No"/>
<label>If yes, please specify test</label>
<textarea name="client_specify2" id="client_specify2" rows=5 cols=40></textarea>
<label>Date Passed</label>
<input type="text" name="client_datepassed2" id="client_datepassed2" />
<div>
<h2>Oral Expression</h2><br/>
<label>French</label>
<input type="text" name="client_readfrench2" id="client_readfrench2" />
<button type="submit">Submit</button>
<div class="spacer"></div>
</form>
</div>
<body>
</html>
CSS
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.assestment-form{
margin:0 auto;
width:400px;
padding:14px;
}
/* ----------- stylized ----------- */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:20px;
font-weight:bold;
margin-bottom:8px;
float: left;
}
#stylized h2 {
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
margin-bottom:8px;
float: left;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:left;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:left;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
#stylized textarea {
loat:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
br{
clear: left;
}
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'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: