Home arrow HTML arrow Styling HTML Forms with CSS
HTML

Styling HTML Forms with CSS


This web design tutorial will focus on teaching you how to style your HTML forms and form elements with CSS (cascading style sheets).

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 24
July 08, 2011
TABLE OF CONTENTS:
  1. · Styling HTML Forms with CSS
  2. · Adding CSS to an HTML Form

print this article
SEARCH DEVARTICLES

Styling HTML Forms with CSS
(Page 1 of 2 )

It seems that HTML forms are part of the elite set of elements that have received an equal amount of blessings and curses over time. Being the proverbial "highway of user input", they are a crucial facet of web design, and have been since their inception, dating back to when people used to think the phrase ďworld wide webĒ had something to do with the famous Marvel character Peter Parker (aka, Spidererman).

Although itís pretty hard to conceive the web without forms, the truth is that they are twisted and hard-to-tame creatures, especially when it comes to making them look good and pleasing to the eye. In many cases, the styling process requires not only to deal at CSS level with the typical browser incompatibilities that youíll surely be familiar with, but implementing some tricky JavaScript solutions as well, particularly when using the rebel selects.

Nevertheless, not all is disheartening when it comes to polishing the visual presentation of form elements, as in most situations a clever use of CSS can yield pretty satisfactory and professional results. Add to this the fact that you can keep the formsí markup solid and semantic, and youíll have an approach that properly combines simplicity, efficiency and pragmatism. In summary, you get the best of both worlds.

Provided that this topic has caught your attention, in this tutorial Iíll be showing you (in a step-by-step fashion), how to use the functionality of CSS to provide your web forms with an appealing appearance that will keep your visitors engaged and coming back for more.

Getting started: building a sample contact form

The first step that must be taken to start showing how to give an HTML form an engaging look is to create the form itself. To keep the whole styling process understandable and easy to follow, in this particular case Iím going to build a typical contact form, which allows users to submit their inquiries and questions, along with an email address where they can be reached back.

Having explained that, hereís the web page containing this sample contact form. Take a close look at it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Styling an HTML form with CSS</title>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Styling an HTML form with CSS</h1>
        <h2>Header section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div id="content">
        <h2>Contact form</h2>
        <form action="processform.php" method="post">
            <fieldset>
                <ol>
                    <li>
                        <label for="subject">subject: <em>[required]</em></label>
                        <input type="text" name="subject" id="subject" class="text" />
                    </li>
                    <li>
                        <label for="email">email: <em>[required]</em></label>
                        <input type="email" name="email" id="email" class="text" />
                    </li>
                    <li>
                        <label for="comments">comments:</label>
                        <textarea rows="10" cols="20" name="comments" id="comments"></textarea>
                    </li>
                    <li>
                        <input type="submit" name="send" value="Send" class="submit" />
                    </li>
                </ol>
            </fieldset>
        <div id="errors"></div>
        </form>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
</div>
</body>
</html>

The structure of the above contact form is rather simplistic, as itís made up of a couple of text boxes, a simple text area and nothing else. Quite possibly, the most interesting aspect of this example is that the form has been wrapped inside an ordered list, which increases its accessibility, especially when visualized with no styles, or when using a screen reader. In addition, you should notice the use of the <fieldset> and <label> tags, which permit you to set a stronger semantic connection between the formís fields and the data that will be entered in them.

So far, so good. At this point, the contact form rests on pretty thorough markup, which is a good start. Unfortunately, its appearance is still somewhat primitive and unpolished, so itís time to fix this issue and make it look a bit more eye-catching with CSS.


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials