Utilizing CSS3 features: Creating Interactive and Optimized HTML form Using CSS3 Selectors

CSS3 Introduction

CSS3 gives a great flexibility to designers to create optimized HTML by utilizing CSS3 features.

CSS3 selectors gives rich amount of DOM element filtering, which will let designers minimize inline attributes and inline styles in HTML code.

Here I am giving an overview of how to utilize CSS3 to develop an HTML form as shown below:

We will try to optimize HTML as much as possible by giving all styles and attributes through CSS3 in CSS file itself.

Form Concept

As shown in the below screen, we will be dividing the form into 4 pieces:

1. Header part (<th>)
2. Left side labels (<td>)
3. Right side textbox area (<td> & <input type=”text” />)
4. Bottom Buttons (<input type=”submit”/>)

Generating Simple HTML Form

As shown in the HTML below, we will not give any attributes to TABLE or TD.

Just a simple Table with only one class which is assigned to TABLE, like class=”tblform”. Very neat HTML without any kind of attributes assigned.

HTML File Code

    <table class="tblform">
        <tr>
            <th colspan="2">
                Please enter your details below.
            </th>
        </tr>
        <tr>
            <td>
                Name
            </td>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                Email
            </td>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                Mobile
            </td>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <input type="submit" value="Submit" />
                <input type="submit" value="Cancel" />
            </td>
        </tr>
    </table>

Developing CSS File

Once we got the above HTML ready, all our focus will now be on CSS to make it look as shown in the above screen shot.

In HTML, there is only 1 CSS class assigned to TABLE which is tblform.

Further we will be doing all stuff in the CSS as given below.

CSS File Code

body
{
	font-family<span class="code-none">: Calibri<span class="code-none">;
	font-size<span class="code-none">: 11pt<span class="code-none">;
	margin<span class="code-none">: 200px<span class="code-none">;
<span class="code-none">}
.tblform
<span class="code-none">{
	border-collapse<span class="code-none">: collapse<span class="code-none">;
	width<span class="code-none">: 100%<span class="code-none">;
	font-family<span class="code-none">: Calibri<span class="code-none">;
	font-size<span class="code-none">: 11pt<span class="code-none">;
<span class="code-none">}
.tblform td
<span class="code-none">{
	padding<span class="code-none">: 5px<span class="code-none">;
	border<span class="code-none">: solid 1px #E1E1E1<span class="code-none">;
<span class="code-none">}
.tblform th
<span class="code-none">{
	padding<span class="code-none">: 5px<span class="code-none">;
	border<span class="code-none">: solid 1px #E1E1E1<span class="code-none">;
	font-weight<span class="code-none">: normal<span class="code-none">;
	text-align<span class="code-none">: left<span class="code-none">;
	background-color<span class="code-none">: #E1E1E1<span class="code-none">;
	font-weight<span class="code-none">: bold<span class="code-none">;
<span class="code-none">}
.tblform td input[type=text]
<span class="code-none">{
	border<span class="code-none">: 1px solid #CCCCCC<span class="code-none">;
	width<span class="code-none">: 180px<span class="code-none">;
	height<span class="code-none">: 20px<span class="code-none">;
	padding-left<span class="code-none">: 5px<span class="code-none">;
<span class="code-none">}
.tblform td:first-child
<span class="code-none">{
	padding<span class="code-none">: 5px<span class="code-none">;
	border<span class="code-none">: solid 1px #E1E1E1<span class="code-none">;
	background-color<span class="code-none">: #F2F2F2<span class="code-none">;
<span class="code-none">}
.tblform td input[type=submit], .tblform td input[type=submit]:hover
<span class="code-none">{
	background-image<span class="code-none">: url(button-bg.gif)<span class="code-none">;
	background-repeat<span class="code-none">: repeat-x<span class="code-none">;
	line-height<span class="code-none">: 22px<span class="code-none">;
	height<span class="code-none">: 25px<span class="code-none">;
	font-family<span class="code-none">: Verdana, Arial, Helvetica, sans-serif<span class="code-none">;
	font-weight<span class="code-none">: bold<span class="code-none">;
	font-size<span class="code-none">: 11px<span class="code-none">;
	color<span class="code-none">: #333333<span class="code-none">;
	padding<span class="code-none">: 0px 10px 0px 10px<span class="code-none">;
	border<span class="code-none">: 1px solid #999999<span class="code-none">;
	cursor<span class="code-none">: pointer !important<span class="code-none">;
<span class="code-none">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></

That’s it, it will result in a nice form with all CSS applied and HTML will remain neat as it is.
CodeProject

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)