Fabulous Forms

In the 20/20 section I didn’t venture to feature any form features. Forms represent the all important call to action for a page. However, putting forms together was often a fairly dreary job for a web designer. What HTML5 does is add the fun into forms. Remember, HTML5 is all about making life simpler for developers. So what follows is an introduction to HTML forms including new HTML5 goodies as appropriate.

View Demos

Defining the form with … er <form>

A HTML form needs to be defined by the <form> tag. All the elements that follow need to placed as children of the <form> tag.

</pre>
<form>.... content</form>
<pre>

The form takes a number of attributes. The value of the ‘action’ attribute is the URL of the page that will process the form. The ‘method’ attributes is used to set how the values in the form are sent to the target of the action. The two methods are ‘post’ and ‘get’. Data sent with ‘get’ is placed in the URL, data sent with ‘post’ is bundled with the http headers. This all getting a little server-sidey and I will feature some PHP later to illustrate this.

Single line Text Fields with <input>

The <input> can be used to create a number of different types of input fields. Perhaps the most common is the single line text field created by setting the type attribute to ‘text’ as follows:

<input name="firstname" type="text" />

When data is sent from a form it is set in a name=value format. In the case of a text field the value would be that entered by the user. The ‘name’ of the name=value pair is set via the ‘name’ attribute of the <input> tag. In the above example the input text field has a name of ‘firstname’. If the name ‘Bob’ is entered in the text field then a name/value pair of ‘firstname=Bob’ is sent by the form to be processed.

The ‘value’ attribute is used to give the field a value, that may then be edited, for example in the context of a content management system.

The ‘placeholder’ attribute (new to HTML5) can be used to add a ‘hint’ to the user as to what type of value to enter. Now we are getting into the HTML5 stuff take a look at the following demos.

View Demos

<input name="firstname" type="text" placeholder="Your Name" />

The ‘required’ attribute (new to HTML5) can be used to add validation to the text field to ensure that a value is entered.

<input name="firstname" required="" type="text" placeholder="Your Name" />

With HTML5 the ‘type’ attribute can be changed to ’email’, ‘number’, ‘color’, ‘tel’, ‘search’ and ‘url’. Depending on the context these can make it easy for the user to add their data. For example smart phones will offer a keyboard that is configured for entering an email if ’email’ is set as the ‘type’.

Setting the type attribute to ‘search’ will produce

<input name="searchTerm" type="search" placeholder="Enter Search Term" />

If you are viewing this page through a HTML5 browser like Chrome as you type into the text field below a cross will appear enabling you to clear the field.

input type ‘date’

With some browsers adding the input type of date will create an automatic date picker:

<input name="eventDate" type="date" />

input type ‘range’

With some browsers adding the input type of range will create an automatic slider:

<input max="100" min="1" name="speed" step="5" type="range" />

Multi-line Textfields with <textarea>

The <textarea> element is used to add multi-line text fields. Values are set by placing them inside the <textarea> as follows:

<textarea><br />Some text here<br /></textarea>

The <textarea> element takes a ‘name’ attribute as with the &ltinput> tag to be used to assign the name of the name/value pair.

Drop Down Lists

Drop down lists are created with a parent/child combination of the <select> tag defining the list the <option> tag providing the content.

As such the following:

<select name="pet">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bunny">Rabbit</option>
</select>

Would produce.

CatDogRabbitThe content of the <option> tag is that visible in the list. The ‘value’ attribute of the <option> is used to assign the ‘value’ to the ‘name’ that is assigned in <select> tag. For example if ‘Cat’ was selected above the name/value pair would be ‘pet=cat’. Note, that the ‘value’ of <option> can differ from what the user sees in the list. For example, if ‘Rabbit’ were selected from the drop-down list the name/value pair would be ‘pet=bunny’.

The ‘selected’ boolean attribute allows one list item to appear selected.

As such the following:

<select name="pet">
<option value="cat">Cat</option>
<option selected="selected" value="dog">Dog</option>
<option value="bunny">Rabbit</option>
</select>

Would produce.

CatDogRabbit

CheckBoxes

Checkboxes are simple on/off affairs like so.

These are created with the following HTML

<input name="Consent" type="checkbox" value="Yes" />

