ALL >> Web-Design >> View Article
Stylish And Accessible Web Site Forms In Css
The majority of sites designed these days have at least one form. If you are a web designer then you will know that creating a template is essential if you are to be efficient in your work.
Many times I have compromised on a forms design due to time restrictions. Below is a template that I use and that is quite flexible in its design. This form allows for any type of input field from a simple textfield to a group of radio buttons. If your quite comfortable with CSS then please feel free to adapt this code.
The fun you can have with this form can really change the way your forms look and make a great deal of difference to your overall web site design.
XHTML CODE
Below is a basic form structure.
I have used ordered lists [ol] to segment the form and [li] tags for each row of the form just as I find this easily breaks up the code for use by novice CSS users.
[form name="cssform" method="post" action="" class="cssform" ]
[fieldset]
[legend][img src="images/personal.gif" /][/legend]
[ol]
[li]
[label for="surname"][em]*[/em] Surname: ...
... [/label]
[input type="text" name="surname" class="newfield" size="35" /]
[/li]
[li]
[label for="forename"][em]*[/em] Forename: [/label]
[input type="text" name="forename" class="newfield" size="35" /]
[/li]
[li]
[label for="company"] Company: [/label]
[input type="text" name="company" class="newfield" size="35" /]
[/li]
[li]
[label for="pCode"][em]*[/em] Post Code: [/label]
[input type="text" name="pCode" class="newfield" size="10" /]
[/li]
[/fieldset]
[fieldset]
[legend][img src=" images/details.gif" /][/legend]
[ol]
[li]
[fieldset]
[legend]Gender [em]*[/em][/legend]
[label][input name="gender" type="radio" /]Male[/label][br /]
[label][input name="gender" type="radio" /] Female [/label]
[/fieldset]
[/li]
[li]
[fieldset]
[legend]Additional information[/legend]
[textarea name="info" cols="32" rows="5"][/textarea]
[/fieldset]
[/li]
[/ol]
[/fieldset]
[div align="center"]
[input type="submit" name="submit" class="submitbutton" value="SUBMIT INFO" /]
[/div]
[/form]
Additional Tags
If you look through the code you will see some tags which you may deem as unnecessary (i.e [br /] tags after the radio button). These are to enable a cross browser compatible layout. Within the CSS code you will notice at the beginning that all the margins and padding are set to zero.
Alternatively you could place the form in a div with zero margins and padding but it is entirely up to you.
CSS Code
* [
margin: 0;
padding: 0;
]
form.cssform [
width: 430px;
font-size: 0.8em;
line-height: 20px;
font-family: Tahoma, Verdana;
]
fieldset [
margin-bottom: 10px;
border: none;
]
label [
line-height: 1.8;
vertical-align: top;
float: left;
text-align: right;
margin-right: 1em;
width: 120px;
font-weight: bold;
]
fieldset ol, li [
margin: 0px;
padding: 5px;
list-style: none;
]
fieldset fieldset [
border: none;
margin: 3px 0 0;
]
fieldset fieldset legend [
padding: 0 0 5px;
color: #000000;
]
legend [
padding: 0 10px 0 10px;
font-weight: bold;
]
fieldset fieldset label [
font-weight: normal;
width: 170px;
margin-left: 123px;
text-align: left;
]
form em [
font-style: normal;
font-weight: bold;
color: #FF0000;
]
input.newfield [
background: url(../images/newfield.gif) repeat-x 0 100%;
border: none;
font-weight: bold;
]
textarea [
float: left;
background: none;
border: 1px solid #999999;
width: 100%;
font-weight: bold;
font-size: 1em;
]
.submitbutton [
width: 10em;
height: 1.6em;
font-weight: bold;
color: #FFFFFF;
background-color: #99ccff;
background-position: center;
]
Browser Compatibility
Currently this form has been tested and works in IE5.5, IE6.0 and IE7 and Firefox.
PLEASE NOTE: for article purposes some of the code tags have been change to a "[" or a "]" so these will need to be adapted for your own use back into the correct syntax
Add Comment
Web Design Articles
1. The Dark Side Of Ai In CybersecurityAuthor: Sparity
2. Mastering Asp Dot Net Core: 20 Key Features You Can’t Afford To Miss
Author: Sparity
3. Transform Your Digital Presence With Top Ui/ux Design And Mobile App Development In Hyderabad
Author: weblinksolutions
4. Best Mobile App Development In Hyderabad: Leading The Digital Transformation
Author: weblinksolutions
5. Discovering The Best Web Development Services For Your Next Project
Author: Mir Ali
6. Optimizing E-commerce Websites For Mobile Users: Key Considerations
Author: Lukas J.
7. How Important Is Website Design In The Real Estate Industry
Author: Aarna Systems
8. Best Website Design Features
Author: Rankfirms
9. Top 2024 Ui/ux Design Trends Every Designer Should Know
Author: Mohit Patil
10. Top 10 Website Designing Services Agency 2024 | Brs
Author: Brand Roof Solutions
11. Affordable Web Development Solutions For Small Businesses
Author: Michael Richards
12. Salesforce Staff Augmentation: Unlocking The Power Of Expertise
Author: Manoj Shrama
13. Why Web Developers Should Embrace Wireframing
Author: Obii Kriationz
14. Best It Company In Lucknow
Author: SigmaIT Software Designers Pvt. Ltd.
15. Elevate Your Online Presence With Professional Website Design Services In Ottawa
Author: Stephane Smith