Building and styling forms

Introduction
Hello, this is a tutorial on how to style a form using
Cascading Style Sheets (CSS).

This tutorial will attempt to make a form look attractive and
become more user-friendly with some styling techniques.

This tutorial uses HTML5 to build the form and assumes
that you have a basic undersanding of HTML (how to use
the <header>, <title> and <body> tags, basic knowledge of
form controls etc).

The tutorial is split into two parts: Part I – Building it
and Part II – Styling it.

Step 1

The first step to creating a HTML5 document is to make a Document Type Definition
(DTD). This goes at the top of the page.
• Type <!DOCTYPE html> at the top of the page

Step 2

• After entering the DTD, you can add elements such as <head>, <title> and
<body> to build your page. Remeber to save it as a html file (eg; mysite.html).

• Indenting after main elements is good practice as it makes the code easier to read.

The Form
A form is extremely important as it allows a business operator to collect essential
information such as client information, contact details and product order details.
Therefore, it is extrememly important that a form is easy to use.

It is also good practice to make elements in your website (such as a form) usasble
as outlined by the Web Content Accessibility Guidelines (WCAG) 2.0.

Principles of WCAG 2.0 that our form will meet:
• Principle 1: perceivable – use of colours to distinguish content from the
background
• Principle 2: operable – the form controls can be used with keyboard keys
• Principle 3: understandable – form questions are descriptive and written in
simple language
• Principle 4: robust – the form content can be interpreted by a variety of
browsers and electronic readers

1
What we want
to achieve
4
1. Title to let the user
know what the form is 3
for
2. Fieldset to group the
questions and break the
form into smaller
sections
3. Legend to give the
fieldset a meaningful
name 2
4. Descriptive labels so
that screen readers can
give useful information
to the visually impaired
5. Elements are aligned to
make the form neat and
easy to read

Step 1
adding a title

• The title is placed in a
header tag, written
as <h1>
• In the <body> of the
document, type title of
the form between a
<h1> tag. You must
close the tag
with </h1>.

Step 2 creating a fieldset and legend

• Below the form title, type in <fieldset>. This will create a group for the options on
the form. Close it off with </fieldset>.
• Beneath the <filedset> tag, type <legend> and add the title you wish to assign for
the first group of options. Close it off with </legend>.

Step 3 text boxes

We’re going to add the first five text fields in the form.
• Beneath <fieldset>, type <p><label for="first_name">First
name</label><input type="text" id="first_name" /></p>
• Do this for the next four text fields: “Surname”, “Alias”, “Email” and “Age”.

We’ll break the syntax down in the next slide.

• <p></p> the form control and label is put in a paragraph tag so that each one
appears on a separate line, and it allows us to style it more flexibly later on.

• <label for="first_name">First name</label> gives the label “First name” the
name “first_name”.
Label names should be meaningful so that electronic screen readers can give
useful information to the visually impaired. Labels should also be placed to the left
or above a form element so that screen readers will recognise it as prompt text.

• <input type=“text” id=“first_name”/> specifies that the form control is a text box
and gives the text box the name (id) “first_name”.

Step 4 radio buttons

Now we’ll add the two radio buttons.
• Underneath the code of the last textbox, type <p><input type="radio"
name="gender" value="female" /><label
for="female">Female</label></p>
• Do this for the next radio button: “Male”.


• <input type="radio" name="gender" value="female" /> specifies that the form
control is a radio button and gives the radio button the name “gender”. The “value”
records “female” when the user selects it and enters it into a database on the
server that hosts the form (the way a form works is beyond the scope of this
tutorial).

• <label for="female">Female</label> gives the label “Female” the name “female”.
In this case, the label is placed after the <input> tag because we want the label to
appear on the right hand side of the radio button.

Step 5 drop down menu

Next, we’re going to add
the drop down menu that
lists all of the countries.

• Under the last radio button, enter a description for the drop down menu in a <p>
tag.
• Below the description type <select name="country"
id="country_of_residence">
• Then type <optgroup label="Africa"> underneath
• Then enter the first option in the list by typing <option>Algeria</option>
underneath
• Make as many <option> tags for as many countries as you can think of in Africa


• <select name="country" id="country_of_residence"> The <select> tag defines
a drop down menu. In this <select> tag, we are giving the drop down menu the
name “country”. In this case, id is also giving the drop down menu the name
“country_of_residence”. Some browsers don’t support name or id, so it can help to
have both.

• <optgroup label="Africa"> This creates a group within the list of options called
“Africa”.

• <option>Algeria</option> This enters the option “Algeria” into the drop down list.

