Click here to Skip to main content
Click here to Skip to main content

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

, 10 Mar 2010
Rate this:
Please Sign up or sign in to vote.
Using CSS3 selectors to design optimized HTML form

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
<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">;
	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></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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.

License

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

Share

About the Author

kiran dangar
Software Developer (Senior) Gateway Technolabs Pvt. Ltd
India India
Having 4+ years of Technical Experience in asp.net,c#.net, SQL Server 2008,AJAX, XML,JQuery, JavaScript, .net framework, WCF, WPF/Silverlight,SSIS, SSRS, asp.net MVC.
 
While not working loves Photography and bike riding. Playing computer games are the best stress buster for him Smile | :)
Follow on   Twitter

Comments and Discussions

 
QuestionNice one PingroupJQuery Geeks21-Oct-11 18:58 
AnswerRe: Nice one Pinmemberkiran dangar21-Oct-11 18:58 
AnswerRe: Nice one Pinmemberkiran dangar21-Oct-11 18:58 
GeneralForm submit to server PinmemberAjay Kale New18-Oct-10 20:44 
GeneralRe: Form submit to server Pinmemberkiran dangar3-Oct-11 3:07 
GeneralExcellent, but a question... PinmemberKingpinguino16-Mar-10 2:22 
AnswerRe: Excellent, but a question... Pinmemberkiran dangar16-Mar-10 2:32 
GeneralRe: Excellent, but a question... PinmemberKingpinguino16-Mar-10 3:30 
GeneralRe: Excellent, but a question... Pinmemberkiran dangar3-Oct-11 3:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140821.2 | Last Updated 10 Mar 2010
Article Copyright 2010 by kiran dangar
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid