HTML / CSS – Forms

 

Time’s passing us by, my friends. The further we get through the lesson, the more you’ll realise we’re reaching the limits.

What ? You lied to us ?!
XHTML and CSS have limits ? We can’t do everything with them ?!

On a serious note, yes XHTML and CSS do have limits. You can already make a good site with what I’ve taught you, but imagine that one day you want to make an awesome site ?
We’re getting there. What I’m going to teach you will still be XHTML, but you will realise that we’ve reached the limits of the language.

But maybe that’s a good sign. It might mean that you’ve become good and that XHTML isn’t enough anymore

What will we talk about in this chapter ? We’re going to talk about forms. The idea is simple : you’ve created a site, and for example, you’d like it if you’re visitors could leave their thoughts by ticking boxes, inserting their comments, their suggestions …

Welcome to the wonderful world of forms, the world where check boxes, buttons and scrolling lists live in perfect harmony (or almost )

When you want to insert a form into your XHTML page, you need to use the

tags. It’s the main tag of a form; it allows is to indicate the beginning and the end of the form.

Code : HTML

Text before the form

Text inside the form

Text after the form

So that is the basic structure.
Now pay attention, because what I’m going to say is not evident seeing as we’re at the limits of XHTML.

A form is created to be sent. We’ll take an example to make things clear.
Let’s suppose that a visitor leaves a comment in your form, for example Yeeaahhhh, this site is great ! This message needs to be sent so that you can receive it (makes sense doesn’t it ?), and so that you can find out what the visitor thinks of your site.

Well, that’s where the problem is, or more precisely :

Problem 1 : how do you send the text left by the visitor ?

Problem 2 : once the data has been sent, how do you process it ? Do you want to receive it automatically be email, or do you want it to be saved somewhere, then show it on a page for everyone to see ?
That’s the same as a guest book if you were following properly

There are 2 attributes for the

tag so that we can resolve these 2 problems :