Now that you have a better understanding of the <select> and <optgroup> tags, add
as many country regions and countries as you can to the list.

Don’t forget to close the tags with </optgroup> and </select> at the end of each
group of options and at the end of the drop down menu, respectively.

Halfway point
You have now completed the first fieldset (group of form questions) in your form. The
form and drop down menu should currently look like this.

If it doesn’t, check that you have the closing tags </body> and </html> at the bottom,
respectively.

Step 6 the second fieldset

Now we will add the second fieldset in the form, “Additional information”, where the
user will use checkboxes to indicate their interests.
• Below the previous fieldset, type in <fieldset>. This will create a group for the
options on the form. Close it off with </fieldset>.
• Beneath the <filedset> tag, type <legend> and type “Additional information” to
give a title to the second fieldset. Close it off with </legend>.

Step 7 checkboxes

• Type a description for what you want the user to do with the checkboxes in a <p>
tag
• Underneath the description, type <p><input type="checkbox" name="interests"
value="design" /><label for="design">Design</label></p>
• Do this for the next seven checkboxes:
“Crafts”, “Music”, “Theatre”, “Dance”, “Sculpture”, “Literature” and “Poetry”

We’ll break the syntax down in the next slide

• <input type="checkbox" name="interests" value="design" /> specifies that the
form control is a checkbox and gives the checkbox the name “interests”. The
“value” records “design” when the user selects it and enters it into a database on
the server that hosts the form (the way a form works is beyond the scope of this
tutorial).

• <label for="design">Design</label> gives the label “Design” the name “design”.
In this case, the label is placed after the <input> tag because we want the label to
appear on the right hand side of the checkbox.

I’ve added some breaks <br /> to space out the elements and make it easier to read. Feel
free to remove them if you think they are unnecessary.

People’s interests can vary widely, so it can be a good idea to add a field for “other”

That’s the end of the second fieldset! Make sure you’ve closed off with </fieldset>

Step 8 submit!

To finish off the form, we need a submit button.
• Below the last fieldset, add a thankyou message using the <p> tag.
• Underneath the message type <input type="submit" value="Submit"/>
• Finish off your HTML document by closing the body with </body> and closing the
html with </html>

We’ll break down the syntax in the next slide

• <input type="submit" value="Submit"/> specifies that the form control is a
submit button and gives the submit button the name “submit”. The “value” records
“Submit” when the user selects it and enters it into a database on the server that
hosts the form (the way a form works is beyond the scope of this tutorial).

The road so far...
Now, your form should
look something like
this

Step 1 making the style sheet

Let’s make this form better to look at and to use. Well apply colours and alignment to the
form controls using Cascading Style Sheets (CSS).

• Create a new file in your text editor and save it as a css file (eg; page_styles.css)
• Go back to your html file. Beneath the <title> and <header> tags, type
<link rel="stylesheet" type="text/css" href="page_styles.css" />. This links the
style sheet to the html document and enables the html to call the styles written in
the css file.

We’ll break the syntax down further in the next slide.

• <link rel="stylesheet" tells the html document that the relation of the link to the
document is a stylesheet.

• type="text/css“ tells the html document that the type of the stylesheet is text/css
(currently the only option available).

• href="page_styles.css" /> tells the html document what the file name of the
stylesheet is.

Step 2 the body
• We’ll start by styling the main content of the page – the text and objects in the
body. At the top of the style sheet, type the following:

body This defines a style for the tag <body>.
{ It is telling the html document that everything in the <body> tag
is to be displayed with
font-family: Helvetica, sans-
serif; • The font Helvetica, from a sans-serif font library
• the minimum width of the body is 760 pixels – this makes
min-width: 760px;
the content fit into the page container, which we’ll talk about
font-size: small; later.
text-align: justify; • Use a small font size
color: #330000; • Justify the text
background-color: #FFFFCC; • Set the text colour to #330000 - a dark brown
} • Set the background colour to #FFFFCC – soft yellow

The font choice makes the words easier to read and the background colour makes
the page softer on the eyes. The brown for the text is purely a stylistic choice. These
styles conform to the first principle of the WCAG2.0 guidelines – making a page
perceivable by distingushing the content from the background.

Your page should now look like this:

Step 3 the form - h1

• We should make the heading of the form stand out more so that it’s easily
differentiated from the rest of the content. Type the following beneath the body
style:

h1 This defines a style for the tag <h1>.
{ It is telling the html document that everything in the <h1>
tag is to be displayed with
font-family: Georgia, serif;
• The font Georgia, from a serif font library
font-size: x-large;
• Use an extra-large font size
color: #8C6239;
• Set the text colour to #8C6239 - a light brown
}

