HTML5 and CSS3 Fundamentals – Form Styles

How to Design HTML Forms with CSS

So far, we’ve discussed how we can create forms in HTML using the <FORM> element along with its attributes and how to use them. We’ve also looked at different form elements such as text fields and text area; multiple choice input menus such as radio and checkboxes, drop down list menus and form button such as submit and reset buttons.

It’s now time to wrap up this discussion by focusing on how to layout the form. When designing a form, it’s essential that the layout of your form is enhanced. This is because bad form layouts have the tendency to confound your visitors therefore driving them away from your website.

It’s a fact that shouldn’t be belabored a lot when designing HTML forms. So, in this class, we’ll explore how you can augment your website by focusing on CSS styles. The main aim of using CSS to style up your forms to separate the content—what the forms will capture—and the layout.

This provides you with the flexibility and the control you need when creating the HTML forms. Having said that, let’s dive in and learn how you can create layouts for your HTML forms.

Grouping different fields using the <FIELDSET> Element

In our last discussion, we saw how you can create a form together with different form elements such as text fields and text area; multiple choice input menus such as radio and checkboxes, drop down list menus and form button such as submit and reset buttons.

However, when you view the output of your work in a web browser, we realized that the different fields were disorganized. Well, that should no longer be the case with the <FIELDSET> tag. This tag has been included to help you group the related form elements together.

For instance, the HTML code below shows how you can use this tag:



<FORM>


<FIELDSET>


<LEGEND>Personal Information</LEGEND>


Full Name: <input type="text">

Email Address: <input type="text">

Date of Birth: <input type="text">

</FIELDSET>


</FORM>


In the above example, the <LEGEND> tag has been used to provide the caption (Personal Information) for our <FIELDSET> element.

How about using CSS with the <FIELDSET> tag?

Let’s dig deeper and elaborate more about this tag. The purpose of this tag to help you group related elements such as personal information (As illustrated in the above example). On a more positive note, we can provide different formatting features for each group of items that have been defined by the <FIELDSET> tag.

For instance, we can now define how we would like the grouped HTML elements to be appearing by using the following code in CSS.


FIELDSET {

display: block;

margin-left: 2px;

margin-right: 3px;

padding-top: 0.45em;

padding-bottom: 0.65em;

padding-left: 0.43em;

padding-right: 0.75em;

border: 2px groove (internal value);

}

The display property “block” helps the grouped elements to be displayed as a block. The margin property helps us to set the left, top, right and bottom of the block. The padding property helps us to set the top, bottom, left and right padding space for our blocks.

Other CSS styles for the different form elements

So far, we’ve looked at how the <FIELDSET> property can help us to format our grouped items. However, how can we make the individual form elements look better? This is the trickiest part when creating form layouts.

For us to format the individual form elements, we must specify the <LABEL> tag for each form element that we would like to format. The <LABEL> tag is used to define the label for the <INPUT> element, such as a text field or a text area. It has the following attributes:

  • Id. The <LABEL>’s “id” property is used to define an identifier for the associated element of the label.
  • Class. The <LABEL>’s “class” property is used to define the class for the associated element of the label.

Having said that, let’s see how we can create a form that uses not only the <FIELDSET> property, for grouping related form elements, but also the <LABEL> tag to help in formatting of individual form elements.

We can now specify our form as follows:



<FORM>


<FIELDSET>


<LEGEND>Personal Information</LEGEND>



<P>

<LABEL class=”field”>Full Name :< /LABEL> <input type="text">

<LABEL class=”field”>Email Address :< /LABEL> <input type="text">

<LABEL class=”field”>Date of Birth: </LABEL><input type="text">

</P>


</FIELDSET>


</FORM>


Now, having defined the label for each form element (In the above example, we’ve defined labels for “Full Name”, “Email Address” and “Date of Birth”), let’s go ahead and define the layout formats for these form elements.

Here’s is how we will define the CSS for our created labels:


FIELDSET

{

display: block;

width: 450px;

padding-bottom: 0.65em;

padding-left: 0.43em;

}

LEGEND

{

Font-size:18px;

}

Label.field

{

Text-align: right;

Width:80px;

Float:left;

Font-weight: bold;

}

Applying the above CSS features distinguishes your forms by making them usable—a feature that will drive visitors to your website. This marks the end of form styles. Hope you’ve enjoyed the class. Well, it’s up to you to continue practicing.

GET YOUR FREE HTML5 & CSS3 EBOOK!

(Visited 192 times, 1 visits today)