method : this attribute indicates how you want to send the data (problem 1). There are 2 ways to send information on the web : method=get : isn’t a very flexible method because you’re limited to 255 characters. The information is sent to the address of the page (http://…), but we’re not really interested by this for the moment, I recommend that you use the other method : post.method=post : is the most used method for forms because you can send a lot of information.action : is the address of the page or program that will process the data (problem 2). This page will send you the data by email if that is what you want, or save the message, along with all the others in a database.
We can’t do this with XHTML / CSS, generally we use another language that you may have heard of : PHP. We’ll see that later, don’t worry

We can now complete the tag with the attributes we’ve just seen.

For method, you might have guessed, I’ll put the value post.
For action, I’ll put the name of a special PHP page (process.php). This page will be called upon when the visitor clicks on the send button.

Code : HTML

Text before the form

Text inside the form

Text after the form

For the moment, we don’t know what happens in process.php : all that I ask is that you trust me, and imagine that this page does exist, and works. In the lessons on PHP we’ll see how this page analyses the data, but for the moment that isn’t our priority.

Our priority, here, is to see how we insert text areas, buttons and check boxes into our web page using XHTML.
That’s what we’re going to learn now

We’re going to see the tags that allow us to insert text areas into a form.
To start, you need to know that there are 2 types of text areas :

single line text areas : as its name says, we can only write one line of text inside it :p. It’s for inserting short text, for example : insert your username.multi line text areas : this allows us to insert a more important amount of text on several lines, for example : insert your address.

You don’t know what a text area is ?
That’s alright, I’ve got a picture of one :

To insert a single text area, we use the tag.
We’ll use this tag a few times in this chapter. Each time the attributes will change.

To insert a single line text area, we need to write :

But that’s not it ! We’re missing an attribute that will be very important ; the name of the text area. In effect, that will allow us later (in PHP) to recognise which text is the username, which text is the password etc…
Therefore we need to give a name to the text area with the attribute name. Here, we will suppose that we want the visitor’s username :

Now we’ll test that :

Code : HTML

Don’t forget to surround the text area with

or your web page won’t be valid.

It’s all very well having a text area, but if a visitor see’s it, they won’t know what to put in it. We have to tell them that the box is for their username.
To indicate what a text area is for we use the tag like this :

Code : HTML

Username :

But that’s not enough. We need to link the label to the text area.
To do this we need to give the text area a name, not with the attribute name, but with the attribute id (which we can use on all tags).

A name and an id on a text area ? Won’t they both do the same thing ?

Yes, a bit. Personally, I give the same name to name and id, there’s no problem.
To link a label to a text area, we need to give it the attribute for, which has the same value as the id of the text area.
Here’s what we have :

Code : HTML

Username :

Now, if you’re trying the examples at the same time as me, try clicking on username : you’ll see that the cursor automatically goes into the corresponding text area.

So…it’s just used so that the corresponding text area is selected if we click on username ?

No, not at all
It also allows disabled people to easily go through the form. We don’t think about it often enough, but often our forms are so large and unorganised, that it can be hard to know what each text area is for.
Here, for example, blind people will know that the text area is for the username, and they will thank you for taking the time to make things clearer with labels.

There are some other attributes for the tag which will surely interest you.

It is possible, if you want, to give a default value to a text area.
To do this we just need to add the attribute value to and give it the value of the text you want to show at the beginning. Example :

Another thing : you can change the width of the text area as well as the maximum amount of characters that can be inserted in the text area.
The width is defined with size.
The maximum amount of characters is set with maxlength.

In the following example, the text area contains the text europcsolutions by default, the area is 30 characters long, but you can only insert 15 characters maximum :

Code : HTML

Username :

You can easily transform a text area into a password box, which is the area where visitors insert their passwords.
The only thing you need to change is the type attribute in . Put type=password and it’s sorted !

I’ll complete the form. It’ll now ask the visitor for a username AND password :

Code : HTML

Username :
Password :

Now we’ll (at last) see multi line text areas. Don’t worry, it’ll be a lot faster now that we’ve seen labels
Here is a multi line text area :

The tag for multi line text areas works in pairs (contrarily to ). It is .
With this tag also, we add the attributes name, and use labels.

Code : HTML

How do you think I can improve my site ?

We can change the size of the text area using 2 different methods :

With CSS : just apply the properties width and height to the text area. However this doesn’t work before Internet Explorer 8.With Attributes : we can add the attributes rows and cols to . The first is the number of rows in the textarea, the second is the number of columns.<P><STRONG>Code : HTML</STRONG></P><form method="post" action="process.php"> <p> <label for="improve">How do you think I can improve my site ?</label><br /> <textarea name="improve" id="improve" rows="10" cols="50">

But, hmmmmm… why open to close it straight away ? A solo tag like <input /> would have done the job wouldn’t it ?</P><P>In fact, it’s to set default text for the textarea. It’s a bit like what we did earlier with value</EM> in the singe line text area, only here we have several lines <IMG class=wp-smiley title="HTML / CSS Forms" alt="icon smile HTML / CSS Forms" src="/iconsmile.gif"> <BR>You can set a default value for the text like this :</P><P><STRONG>Code : HTML</STRONG></P><form method="post" action="process.php"> <p> <label for="improve">How do you think I can improve my site ?</label><br /> <textarea name="improve" id="improve" rows="10" cols="50"> Improve my site ?!<br /> It's that great that there's no need to improve it !

As well as text areas, XHTML offers a whole range of elements to use in your form.
In this part we will see :

Check boxes, which you surely know…Radio buttons, which you also know…Scrolling lists, which you must have seen… Well, you already know everything

Or more likely, you’ve already seen all these elements, but I bet you don’t know how to make them in XHTML !

These, my friends, are check boxes :

The good news : it’ll be quick

In effect, you already know the tag we’re going to use : it’s
Only we’re going to change the value of the attribute type to checkbox :

Add a , and that’s it !

Code : HTML

Tick the food you like to eat :
Chips
Steak
Spinach
Oysters

What can I add ?
Because of the labels, you don’t have to click on the box itself, you can also click on the text.
Also, don’t forget to give a name to the box, in PHP that’ll allow us to identify the boxes that the visitor clicked on.

Ah yes, I nearly forgot. You can make a box be ticked by default. To do that you need to add the attribute checked=checked. That allows us to have an influence on the choices that are made

Code : HTML

Tick the food you like to eat :
Chips
Steak
Spinach
Oysters

Radio buttons allow you to make a choice (and only one) from a list :

It’s a bit like check boxes, but with an extra complication, you’ll see.
The tag to use is still , but this time the value for type is radio.
The main difference with check boxes is that radio buttons work in groups. A whole group of options have the same names, but the value attribute is different every time.

Things will be clearer with the following example :

Code : HTML

Please indicate your age group :
Less 15 yrs
15-25 yrs
25-40 yrs

Why use the same name for each option ? Simply so that the browser knows which group the option is in.
Try to take out the name attribute, you’ll see that you can select every option. But that isn’t what we want, that’s why we link them all together with their name.

You’ll notice in the following example that we’ve got radio buttons with different names. If I had used the same names we wouldn’t be able to separate them.

If you have 2 different option groups, you have to give a different name to each group :

Code : HTML

Please indicate your age group :
Less 15 yrs
15-25 yrs
25-40 yrs

What continent do you live on ?
Europe
Africa
Asia
America
Australia

If, instead of putting name=continent you put name=age, the visitor wouldn’t be able to choose their age AND continent.
Try changing the names, you’ll see what happens

A last precision : if you want one of the options to be ticked by default, add checked=checked just like the check boxes, that’s it !

Scrolling lists are another elegant way of letting visitors choose one option from a group of possibilities.

This works a bit differently to the others. We’ll use the tag which indicates the beginning and end of the list.
We add the attribute name to give a name to the list. For example country :
< select name=country>.

And now, inside the , we insert several tags (one choice possible).
We add the attribute value to identify the choice made by the visitor.

Code : HTML

What country do you live in ?
France Spain Italy United Kingdom Canada U.S.A China Japan

It’s a bit different to the other things we’ve seen but it’s still quite easy to understand.

Another new thing : we can’t use checked=checked here, instead we must use selected=selected. It allows us to choose a value by default (if not the first value if the default value) :

Code : HTML

What country do you live in ?
France Spain Italy United Kingdom Canada U.S.A China Japan

But scrolling lists can do even better !
We can create option groups inside the list with the tag. We have to give it the attribute label which lets us give a name to the group (don’t mix up with the tag !).

Why not separate the countries by continent in our example ?

Code : HTML

What country do you live in ?
France Spain Italy United Kingdom Canada U.S.A China Japan

It can be useful, especially in a big list

Now we’ll try to take things a bit further.
We’ll have a double objective : to make our form understandable and to make it look good.

We’ll do this in 4 stages :

Define the order of tabulation (accessibility)Define the keyboard shortcuts (accessibility)Organise the form into several areas (accessibility & design)Add CSS (design)

This is the first point that is supposed to make our lives easier.
As you may know, we can go through a menu by only using the Tab key that is situated on the top left of the keyboard. Every time you press on Tab you go to the following field. Every time you press maj+Tab you go to the preceding field.

Our goal is to say in XHTML in which order we would like to go through the form. For example, after the first name text area, if I press Tab I want to go to last name field, then the address etc…

We’ll use the attribute tabindex which can be inserted into all the form tags we have seen.
We must give it a number as a value. Each field of the form must have a different number.

The numbers indicate the order in which we want to go through the form : first n° 1, then n° 2, then n° 3 etc…

You don’t have to put numbers that follow each other. It is even a good idea to leave a space between the numbers in case you need to insert extra fields later on.
I think a good idea is to count 10 by 10 : n° 10, n° 20, n° 30 etc… It doesn’t cost you anything to count in 10s, and if later you need to insert a n° 25, there won’t be any problems

In this form, I’ve added a tabindex in every field. As we have seen, the first field has the smallest n° and the last field has the smallest n°.

Code : HTML

What's your surname ?

What's your first name ?

What's your email address ?

Which country do you live in ?
France Spain Italy United Kingdom Canada U.S.A China Japan

Try hitting the Tab button several times and you’ll see that you’ll go through the form in the order of the tabindex.
This is particularly useful for people who don’t have a mouse (yes, it does exist !).

By default, if there isn’t a tabindex, the browser will take the top field as n° 1 and the last one will be at the bottom of the page.
However I suggest that you put tabindex because if your form becomes more complicated in the future it could be very useful.

An access key is a keyboard shortcut that allows users to directly go to a field without clicking with the mouse or pressing Tab several times before reaching the desired field.

The good thing is that XHTML allows you to choose the keys you want to use as shortcuts.
However, different browsers use manners of using shortcuts :

Firefox and Internet Explorer (Windows) : use Ctrl + shortcut. If not use Ctrl + Alt + shortcut.Safari and IE-Mac (Macintosh) : use Ctrl + shortcut.

To define an access key, you must use the attribute accesskey, which, like tabindex can be put on all the tags we’ve seen in this chapter.
You must give it the value of the key you wish to use as a shortcut.

In this example, the search bar is accesible with the S key :

Code : HTML

What's your surname ?

What's your first name ?

What's your email address ?

What are you looking for on this site ? shortcut : R

In Windows, you need to press Alt+R to go directly to the search bar.
In Mac you need to press Ctrl+R.

The big problem with access keys is that certain keys are already taken by the browser. If you use the same keys, there will be conflicts and visitors won’t be able to use the keys they’re used to.

Don’t forget to write somewhere the access keys that are available or else visitors won’t know what shortcuts to use.

The method we’re about to see has 2 advantages :

It makes the form clearer and more accessibleIt makes the design look better

So what’s the idea ?
If you have a big enough form (which is generally the case), it is easy for visitors to get lost in the amount of information that has to be sent. It is therefore possible in XHTML to group related data into groups.

We’ll use the

tag to put the fields into groups.
Inside this tag, we’ll insert other tags (including ) as well as another tag :

. This allows us to give a name to the group.

This is very similar to optgroup…but why did we use the attribute label to give a title to the group whereas we now have to use the

tag ?

Well, that is one of the big mysteries of XHTML ! I would have personally preferred that everything was uniform : either we use attributes to set a title, or tags. However, it will be up to you to remember in this case. As always, it becomes easier with a few exercises, but still, try to remember it.

Here’s an example on the use of

:

Code : HTML

Your coordinates

What is your surname ?

What is your first name ?

What is your email address ?

Your wish

Make a wish that you want to come true :
Be rich
Be famous
Be more intelligent
Other...

If "Other" please precise :
</p> </fieldset></form>The use of <p></p> is not necessary inside <fieldset></fieldset> like it was earlier.</P><P>The result is a lot clearer : you can see the main categories of the form straight away. The form gains clarity and visitors will thank you for that.<BR>Of course, the form won’t be perfect without CSS <IMG class=wp-smiley title="HTML / CSS Forms" alt="icon wink HTML / CSS Forms" src="/iconwink.gif"> </P><P>The good news is that after having learnt an incalculable amount of new XHTML tags, you won’t learn any new CSS properties <IMG class=wp-smiley title="HTML / CSS Forms" alt="icon biggrin HTML / CSS Forms" src="/iconbiggrin.gif"> <BR>As you already know everything, I won’t give you any needless comments <IMG class=wp-smiley title="HTML / CSS Forms" alt="icon wink HTML / CSS Forms" src="/iconwink.gif"> </P><P><STRONG>Code : CSS</STRONG></P>input, textarea { font-family: "Times New Roman", Times, serif; /* change the font of the text inside the text areas */}input:focus, textarea:focus { /* when the curosr is in the text area */ background-color: #ffff99;}label { color: blue; /* put all the labels in blue (why not ?) */}legend { /* give the titles a bit more importance */ font-family: Arial, "Arial Black", Georgia, "Times New Roman", Times, serif; color: #ff9933; font-weight: bold;}fieldset { margin-bottom: 15px; /* a margin to separate the fieldset */ background-color: #ffffcc;}<P>Right, it’s quite ugly but you get the idea <IMG class=wp-smiley title="HTML / CSS Forms" alt="icon biggrin HTML / CSS Forms" src="/iconbiggrin.gif"> </P><P>The main thing is to show you that you know enough in CSS to do what you want to the form. You have the tools; it’s up to you to use them appropriately.</P><P>For this example I re-used :focus which, for those who don’t remember, allows us to apply CSS styles to an element that is selected.</P><P>We’re nearly there.<BR>We’ve seen most of the elements that can be included in a form but we’re still missing one thing : the validation button !</P><P>Luckily, it’s easy to create, even more so because you already know the tag…</P>What ? It’s not <input /> again is it ?</P><P>Yes it is !<BR>It seems that this tag can do anything.</P><P>Right, of course one type of button wasn’t enough for webmasters, they needed 3 :</P>The send button : it triggers the sending of the form. The visitor is redirected to the page indicated by the action</EM> attribute in the form. A send button is made with the attribute type=submit</EM>. You can add the attribute value</EM> to change the text in the button, but you can also leave the default text, I think it’s clear enough :<BR><input type=submit />The send button : automatically resets the values in the form. This time we need to use the attribute input type=reset</EM><BR><input type=reset />The button that doesn’t do anything : it’s a generic button that doesn’t do anything in particular. The form isn’t sent, nothing is reset, nothing happens. What’s the point ? Mainly it is used to launch scripts made in JavaScript (another language used in web pages). We won’t be using it but I’m just telling you about it so that you know it exists if you need it one day.<BR>This time I recommend you include the attribute value</EM> so that you know what the button does :<BR><input type=button value=I don’t do anything /><P>We’ll test the first 2 buttons (send and reset) in a fictional form :</P><P><STRONG>Code : HTML</STRONG></P><form method="post" action="target-process.php"> <fieldset> <legend>Your coordinates</legend> <label for="surname">What is your surname ?</label><br /> <input type="text" name="surname" id="surname" tabindex="10" /><br /> <label for="firstname">What is your first name ?</label><br /> <input type="text" name="firstname" id="firstname" tabindex="20" /><br /> <label for="email">What is your email ?</label><br /> <input type="text" name="email" id="email" tabindex="30" /><br /> </fieldset> <fieldset> <legend>Your wish</legend> <p> Make a wish you would like to become true :<br /> <input type="radio" name="wish" value="rich" id="rich" tabindex="40" /> <label for="rich">Be rich</label><br /> <input type="radio" name="wish" value="famous" id="famous" tabindex="50" /> <label for="famous">Be famous</label><br /> <input type="radio" name="wish" value="intelligent" id="intelligent" tabindex="60" /> <label for="intelligent">Be <strong>more</strong> intelligent</label><br /> <input type="radio" name="wish" value="other" id="other" tabindex="70" /> <label for="other">Other...</label><br /> </p> <p> <label for="precisions">If "Other", please precise : </label><br /> <textarea name="precisions" id="precisions" cols="40" rows="4" tabindex="80">

Without PHP this form won’t do anything. So reassure yourselves, no information was saved.

When you click on submit query the form sends you to the page target-process.php, which is a fictional PHP page that you don’t know how to do.
As I said earlier, we’ve now reached the limits : we know how to make things in XHTML / CSS, but to process data (save or send by mail) you need to use PHP…which I will write lessons about, don’t worry.

Ladies and gentlemen, I have the immense honour of informing you that you’ve read the whole chapter about forms and you still don’t know how to use them.

You have also finished learning about XHTML and CSS !

But, as I have a conscience, I would hate to leave you to got lost in the wilderness. I’ll therefore force myself to write an extra chapter, which will be a conclusion