Your form should now look like this:

Step 4 the form - colouring the fieldset
• Colouring the fieldset will make them stand out in the form and make it easier for
the user to differentiate between sections in the form. Type the following beneath
the ol style:

fieldset This defines a style for the tag <fieldset>.
{ It is telling the html document that everything in the
<fieldset> tag is to be displayed with
width: 500px;
• A width of 500px. Long scrolling horizontal text is
padding: 20px; difficult to read a form that borders to the edge of the
background-color: #CEBBA5; page looks unattractive
border: 0px; • Padding of 20px to add space between the edge of the
} fieldset and the form content
• Set the text background-colour to #CEBBA5 - a
medium brown to contrast it with the background
• We don’t want the fieldset to have a border as
background colour is enough to make it stand out

Colouring the fieldset also conforms to the first principle of the WCAG2.0 guidelines
by contrasting the form with the other elements on the page and making it more
perceivable.

Step 5 the form - colouring the legend
• Now we’ll make the legend stand out to improve the form’s legability. Type the
following beneath the fieldset style:

legend This defines a style for the tag <legend>.
font-family: Helvetica, sans- <legend> tag is to be displayed with
serif; • The font Helvetica from a sans-serif font library
font-size: small; • Use a small font size
font-weight: bold; • Make the font bold
padding: 5px 10px; • Add 5px padding to the top and bottom and 10px
color: #990000; padding to the left and right side of the legend to allow
background-color: #CEBBA5 some space between the legend and form controls
} • Set the text colour to #990000 – a dark red
• Set the background-colour to #CEBBA5 – the same
brown that we used for the fieldset

Step 6 the form – floating the labels
• The labels and text fields look very unorganised at the moment so we will tidy them
up by aligning them using the float technique. Setting something to “float” means
that it will be pushed as far to the left or right as possible. Type the following below
the
legend style:
label This defines a style for the tag <label>.
width: 50px; <label> tag is to be displayed with
margin-right: 10px; • The maximum width of the label as 50px. Eventhough
text-align: right; the labels differ in character length, this would ensure
that they all line up at the same point. It would have to
float: left;
be longer if there are labels with more characters.
}
• The margin to the right of the label is 10px, to give a
little space between the label and the input field
• Align the text to the right so that it comes up straight
against the input field
• Float to the left – ie, push everything in the label as far
to the left as possible

Because we have specified margins for the label, the
“float” aligns everything neatly as they’re pushed next to
each other.

Step 7 the form – creating a class to align the
radio buttons and check boxes
• When there are many options listed in the form of radio buttons and checkboxes, it
can make the form look very long and daunting. We’re going to float them
horizontally to make it look more user friendly and attractive. Type the following
below the
label style:
#radio_label This is creating a class called radio_label. Define a class with the “#”
symbol. Classes give you more freedom with styling as you can add
{ extra styles within the standard html tags like <body> or <label>.
width: 70px; It is telling the html document that whatever is assigned the class
margin-left: 5px; radio_label is to be displayed with
text-align: left; • A width of 70px. Again, this is to set a maximum width for the
float: left; radio_label so that they can all line up at the same point
} • The margin to the left of the radio_label is 5px, to add some space
between it and the form control
#check_label • We want the labels to appear on the right side of the form control, so
we’re goign to align the text to the left so that it comes up straight
{
against the form control
width: 70px;
• Float to the left – ie, push everything in the label as far to the left as
margin-left: 5px; possible
text-align: left;
float: left; Because we have specified margins for the label, the “float” aligns
} everything neatly as they’re pushed next to each other.

We also have to create a class that tells the radio buttons and checkboxes to float left.
Type the following below the #radio_label and #check_label classes:

#float_left We want the radio buttons and checkboxes to appear before the labels,
{ so we specify that the radio buttons and check boxes should float to the
float: left; left
}

Classes are assigned to the id of a control. For the radio buttons:
• Go to your html document
• In the <label> tag for each of the radio buttons, type the following before the closing
bracket: id="radio_label“
• Do the same for the <label> tag for each of the checkboxes but type
id=“check_label” instead

Now we will assign the float_left class to the <input> tags for each of the radio
buttons and check boxes
• Go to your html document
• In the <input> tag for each of the radio buttons and checkboxes, type the
following before the closing bracket: id=“float_left“

Your form radio buttons and checkboxes should now look like this:

The road so far...
At the moment, your webpage is looking like this:

