Following is the code for a plain HTML form:
<form action=”#”>
<p><label for=”name”>Name</label> <input type=”text” id=”name” /></p>
<p><label for=”e-mail”>E-mail</label> <input type=”text” id=”e-mail”/></p>
<p class=”submit”><input type=”submit” value=”Submit” /></p>
</form>
It looks like this in your browser:
Pretty dead, huh? Why not bring some life to this old fashioned, simple html form with some cool CSS code?
Yes we can beautify the plain HTML forms with CSS to make them look more appealing. The new look HTML forms will certainly get your site to receive a few clicks, atleast on your forms(if not on the advertisements).
Step 1: Aligning the Form elements
The first step would be to align the form elements in a more nice & precise manner. You can easily notice from the above screenshot that the input boxes are not aligned identically due to the variation in the length of their labels. This is the default HTML rule, which does not care much about thing such as positioning the elements.
However, CSS has solution for the limitations of HTML. Firstly, We write the following CSS code to align the form elements:
label
{
width: 4em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}.submit input
{
margin-left: 5.5em;
}
In the initial step, we have assigned some CSS rules for the “label” & “input” elements respectively. Firstly we had to assign a fixed width for the label elements in order to prevent the input boxes from sliding ahead, in case the length of one label is greater than the other’s (such as E-mail > Name). The next step is to bring the submit button in alignment with the input boxes. This procedure requires to adjust the left margin of the submit button to 5.5 em so that it successfully covers up the length of label & the margin between the labels & input boxes. The code written above gives the following output so far:
Step 2: Applying colors to the CSS form
We will use three properties to add colors to our CSS form. The properties we will be using here are: color, background & border. However you can add other properties too such as font, text etc to further beautify the form. The CSS code for this step is as follows:
input
{
color: #663399;
background: #ffcc00;
border: 1px solid #781351
}.submit input
{
color: #000;
background: #669966;
border: 2px outset #d7b9c9
}
The CSS code written above gives the following output:
Step 3: So far we have been successful in changing the default html form layout & appearance with just a small piece of CSS code. We can further upgrade the look of this html form by positioning it within a fieldset. The fieldset appearance highlights the whole html form so that it can be located easily by human eye. It will also make your form appear more lively & user friendly. Believe me!
The fieldset code will be added at two places. One is the html code which we need to assign to the html form written above. The complete html code for the form tag alongwith the fieldset tag is written below once more:
<form action=”#”>
<fieldset>
<legend> Please Enter Your Details </legend>
<p><label for="name">Name</label> <input type="text" id="name" /></p>
<p><label for="e-mail">E-mail</label> <input type="text" id="e-mail"/></p>
<p class="submit"><input type="submit" value="Submit" /></p>
</fieldset>
</form>
Now let me assure you that we finally are done with the HTML stuff. The remaining part of this tutorial is the CSS code for the <fieldset> & <legend> tags. It is written below:
fieldset
{
border: 1px solid #330099;
width: 20em
}legend
{
color: #000;
background: #669966;
border: 1px solid #781351;
padding: 2px 6px
}
Here's the final output:
