CLEAN, TABLE-less (CSS) FORMS
I’ve been doing a lot of work on forms currently, hence the multiple form UI posts!
There are many ways in which you can use css to create table-less forms.
The implementation below is a very effective one, that uses <dd> tags, that are more commonly used now that the earlier days of HTML. This tag was standardized in HTML 2.0 and has been existing for a really long time.
To see an example of the usage of the dd tag, refer to http://www.w3schools.com/TAGS/tag_dd.asp
It essentially stands for “Description of items in a definition list”
Here’s what our form will look like after we’re done coding it.
I have tested this on IE6, FF, Safari and Chrome. I should ideally be testing it on IE7 as well, but unfortunately my computer that has IE7 installed has been attacked. Will update the post once I’ve tested it out on that too..
1. Here’s the CSS that needs to go either in a seperate stylesheet or in the head tag of your html file in the <style> tag
/*******************************************
GENERAL CSS FOR FONT SIZE / COLOR
*******************************************/
body, dl, div, p {color:#000; font-family:tahoma, arial; font-size:10pt;}
/*******************************************
FORM CSS – THESE ARE GENERAL DL / DD STYLES
*******************************************/
dl {float:left; position:relative; width:700px; padding:0px; margin:0px;}
dl div {float:left;}
dt {float:left; width:75px; padding:4px 0 2px 0; text-align:left;}
dd {float: left; width:205px; margin: 0 0 8px 0; padding: 0 0 0px 8px;}
dd p {padding:0px; margin:0px; height:10px;}
dt label {width:75px; float:left; text-align:right; display:block;}
input {width:205px;}
/*******************************************************************************************
FORM CSS – THESE ARE SPECIFIC TO CERTAIN FIELDS. IN THIS CASE, TO ACHIEVE THE STATE / ZIP ON
THE FORM. THIS WILL ALSO GIVE YOU A GENERAL IDEA OF HOW TO ADD FLEXIBILITY TO CHANGE
THESE AROUND FOR CERTAIN ELEMENTS ONLY.
*******************************************************************************************/
#Zip {width:118px;}
#Zip dt {float:left; width:44px; padding:4px 0px 2px 0;}
#Zip dd {float: right; width:70px; padding:0px; text-align:right;}
#Zip dt label {width:44px; float:left; text-align:right; display:block;}
#zipcode {width:63px;}
#State dt {float:left; width:75px; padding:4px 0 2px 0; text-align:left;}
#State dd {float:left; width:85px; padding:0 0 0px 8px;}
select {width:95px; height:20px;}
2. Here’s the markup that goes in the <body> of your file.
<dl>
<div id=”FirstName”>
<dt><label for=”firstname”>First Name</label></dt>
<dd>
<input type=”text” id=”firstname”>
<p><!–the backend error can be served here–></p>
</dd>
</div>
<div id=”Address”>
<dt><label for=”address”>Address</label></dt>
<dd>
<input type=”text” id=”address”>
<p><!–the backend error can be served here–></p>
</dd>
</div>
<div id=”LastName”>
<dt><label for=”lastname”>Last Name</label></dt>
<dd>
<input type=”text” id=”lastname”>
<p><!–the backend error can be served here–></p>
</dd>
</div>
<div id=”Address2″>
<dt><label for=”address2″>Address 2</label></dt>
<dd>
<input type=”text” id=”address2″>
<p><!–the backend error can be served here–></p>
</dd>
</div>
<div id=”Email”>
<dt><label for=”email”>Email</label></dt>
<dd>
<input type=”text” id=”email”>
<p><!–the backend error can be served here–></p>
</dd>
</div>
<div id=”City”>
<dt><label for=”city”>City</label></dt>
<dd>
<input type=”text” id=”city”>
<p><!–the backend error can be served here–></p>
</dd>
</div>
<div id=”Confirm”>
<dt><label for=”confirm”>Confirm</label></dt>
<dd>
<input type=”text” id=”confirm”>
<p><!–the backend error can be served here–></p>
</dd>
</div>
<div id=”State”>
<dt><label for=”state”>State</label></dt>
<dd>
<select id=”state”>
<option value=”">– State –</option>
</select>
<p><!–the backend error can be served here–></p>
</dd>
</div>
<div id=”Zip”>
<dt><label for=”zipcode”>Zip</label></dt>
<dd>
<input type=”text” id=”zipcode” class=”textInput”>
<p><!–the backend error can be served here–></p>
</dd>
</div>
</dl>
3. Here’s a very short explanation. The code itself should explain the rest!
-> All the dt / dd tags have been put in their own unique containers. This is done so that you have the flexibility to change the widths / heights of any of the element within that container. For e.g. I’ve applied different width’s / padding / floats to the zip and state fields.
I actually used the above markup to a form that was generated in a loop, giving a unique id to each div. It really helped me position around the elements the way I wanted to without changing the markup. A simple CSS file did the trick!
-> It is very useful to have <label> tags in a form. They help in many ways.
If you want to read more on label tags, see the browser support for it etc, you can refer to http://www.w3.org/TR/html401/interact/forms.html#h-17.9 and / or http://www.w3schools.com/tags/tag_label.asp
4. Download the html / css for this file here – http://www.pluthra.com/blogdata/final-form.html
My first painting in 15 years (maybe)
i used to paint long long ago. it was during my school days. thanks to mom & dad for involving us (my sis and i) in every activity possible.
my painting teacher saw some talent in me at the time and encouraged me to participate in painting competitions around – some of which i actually did end up winning. i used to work with water colors for the most part. did try my hand at oil and fabric painting too. time went by…i shifted focus, first to badminton, and then to…hmm…studies? friends? work? lazying?
after all these “lost” years, i tried my hand at water colors again. although somewhere in-between i did end up making some glass paintings. here’s my first piece of art in 15 years maybe. its done on the most basic paper, with the most basic paints.
i hope its just the beginning. i know have a long long way to go before i meet my own standards!
My “Sporty” Weekend
i would call it a green weekend, although the only thing green about it was the fact that i hit the driving range a couple of times. i can probably call it my first real connection with golf, although i have tried my hand at it earlier, thanks to vikram! now that i’ve mentioned vik, i just have to say that he’s one of the best teachers i’ve ever come across. he has the knowledge and the art of explaining it right – how you should stand, what angle / direction should your feet / club be at, what are the different kinds of clubs and what they are used for, how to swing your arms to ensure contact with the ball…and so many finer details of the game. i have to say that all his training made the game so much more interesting than i ever imagined.
so much that i actually came home and watched golf & the article on golf on my wall street journal app actually caught my attention.
for those who want to know which are the best golf courses in the us, see this – http://online.wsj.com/article/SB124000759131230357.html
per the latest numbers, augusta national has relpaced pine valley to bag the no.1 spot. not that i know too much about golf or the augusta national, but the little news that i’ve been reading, i know that women are not allowed to become members of this exclusive club – a lot of controversy surrounding this. oh well..
anyway, enough said about golf. the other interesting things that kept me busy were – bb, tennis, a little work and lots of sleep! would love to elaborate on these too, esp tennis since i just happened to notice this weekend that rafa co-ordinates his clothes with the court. it was a good final at monte carlo! hope to see some more good tennis.
now back to monday! back to work!
Make your forms look pretty with css
this is going to be my first post. and you’ll notice as i go along, my writing style is extremely informal. a lot of hyphens, no capitalization, lots of sentences ending with periods – well, that’s just me….
i’m going to start my first post with some tips on making input boxes and dropdowns look pretty.
at my current workplace, i was asked to work on making all our forms look nice and pretty. web 2.0′ish form elements – big, rounded…
so i started looking to see if i could find nice rounded input boxes and dropdowns that are created using css. i haven’t found a solution for dropdowns yet, but here are a couple that can be used for input boxes.
solution 1. this one does not work in IE, but works across all other browsers.
apply this css to your input box:
input {
border-width: 2px;
border-style: solid;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
font-size: 1.7em;
outline: none;
border-color:#cccccc;
width:250px;
font-family:Trebuchet MS, Georgia, arial;
}
your input box will end up looking like this -
solution 2: this is the other way you can apply the same effect, and this one will work across all browsers. this uses a background image instead.
input {
background:url(input-bg.gif);
width:455px;
height:40px;
border:0px;
font-size:16px;
background-repeat:no-repeat;
padding:2px 0px 0px 10px;
font-family:Trebuchet MS, Georgia, arial;
}
and here’s the bg image.
input css background
and finally, here’s a way to make your select boxes look pretty and web 2.0′ish using css.
select {
border: 2px solid #cccccc;
padding:6px;
font-family:Trebuchet MS, Georgia, arial;
}
your select box will look like this -
Hello world!
Welcome to WordPress.com. This is your first post. Edit or delete it and start blogging!