Although the form has improved greatly, the body text at the top looks awkward and
the page doesn’t look very exciting. Let’s add some graphics and align the page.

Step 8 adding graphics with css
We are going to add a graphic for the header of the page and a graphic to divide the
paragraph of text and the form into different sections. As these graphics are for
decorative purposes only, we’ll add them using css. I’ll be using some graphics I’ve
made beforehand.

Back in the css file, define another class for the header image by typing the following
below the #float_left class:
#mushroom_banner This is creating a class called mushroom_banner.
{ Define a class with the “#” symbol.
background-image: It is telling the html document that whatever is
url(images/banner.png); assigned the class mushroom_banner is to be
background-repeat: no-repeat; displayed
background-position: center; • Using a background image retreived from a
folder called images with a file called
height: 178px; banner.png. The images folder must be in the
} same location as the html file for it to work
• Not to repeat the background image as we only
want to display one instance of it
• Position it in the center of the background
• Has a height of 178px as that is the height of the
graphic

We’re going to define another class for an image that will act as a page divider. Typing
the following below the #mushroom_banner class:

#mushroom_divider This is creating a class called
{ mushroom_divider. Define a class with
background-image: the “#” symbol.
url(images/mushroom_divider.png); It is telling the html document that
background-repeat: no-repeat; whatever is assigned the class
mushroom_divider is to be displayed
background-position: center;
• Using a background image retreived
height: 71px; from a folder called images with a file
} called mushroom_divider.png. The
images folder must be in the same
location as the html file for it to work
• Not to repeat the background image
as we only want to display one
instance of it
• Position it in the center of the
background
• Has a height of 71px as that is the
height of the graphic

We’re going to use <div> tags to insert these images. We will be assigning the
#mushroom_banner and #mushroom_divider classes that we just created to the id
of the <div> tag.
• Go to your html file
• Above the <body> tag and below the closing </head> tag, type
<div id="mushroom_banner"></div>
we don’t need to add anything in this div section so it is left blank

• Below the last <input> tag and above the closing </body> type
<div id="mushroom_divider"></div>
we don’t need to add anything in this div section so it is left blank

We’ll also add a divider between the paragraph of text and form to make the
page easier to read. Below the paragraph and above the heading of the form,
type
<div id="mushroom_divider"></div>

Your page should now look like this

The text that scrolls the full width of the page is pretty hard to read, if not awkward to
look at. We’ll fix that in the next step.

Step 9 aligning the page with a container
We’re going to make a “container” for the page so that the contents will remain the
same size and always be centered on the page, no matter how big the screen is. We
do this by defining a #container class. Type the following below the previous class:

#container This is creating a class called container.
{ It is telling the html document that whatever is assigned the
width: 760px; class container is to be displayed
margin: 0 auto; • In a width of 760 pixels. This is so that the content will
} still fit on a 800x640 screen.
• Set the margins to 0 with auto align. This will
automatically align the content in the center of the page

Once again, we’re going to assign this class to the id of a <div> tag.
• At the top of the page, before the <body> tag and before the <div> tag that
contains the mushroom_banner, type <div id="container">
• At the bottom of the page after the closing </body> tag, close off with the </div>
tag

Finished!
Your page should now look like
this. Congratulations! You’ve
succesffully made a form that is
both accessible and attractive.

The last few slides will show that
our form works in a variety of
browsers. This is important as we
want to conform with the fourth
principle of the WCAG2.0 – that
the form is robust enough to be
interpreted by various browsers.

Cross-browser compatibility
This is how the page and form looks in IE8

This is how the page and form looks in Firefox

This is how the page and form looks in Chrome

This is how the page and form looks in Safari

It appears that only IE8 parses the page and form perfectly whether it is viewed at
100% or 45%. The other browsers however, seem to missalign the checkboxes when
zoomed at a small scale (Firefox, Chrome and Safarai don’t have a visible zoom
scale).

However, I think 95% of the time people will be viewing the page at 100%
magnification or more, so I don’t believe that this will be a problem.

In conclusion
I believe we have created a form that is accessible to users by being perceivable,
operable, understandable and robust. We managed to acheive this by
• using background colousr and font colours to make the content stand out
• The logical placement of form controls created a coherent tab order when
using keyboard keys
• Using simple and descriptive language for the form control labels
• The code works across 4 major browsers so it is robust enough for a wide
audience. The descriptive labels also allows screen readers to give
meaningful information to the visually impaired.

Building and styling forms

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Building and styling forms (20)

Recently uploaded (20)

Building and styling forms