The ‘name’ and ‘value’ attributes assign the name/value pair respectively.

Like the ‘selected’ attribute for <option> tag, checkboxes have a ‘checked’ boolean attribute. This is used to tick the box as follows:

These are created with the following HTML

<input checked="checked" name="Consent" type="checkbox" value="Yes" />

Radio Buttons

Radio buttons differ from checkboxes in that they are most frequently used in groups. They are called radio buttons after old school analogue radios (non of your digital rubbish).

If you selected FM, the AM and MW buttons would have to be up. If you then selected AM, the FM button would pop up. So it is with radio buttons. The trick is to group them with the ‘name’ attribute.

For example:

<input name="gender" type="radio" value="male" /> Male
<input name="gender" type="radio" value="female" /> Female
<input name="gender" type="radio" value="na" /> Not Applicable

Would produce:

Male Female Not Applicable

The ‘name’ and ‘value’ attributes assign the name/value pair respectively.

As with checkboxes, radio buttons have a ‘checked’ boolean attribute that works in the same fashion to tick one of the buttons.

For example:

<input checked="checked" name="gender" type="radio" value="male" /> Male
<input name="gender" type="radio" value="female" /> Female
<input name="gender" type="radio" value="na" /> Not Applicable

Would produce:

Male Female Not Applicable

Buttons

This the most important element of your form. It is the ‘call to action’. I’ll tell you what you want, you really, really want – that is for people to press this button. The basic for adding a button are:

<input type="submit" value="Submit" />

The value attribute sets the text to appear on the button. Always make this something more proactive and relevant to the content of your form ie ‘Send Message’, ‘Join Now’, ‘Buy’ indicating clearly the call to action.

<input type="submit" value="Join Now" />

To make you button more exciting you may want to style it with some CSS. This can be done using the selector of your choice. In this example I will use a ‘class’ selector to create some properties for the button.

.joinbutton{
    border-color: #A0D629 #567D00 #567D00 #A0D629;
    border-right: 1px solid #567D00;
    border-style: solid;
    border-width: 1px;
    color: #FFFFFF;
    font-family: 'arial black',arial;
    margin: 10px 0;
    padding: 2px 10px;
    text-align: center;
    text-transform: uppercase;
    background-color:#567D00;
}

Then apply the class to the button with the ‘class’ attribute.

<input class="joinbutton" type="submit" value="Join Now" />

And the result is a bit more interesting. We can rollover effects as well. This is something I would do with javascript/jQuery.

Fieldsets, Legends and Labels

Often overlooked when formatting a HTML forms are the three HTML elements <fieldset>, <legend> and <label>.

<fieldset> is used to logically group together elements in a form. By default also draws a box around the related form elements.

<legend> is used to defines a caption for the <fieldset>element. Rendering varies from browsers but most commonly added to the <fieldset>outline. The <legend> is a child of <fieldset>.

</pre>
<fieldset><legend>Personal Details</legend>
.... other stuff</fieldset>
<pre>

Would produce:

<label> is used to associate a text label with a specific form element such as an input text field, checkbox or radio button. The <label> element has an attribute ‘for’ which can be used to associate the label with the ID of a form element. This adds usability in that clicking the on the label places the focus on the referenced form element. By default is an inline element.

An example using the ‘for’ attribute:

<label for="firstname">First name</label>
<input id="firstname" name="" type="text" />

Would produce:

First name

Click on the text ‘First name’ to apply the focus ot the input text field.

The <label> element can also be used for other form elements. The following associates labels with a couple of radio buttons.

<label for="Male">Male</label>
<input id="Male" name="gender" type="radio" value="m" />
<label for="Female">Female</label>
<input id="Female" name="gender" type="radio" value="f" />

Bringing <fieldset>, <legend> and <label> together.

</pre>
<fieldset><legend>Personal Details</legend>
<label for="firstname">First name</label>
<input id="firstname" name="" type="text" />

<label for="surname">Surname</label>
<input id="surname" name="" type="text" />

<label for="Email">Email</label>
<input id="Email" name="" type="text" /></fieldset>
<pre>

Would produce:

Personal Details

First name

Surname

Email

Adding some more CSS

We saw above how a little styling can change the appearance of the submit button. Let’s have a look at a few more styling tricks to add to a HTML form.

