lunedì 22 agosto 2011

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 icon wink HTML / CSS Forms

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 icon biggrin HTML / CSS Forms (or almost icon wink HTML / CSS Forms )

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 icon wink HTML / CSS Forms

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 icon smile HTML / CSS Forms

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 icon smile HTML / CSS Forms

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 :

single line HTML / CSS Forms

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

Code : HTML


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. icon surprised HTML / CSS Forms
Here’s what we have :

Code : HTML


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 icon biggrin HTML / CSS Forms
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

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

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 icon wink HTML / CSS Forms
Here is a multi line text area :

multi line HTML / CSS Forms

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

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

But, hmmmmm… why open

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 icon biggrin HTML / CSS Forms

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 :

check box HTML / CSS Forms

The good news : it’ll be quick icon wink HTML / CSS Forms

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

Code : HTML

Tick the food you like to eat :

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 icon wink HTML / CSS Forms

Code : HTML

Tick the food you like to eat :

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

radio button HTML / CSS Forms

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 :

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 :

What continent do you live on ?

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 icon wink HTML / CSS Forms

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.

scroll list HTML / CSS Forms

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

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

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

It can be useful, especially in a big list icon smile HTML / CSS Forms

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 icon smile HTML / CSS Forms

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

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

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

Your wish

Make a wish that you want to come true :

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 ! icon biggrin HTML / CSS Forms

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 icon smile HTML / CSS Forms


Nessun commento:

Posta un commento