I know it's bad to use HTML Tables for everything... and that tables should be used only to present tabular data and not to achieve some style goal.
My question is, how do you make HTML forms with CSS so they look nice and aligned like when using tables?
Nick Rigby wrote an excellent article for A List Apart titled Prettier Accessible Forms
Uses fieldset, legend, label. Highly semantic.
Take a look at the code used in wufoo forms, they use ul's to format the forms and they look really good.
http://wufoo.com/gallery/templates/
You can try and strip the form as far back as possible and make do with the <label> and various form input elements as needed with a lean on the clear:left; attribute in the CSS.
This would make sure each line starts anew without having to wrap each line of the form in an extra <div> or <p> or even making a list out of it.
.formlabel{
clear:left;
display:block;
float:left;
margin:0 0 1em 0;
padding:0 0.5em 0 0;
text-align:right;
width:8em;
}
.forminput{
float:left;
margin:0 0.5em 0.5em 0;
}
.formwarning{
clear:left;
float:left;
margin:0 0.5em 1em 0;
}
Here's a sample HTML form showing examples of various input types and an extra validation message that you can hide or style as needed:
<fieldset><legend>Details</legend>
<label for="name" class="formlabel">Name</label>
<input id="name" name="name" type="text" class="forminput" />
<div class="formwarning">Validation error message</div>
<label for="dob_year" class="formlabel">DOB</label>
<div class="forminput">
<input id="dob_year" name="dob_year" type="text" size="4" /> /
<input id="dob_month" name="dob_month" type="text" size="2" /> /
<input id="dob_day" name="dob_day" type="text" size="2" />
</div>
<label class="formlabel">Sex</label>
<label for="female" class="forminput">Female</label>
<input id="female" name="sex" type="radio" class="forminput" />
<label for="male" class="forminput">Male</label>
<input id="male" name="sex" type="radio" class="forminput" />
<label for="state" class="formlabel">State</label>
<select id="state" name="state" class="forminput">
<option>ACT</option>
<option>New South Wales</option>
<option>Northern Territory</option>
<option>Queensland</option>
<option>South Australia</option>
<option>Tasmania</option>
<option>Victoria</option>
<option>Western Australia</option>
</select>
<label for="deadseal" class="formlabel">Death certificate</label>
<input id="deadseal" name="deadseal" type="file" class="forminput" />
</fieldset>
In the above example, the DOB does have an extra <div> cluttering things up. You could get rid of it if you style up the date slashes as part of the :after pseudo-element where needed.
Turns out okay in Opera 11.60, Firefox 11, Google Chrome 18 and Internet Explorer 8.
I would lookup using the div tag to layout data on a page.
Tables are still very much useful for tabular data, but its frowned upon for laying out a page.
View source here on stackoverflow.com, there's probably some good examples.
Think about putting field names above the field, rather than beside. I find this works about the best.
HTML
<form>
<div id="personal_name">
<label>Name</label>
<input name="name" />
</div>
</form>
CSS
form
{display: table}
#personal_name
{display: table-row}
#personal_name input, #personal_name label
{display: table-cell}
I think this is enough.
Related
Just have a quick question, I am working on a website and as you can see I have created a few input fields. Ideally I wanted all my input fields to be skewed to the far right, which they are. Unfortunately, they are overly bunched without much padding. I've tried to add a class to my input fields and add appropriate padding via the CSS, but I've only managed managed to get them to go all to the far right.
So my question is, what do I need to add so my input fields are to the far right AND spaced appropriately?
<form action="demo_form.asp">
First Name: <input type="text" name="fname" class="test" required>
<br>Last Name: <input type="text" name="lname" class="test" required>
<br>Contact Me By:
<select name="contactuser" form="carform" class="test"">
<option value="email">Email</option>
<option value="phone">Phone</option>
</select>
<br>Email: <input type="text" name="email" class="test" required>
<br>Phone: <input type="text" name="phone" class="test" required>
<br>Zip Code: <input type="text" name="zipcode" class="test" required>
<br>
<input type="submit">
CSS
.test {
position: absolute;
right: 0;
}
You need to apply a margin.
input{
margin: 5px;
}
CODEPEN DEMO
line-height seems to be the precise way if you don't want to mess with changing anything.
You can just call the form in the CSS and add the line-height there or give the form a class and do the same which will be better
form {
line-height: 30px;
}
This is what i tested with and it spaced things out:
Fiddle - https://jsfiddle.net/20LcL21k/1/
I would use
http://materializecss.com/forms.html
Or bootstrap, but material have such a nice way of doing forms
Here is my code:
Classroom name: <input type="text" name="txtClassroomName" size="20"><br>
School name: <input type="text" name="txtSchoolName" size="20"><br>
School contact email address: <input type="text" name="txtSchoolEmail" size="20"><br>
School address: <input type="text" name="txtSchoolAddress" size="20"><br>
School telephone number: <input type="text" name="txtTelephoneNumber" size="20"><br>
As you can probably guess, this code displays some text and then has some textboxes after this text.
My question is this: I am wanting to align all the texboxes so that they are aligned. I have added spaces after the text, yet the textboxes just appear straight after the text, ignoring the spaces that I entered. What is the best, most effective way to do this? Maybe a table?
thanks
Normally you'd use css to do this for you. in your css file add:
label{
display:inline-block;
width:200px;
margin-right:30px;
text-align:right;
}
input{
}
fieldset{
border:none;
width:500px;
margin:0px auto;
}
Then in the html you would set the labels up next to the textboxes:
<fieldset>
<label for="txtClassroomName">Classroom name:</label><input type="text" name="txtClassroomName" size="20">
<label for="txtSchoolName">School name:</label><input type="text" name="txtSchoolName" size="20">
<label for="txtSchoolEmail">School contact email address:</label><input type="text" name="txtSchoolEmail" size="20">
<label for="txtSchoolEmail">School address:</label><input type="text" name="txtSchoolAddress" size="20">
<label for="txtSchoolEmail">School telephone number:</label><input type="text" name="txtTelephoneNumber" size="20">
</fieldset>
in the css file, the margin-right:30px; line tells it how far apart to put the label and textbox
setting the fieldset width essentially creates a box round it all and you can set it's width if you need to make any labels bigger.
Hope that helps.
Martyn
<table>
<tr><td><label for="txtClassroomName">Classroom name:</label>
<td><input type="text" name="txtClassroomName" id="txtClassroomName" size="20">
<tr><td><label for="txtSchoolName">School name:</label>
<input type="text" name="txtSchoolName" id="txtSchoolName" size="20"><br>
...
</table>
A table is the only way to make the columns aligned so that the first column occupies just the width it needs (the width of the longest label). Any other approach forces you to make a guess on the width, and the results will inevitably vary, and the code will not be robust (the width needs to be adjusted whenever the length of the longest label changes).
In HTML, continuous SPACEs are taken as a single space only. So you need HTML Special Character for the SPACE, that is
Classroom name: <input type="text" name="txtClassroomName" size="20"><br>
But, this is the dirty way. This is not the standard way to do so. Also, this doesn't sure that the textboxes will align same until you use some mono-space fonts.
So, you should consider either <TABLE> tag or CSS.
You can also make all the textboxes to appear one below the other in the center of your screen. It will look uniform.
How do I correct the following E-mail textbox alignment: ?
To make it look like this:
I know I can use tables, but how do I solve this problem without using tables? CSS maybe?
HTML:
<form action="" name="contactform" method="post">
<p></p>
First name: <input type="text" class="contact" name="contactfirstname" value="">
<br/>
Last name: <input type="text" class="contact" name="contactlastname" value="">
<br/>
E-mail: <input type="text" class="contact" name="email" value="">
<p></p>
The most minimalized version I could think of...
<form>
<label>First Name: <input type="text" name="firstName"></label>
<label>Last Name: <input type="text" name="lastName"></label>
<label>Email Address: <input type="email" name="emailAddress"></label>
</form>
and
form {
width: 300px;
}
label {
display: block;
margin: 5px;
padding: 5px;
clear: both;
}
label input {
float: right;
}
Since OP has edited his question to include his markup, I'll expand the answer.
Some Points of Improvement:
Remove the empty <p> element, and the <br/> elements. They have no value inside a form.
Use <label>s, that's what they were made for. You can wrap the label and the input inside of the <label> tag, or you can use <label for="element_id">Label</label><input id="element_id">.
Be consistent. If you decided to go with the <br /> type of format for singular tags, stick with it to the <input />s as well.
Use correct input types for specific inputs, there is type="email" for the email field, which will optionally have the browser check for you if it's a valid email address or not!.
Use CSS for design and layout, not <p>s and <br>s.
Good luck!
I'm assuming your HTML is something like:
<p>
Email
<input />
</p>
Change this to:
<p>
<label>Email</label>
<input />
</p>
This means you can then apply a fixed width to all your labels, making them consistent:
label
{
width:100px;
float:left;
}
http://jsfiddle.net/zvWqk/1/
Or as #Zeta has pointed out, nest your input inside the label, and float right. This will prevent you needing to apply a for attribute to your label.
http://jsfiddle.net/tt8gx/
Use CSS to make the labels display as block elements and have a fixed width. Display the inputs as block elements and float them left. Put a clear:left on the labels so they'll each be on a new line.
I have a site that I'm creating, part in static HTML, the other part is served via Django. Since I want the look and feel to remain the same (who doesn't?) I have used CSS for the static site. That same CSS I have included (almost successfully) in the dynamic site.
When I create a form, I can get a very nice two column listing on the static side
Label Input
Label Input
Label Input
But, when I do the same code on the dynamic side, it's not so nice
Label Input
Label Input
Label Input
The CSS I'm using is:
form.login label.fixedwidth {
display: block;
width: 240px;
float: left;
}
\.
Sorry, here's my form:
<form action="" method="post" class="login">
<fieldset>
<div>
<label for="username" class="fixedwidth">User name:</label>
<input type="text" name="username" value="" id="username">
</div>
<div>
<label for="password" class="fixedwidth">Password:</label>
<input type="password" name="password" value="" id="password">
</div>
<input type="submit" value="login" />
</fieldset>
</form>
[edit]
So, I noticed that my two 'input type' lines didn't close the tag (no '/'). But, no difference.
[/edit]
Try
clear:both; overflow: auto
on the surrounding DIV.
By the way, a <ul> with <li> s may be semantically more fitting than <div>s here. Won't make a difference in the output though.
I'm still having a hard time not wanting to use Tables to do my Details View Layout in HTML. I want to run some samples by people and get some opinions.
What you would prefer to see in the html for a Details View? Which one has the least hurddles cross browser? Which is the most compliant? Which one looks better if a I have a static width label column that is right aligned?
By Details view i mean something similar to the following image.
Table
<table>
<tr>
<td><label /></td>
<td><input type="textbox" /></td>
</tr>
<tr>
<td><label /></td>
<td><input type="textbox" /></td>
</tr>
</table>
Fieldset
<fieldset>
<label /><input type="textbox" /><br />
<label /><input type="textbox" /><br />
</fieldset>
Divs
<div class="clearFix">
<div class="label"><label /></div>
<div class="control"><input type="textbox" /></div>
</div>
<div class="clearFix">
<div class="label"><label /></div>
<div class="control"><input type="textbox" /></div>
</div>
List
<ul>
<li><label /><input type="textbox" /></li>
<li><label /><input type="textbox" /></li>
</ul>
Those approaches aren't mutually exclusive, personally I'd mix them up a bit:
<fieldset>
<label for="name">XXX <input type="text" id="name"/></label>
<label for="email">XXX <input type="text" id="email"/></label>
</fieldset>
Although to get a right aligned label (something I'd personally avoid because it's harder to scan visually) you'll need to have an extra element around the text that isn't around the input, so I'd go for
<fieldset>
<div class="label_input"><label for="name">XXX</label><input type="text" id="name"/></div>
<div class="label_input"><label for="email">XXX</label><input type="text" id="email"/></div>
</fieldset>
Actually I take that back for simple textbox only inputs I find that the Fieldset option works well.
However, typically I will have multiple controls in a single "row", therefore I go with the div based layout, that way I can put inputs, validators and all into a single element.
I prefer the fieldset containing divs. The label divs are float:left; width:20em and the content divs just have a fixed left margin of 21em or 22em for example. But you have to remember to include a clear div for that to work:
<fieldset>
<div class="labels"><label for="name">Name</label></div>
<div class="data"><input ....</div>
<div style="clear:both"/>
// repeat for next fields
</fieldset>
CSS:
label{
float:left;
text-align:right;
width:115px;
margin-right:5px;
}
input{
margin-bottom:5px;
}
HTML:
<label for="username">UserName:</label><input type="text" id="username" /><br />
<label for="username">UserName:</label><input type="text" id="username" /><br />
Obviously you then can add a div or use the form around it to get a background-color for your whole form etc.
I find that forms are one of the hardest thing to deal with in css because if you're wanting tight control, there's often a lot of css to add that old school HTML would take care of for you. However, if you're willing to accept a uniform natural treatment, then the cleanest way to separate the content and presentation would be:
form { margin: 0; padding: 0; }
fieldset { whatever treatment you want }
#details div { margin: 5px 0; width: 100%; overflow: hidden; /* ensures that your floats are cleared */ }
#details label { float: left; width: 190px; text-align: right; }
#details input { margin-left: 200px; }
<form>
<fieldset id="details">
<div id="item1div">
<label for="item1">item1 label</label>
<input type="" id="item1" />
</div>
<div id="item1div">
<label for="item1">item1 label</label>
<input type="" id="item1" />
</div>
</fieldset>
</form>
You CAN use tables to format forms tabularly but use CSS to add styles to the forms. CSS purists will probably say that you shouldn't but the reality is that many browsers often render CSS forms differently and can cause accessibility issues. A table-based form is much more consistent across browsers and much more accessible as well.