If we start with the basic HTML page and then add some CSS. If you want to see the effect he is the before page and then the after styling page.

The basic html is:

</pre>
<div id="container"><header>
<h1>Feedback</h1>
</header><section><form action="" method="post">
<fieldset>
<legend>Personal Details</legend>
<label>First name</label>
<input id="" name="" type="text" />

<label>Surname</label>
<input id="" name="" type="text" />

<label>Email</label>
<input id="" name="" type="text" />

Gender
<label>Male</label>
<input id="Male" name="gender" type="radio" value="m" />
<label>Female</label>
<input id="Female" name="gender" type="radio" value="f" /></fieldset>
<fieldset><legend>Feedback</legend>
<label>Leave us your comments</label>
<textarea id="comments" name="comments"></textarea></fieldset>
<fieldset><legend>Marketing</legend>
<label>Join mailing list</label>
<input id="mailingList" name="list" type="checkbox" value="1" />

<label>How did you hear about us?</label>
<select name="marketing">
<option value="Web">Web</option>
<option value="Friend">Friend</option>
<option value="Other">Other</option>
</select></fieldset>
<input class="sendButton" type="submit" value="Send" /> </form></section><footer>© mustbebuilt 2011</footer></div>
<pre>

First we’ll some styling to the main sections of the document, including the <fieldset> and <legend>.

body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#333333;
}
#container{
	width:700px;
	margin:auto;
}
section{
	margin-bottom:15px;
}
footer{
	margin-top:15px;
	border-top:#CCC 1px solid;
	clear:both;
	text-align:center;
}
legend{
	font-weight:bold;
	font-size:14px;
	color:#333333;
}
fieldset{
	margin-bottom:20px;
	padding:5px 5px 15px 15px;
}

We have used <label> tags in the HTML. Assuming we would like the labels to appear aligned. We could add a ‘width’ CSS property but as <label>s are inline that won’t effect the width. The trick here is to convert the <label> to a ‘block’ display type and then we can set its width. To stop the ‘block’ forcing a new line we will also ‘float’ the <label> to the left. We will therefore create a rule for <label> as follows:

label, .label{
	display:block;
	width:350px;
	float:left;
	border-bottom:#CCC 1px dotted;
	margin-bottom:15px;
}

We have used both a HTML and class selector for this rule. This is because we would like the radio buttons to sit next to each other spaced in the same way as the textfields. However, each radio button has a <label>. We don’t want these floating and having the same width as our text field <label>s. Therefore we have a class selector .inline attached to them that forces back to their default inline behaviour. The .inline rule is also attached to the radio buttons to give them the same inline behaviour.

label.inline, input.inline{
	display:inline;
	float:none;
}

The text ‘Gender’ is placed in a <span> tag and assigned our class .label and is thus the same width as the text <label>s above it.

        <span class="label">Gender</span>
        <label class="inline" for="Male">Male</label>
        <input id="Male" class="inline" name="gender" type="radio" value="m" />
        <label class="inline" for="Female">Female</label>
        <input id="Female" class="inline" name="gender" type="radio" value="f" />

To make the form more interactive we can create pseudo-classes for the <input> and <textarea> elements using :focus. As such when the users places the focus on these elements, by for example clicking on the appropriate <label> then the form element will pick up the :focus rule. This applies a green background to the form fields with focus.

input:focus, textarea:focus{
	background-color:#B9F9B7;
}

Aside from formatting the button which we saw above the remaining rules to add add formatting the font and dimensions of input textfields and <textarea> elements.

input, textarea{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}
textarea{
	width:600px;
	height:60px;
}
.sendButton{
   float:none;
    border-color: #A0D629 #567D00 #567D00 #A0D629;
    border-right: 1px solid #567D00;
    border-style: solid;
    border-width: 1px;
    color: #FFFFFF;
    font-family: 'arial black',arial;
    margin: 10px 0;
    padding: 2px 10px;
    text-align: center;
    text-transform: uppercase;
	background-color:#567D00;
}

I have kept this pretty minimalist for you to add your own look and feel. When it comes to the fucntionality of the form this will require other skillsets – namely Javascript for form validation and then a server side script such as PHP for the form to actually do something like add content to a database or be emailed. More on these skills musbebuilt ie coming soon.