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

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