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 to 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 below screen, we will be dividing form into 4 pieces,
- Header part (<th> )
- Left side labels (<td>)
- Right side textbox area (<td> & <input type=”text” /> )
- Bottom Buttons ( <input type=”submit”/> )
Generating Simple HTML form:
As shown in below HTML, 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, our all focus will be now on CSS to make it look like as shown in above screen shot,
In HTML there is only 1 CSS class assigned to TABLE which is tblform.
Further will be doing all stuffs in the CSS as given below,
CSS file code
.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.
NOTE :
If you are in need of any Web Development feel free to Inquire us . Dhanashree Inc. Expertise in Asp.net Development, Php Development, Website designing, Open Source customisation. Dhanashree Inc can be our offshore development company / outsourcing web development company, hire dedicated web programmers.
Above information is for knowledge sharing if you have problem / issue / suggestion please intimate us with details for proper and prompt action.
