Forms are an integral part of Internet but they can look uninteresting without the proper usage of CSS. With CSS, you can use position the forms perfectly as well as add a splash of color to jazz them up.

To make a form perfectly, firstly, we need to line it up nicely. Here are some of CSS codes to make the forms look perfect.

label {
    width: 4em;
    float: left;
    text-align: right;
    margin-right: 0.5em
    display: block
}

.submit input {
    margin-left: 4.5em;
}

Here we have used a label with fixed width of 4em and not px, because it will help the users to enhance the width with larger letters. A 0.5em margin on the right side CSS command means the labels will have a small amount of spacing after them, so that the text is not up against the input box.

The Submit button also has a left margin of 4.5em so that it gets align with the input boxes, which are 5em from the left side.

Formatting a whole form

To give a set of own title and border, we add <fieldset> and <legend> commands to HTML code:

<form action="#" method="post"$gt;
    <fieldset$gt;
        <legend$gt;This is my form</legend$gt;
        <p$gt;<label for= "name"$gt;Name</label$gt; <input type= "text" id="name" /$gt;</p$gt;
        <p$gt;<label for= "e-mail"$gt;Email</label$gt; <input type= "text" id= "e-mail" /$gt;<br /$gt;</p$gt;
        <p class="submit"$gt;<input type="submit" value="Submit" /$gt;</p$gt;
    </ fieldset$gt;
</ form$gt;

In order to impart a blue border and title with orange background, you need to apply some more CSS commands to the fieldset and legend:

fieldset {
    border: 1px solid #781351;
    width: 20em
}

legend {
    color: #fff;
    background: #ffa20c;
    border: 1px solid #781351
    padding: 2px 6px
}

Applying colors to forms

Now we will use a set of three CSS commands to make the forms look good along with a host of borders, backgrounds and colors.

Your requirements are as follows:

1. Input boxes must have a dark blue text color and border and pale orange colored background.
2. Submit button should have black text, an orange background and a dark blue border.

To get this set-up, you need to have the following CSS commands:

input {
    color: #781351;
    background: #fee3ad;
    border: 1px solid #781351
}

.submit input {
    color: #000;
    background: #ffa20f;
    border: 2px outset #d7b9c9
}

We use ‘outset’ for button’s border so that it looks like a button. If we had used ‘solid’, it would look more flat.