Introduction
The time passes, guys. Over the tutoriel progresses, the more you'll see that start to reach the limits.
hearing that you propably think that xhtml and css got limits, wel u're right aboutthat 
More seriously, yes XHTML and CSS have limits. You can already do a good site with everything I've learned, but imagine that one day you want to make a SUPER MEGA-site super cool?
It happens. What I will tell you, it's always XHTML, but you will realize for yourself that you come to the "limits" of language.
Ultimately, a good sign. It means perhaps that you have become good and that the XHTML is no longer enough
What Will we speak in this chapter? , ah yea i almost forgot what was the theme of the day!
We will discuss the forms. The idea is simple: you create a website, and would like for example that your visitors can give their opinion on it, by checking boxes, entering comments, suggestions ....
Welcome to the wonderful world of forms, a world where the buttons, check boxes and dropdown lists live in harmony (well almost) xD .
When you wanna insert a form in your XHTML page, you gonna have to use the tag <form> </form>. This is the main tag of the form, it indicates the beginning and end.
xhtml code :
<p>a text before the form</p>
<form>
<p>a text inside the form</p>
</form>
<p>a text after the form</p>
Note :that you need to set the block type tags (like <p></p>) inside your form if you need to write text into it.
So that was the basic structure.
Now stay attentive, since we are at limit door of xhtml.
Be aware that a form is made to be sent. Let's take an example that things are clear.
Assume that your visitor comes to type a comment in your form, like "Wow your site is Coool". This message must be sent so that you can receive (logic isn't it), and so you know what visitors think of your site.
Well this is the problem, or rather the problems that we will be asking:
- Problem 1: how to send text entered by the visitor? By what means?
- Problem 2: Once the data has been sent, how to treat? Would you like to receive the message automatically by email, or do you prefer a program to load the record somewhere, and then display it on a page visible to everyone?
You must specify two attributes to <form> to give the answers to these two problems:
- Method: This attribute indicates the means by which the data will be sent (problem # 1). There are two ways to send data on the web:
- method="get": method is generally not very suitable, because it is limited to 255 characters. The peculiarity is that the information will be sent to the address of the page (http:// ...), but this detail does not really interest us at this time. Most of the time, I recommend you use another method: "post".
- method="post": is the most widely used method for forms because it can get a lot of information through it.
- Action: is the address of the page or program that will process the information (problem # 2). This page will load to send you an email with the message if that's what you want, or save the message with all others in a database.
This can not be done in XHTML/CSS, you generally use another language you may have heard about:
. (We will have the opportunity to come back to it once php/mysql tutoriel will start see this with cen).
So we will now complete the <form> with two attributes we have just seen.
For method, you guessed it I will put the value "post".
For action, I'll type the name of a special page in PHP (traitement.php "). This is the page that will be called when the visitor clicks on the button "Send form".
xhml code :
<p>a text before the form</p>
<form method="post" action="traitement.php">
<p>a text inside the form</p>
</form>
<p>a text after the form</p>
For the moment we do not know what is going on inside page "traitement.php" I ask you to trust me and imagine that this page is up and running. We will see later how this PHP page is to analyze form data, but it is not our priority.
Our priority here is to see how XHTML / CSS is made to insert text boxes, buttons and checkboxes in your web page.
This is what we gonna do
Well, back to the concrete
We'll see what XHTML tags that allow us to enter text into a form.
To begin, we must know that there are two different text boxes:
- a one lign text box : as its name suggests, you can not write a single line inside: P. It is used for entering short texts, such as: "Enter your username"
- The multiline text box: This text box allows you to write a significant amount of text in multiple
one lign text box
To insert a text box to a line, we will use the <input />.
We'll find her several times later in this chapter. Each time, it's type attribute that will change.
For a text box to a line, you type: <input />
But that's not all! It lacks an attribute that will be very important is the name of your text box. Indeed, this will allow you later (in PHP) to recognize that this text is the name of the visitor, such text is the password ... etc.
So how to name this text box, thanks to the name attribute. Here, we assume that we ask the visitor to enter his username:
<input name="login" />
xhtml code :
<form method="post" action="traitement.php">
<p><input type="text" name="login" /></p>
</form>
[URL="http://tutoriliez.eb2a.com/test100.html"]test code[/URL]
Note: Remember to enclose your <input /> a block tag like <p></p> or else your web page will not be a valid xhtml page (i'll explain this in the next lesson "W3C and web standards").
Labels
that was nice , but if it falls on your visitor does not really know what to put inside. We'll just explain that he must enter his nickname.
To indicate what is meant by a text box to the visitor, using the tag <label></label> surrounding the text, like this:
xhtml code:
<form method="post" action="traitement.php">
<p>
<label>your login</label> : <input type="text" name="Login" />
</p>
</form>
But it is not enough. We need to link the label with the text box.
To do this, we must give a name to the textbox, not with the name attribute but with the id attribute (which can be used on all the tags).
you propably asking 
A name and an id on the field? It's not going to duplicate it?)
well actually yes, Personally i give the same value to the name and id, it does not pose a problem.
To link the label to the field, it must be given for an attribute that has the same value as the id of the field ...
In global, it gives this:
xhtml code :
<form method="post" action="traitement.php">
<p>
<label for="login">your login</label> : <input type="text" name="login" id="login" />
</p>
</form>
[URL="http://tutoriliez.eb2a.com/test101.html"]test code[/URL]
Try clicking on the text "Your login" you will see that the cursor is automatically placed in the text box.
It was "linked" with the label's text box so people know what it represents.
actually most webmasters don't think about adding labels to their forms and sometimes the forms are so large and poorly constructed that it is difficult to know what goes with what and for sure, and they will thank you for taking the time to make your application clearer thanks to the labels.
Some additional attributes:
There are some other attributes on the <input /> certainly of interest to you.
It is thus possible, if you need to give a default value to your text box.
To do this, simply add the attribute value to <input /> indicating what value you want to initially. Example:
<input name="pseudo" value="arbalest" />
Another thing: you can change the width of your text box so that the maximum number of characters that can be put inside.
The width is defined with size.
The maximum number of characters is defined with maxlength.
In the following example, the text box contains the nickname "arbalest" by default it is 30 characters long, but we can not put that up to 10 characters on the inside:
<form method="post" action="traitement.php">
<p>
<label for="login">your Login :</label>
<input type="text" name="login" id="login" value="arbalest" size="30" maxlength="10" />
</p>
</form>
[URL="http://tutoriliez.eb2a.com/test102.html"]test code[/URL]
Password Area
You can easily make the text box behaves as an area "password", that is to say an area where you do not see the screen that is typed into it.
The only thing you need to change is the type attribute <input />, Set type="password", and voila!
I complete my form. He now asks the visitor's login and password
xhtml code :
<form method="post" action="traitement.php">
<p>
<label for="login">Your login :</label>
<input type="text" name="login" id="login" value="arbalest" />
<br />
<label for="pass">your password :</label>
<input type="password" name="pass" id="pass" />
</p>
</form>
[URL="http://tutoriliez.eb2a.com/test103.html"]test code[/URL]
a multiline text box
It arrives (finally) multiline text boxes. Do not worry, it will go faster now that you know the labels.
The multiline text box is a tag exists in pairs (unlike <input />). This tag <textarea> </textarea>
To this 1 also, like any other form element, you must give it a name with the name, and use a label that explains what it is.
xhtml code :
<form method="post" action="traitement.php">
<p>
<label for="improve">tell us your opinion about our site ?</label><br />
<textarea name="improve" id="improve"></textarea>
</p>
</form>
[URL="http://tutoriliez.eb2a.com/test104.html"]test code[/URL]
You can change the size of textarea in two ways:
- In CSS: just apply the CSS properties width and height to the textarea.
- With attributes, you can add rows and cols attributes to the tag <textarea>. The first indicates the number of lines in the textarea, and the second the number of columns.
like this:
xhtml code :
<form method="post" action="traitement.php">
<p>
<label for="improve">Comment pensez-vous que je pourrais améliorer mon site ?</label><br />
<textarea name="improve" id="improve"rows="10" cols="50"></textarea>
</p>
</form>
[URL="http://tutoriliez.eb2a.com/test105.html"]test code[/URL]
if noticed we started the textarea just to close it right after it,we still type some text between them and In fact, it used to pre-populate the textarea. It's a little of what was earlier with value, except that here we can do it on multiple lines
You can put the default value of textarea like this:
xhtml code :
<form method="post" action="traitement.php">
<p>
<label for="improve">tell us your opinion </label><br />
<textarea name="improve" id="improve"rows="10" cols="50">give us your opinion about the website what you think we should add ^^</textarea>
</p>
</form>
[URL="http://tutoriliez.eb2a.com/test106.html"]test code[/URL]
In addition to entry areas, XHTML gives you a string of elements of options to use in your form.
We will see in this part:
[list][*]Check boxes, you probably know ...[*]Areas of options, you know that too ...[*]options list, you already have seen ... Well in fact you already know everything
Or rather, you've seen all these things, but I bet you do not know how they are created in XHTML!
I won? hehe I am definitely too strong xDD
Checkbox
the good news is that it's gonna be fast
Indeed, using the tag you already know: it <input />
It will only change the value of its type attribute set to "checkbox" like this <input type="checkbox" name="choice" />
you add label and wp it's done
xhtml code :
<form method="post" action="traitement.php">
<p>
what you like to eat :<br />
<input type="checkbox" name="chips" id="chips" /> <label for="chips">chips</label><br />
<input type="checkbox" name="steak" id="steak" /> <label for="steak"></label><br />
<input type="checkbox" name="spinach" id="spinach" /> <label for="spinach">spinach</label><br />
<input type="checkbox" name="banana" id="banana" /> <label for="banana">banana</label>
</p>
</form>
[URL="http://tutoriliez.eb2a.com/test107.html"]test code[/URL]
so what's up with this:
Thanks to the label, you do not have to click on the box, you can also click on the text next to (well, it does not work on IE as I told you at least ie6 and bellow).
Do not forget to give a name to each checkbox, this will allow you to identify later what the visitor has checked boxes.
Oh yes, I almost forgot. You can make a box is already checked by default. To do this we must add the attribute checked="checked" (yes, the same attribute and value).
xhtml code :
<form method="post" action="traitement.php">
<p>
what you like to eat :<br />
<input type="checkbox" name="chips" id="chips" checked="checked" /> <label for="chips">chips</label><br />
<input type="checkbox" name="steak" id="steak" /> <label for="steak">steak</label><br />
<input type="checkbox" name="spinach" id="spinach" /> <label for="spinach">spinach</label><br />
<input type="checkbox" name="banana" id="banana" /> <label for="banana">banana</label>
</p>
</form>
[URL="http://tutoriliez.eb2a.com/test108.html"]test code[/URL]
option area (Radio)
Areas of options allow you to make a choice (and only one) from a list of possibilities:
It looks like check boxes, with just a little further difficulty, you'll see.
The tag to use is always a <input />, this time with the value "radio" for the type attribute.
The big difference with the checkboxes is that the areas of options can be "group". A whole group of options has the same name, but a value attribute different each time.
Things will be clearer in the example below:
xhtml code :
<form method="post" action="traitement.php">
<p>
indicate your age here:<br />
<input type="radio" name="age" value="lessthen15" id="lessthen15" /> <label for="lessthen15">less then 15 years</label><br />
<input type="radio" name="age" value="medium15-25" id="medium15-25" /> <label for="medium15-25"> i'm bettween 15-25 years</label><br />
<input type="radio" name="age" value="medium25-40" id="medium25-40" /> <label for="medium25-40">i'm between 25-40 years</label><br />
<input type="radio" name="age" value="morethen40" id="morethen40" /> <label for="morethen400">i'm even older then 40 years</label>
</p>
</form>
[URL="http://tutoriliez.eb2a.com/test110.html"]test code[/URL]
Why have the same name for each option? Simply so that the browser knows what "group" button is.
Try removing the name attributes, you will see that each element of option will become selectable. But this is not what we want, that's why they are "binding" them by giving them the same name.
Note:You will notice that this time we chose a different name herein. In fact, the name being the same, we could not distinguish them (and you know that id must be unique!). That is why we chose to put the same value as the id value.
If you have two areas of different options should be given a unique name to each group as follows:
xhtml code :
<form method="post" action="traitement.php">
<p>
plz indicate your age:<br />
<input type="radio" name="age" value="lessthen15" id="lessthen15" /> <label for="lessthen15">less then 15 years</label><br />
<input type="radio" name="age" value="medium15-25" id="medium15-25" /> <label for="medium15-25"> i'm bettween 15-25 years</label><br />
<input type="radio" name="age" value="medium25-40" id="medium25-40" /> <label for="medium25-40">i'm between 25-40 years</label><br />
<input type="radio" name="age" value="morethen40" id="morethen40" /> <label for="morethen400">i'm even older then 40 years</label>
</p>
<p>
in what continent do you live?<br />
<input type="radio" name="continent" value="europe" id="europe" /> <label for="europe">Europe</label><br />
<input type="radio" name="continent" value="Africa" id="Africa" /> <label for="Africa">Africa</label><br />
<input type="radio" name="continent" value="asia" id="asia" /> <label for="asie">Asia</label><br />
<input type="radio" name="continent" value="america" id="america" /> <label for="america">america</label><br />
<input type="radio" name="continent" value="australia" id="australia" /> <label for="australia">Australia</label>
</p>
</form>
[URL="http://tutoriliez.eb2a.com/test111.html"]test code[/URL]
If you want one of the options is checked by default, you add a checked="checked" as for check boxes, and voila!
Options list
The options list is another elegant way to make a choice between several possibilities:
This time, it works a little differently. We will use the tag <select> </ select> which indicates the beginning and the end of the list box.
It adds the name attribute to the tag to give a name to the list. For example "country":
<select name="pays">
And now, inside the <select> </select>, we will put multiple tags <option> </option> (one for each choice).
We add a value attribute to be able to identify what the visitor has chosen.
i'm sure this sounds familiar since it's made the same way as the bullted list the <ul>and <li>..
The principle is a bit different from what we've seen so far, but it is nonetheless understands very well.
Also new, we can not use checked = "checked" here, we must instead use the ... selected = "selected". It allows us to select checked as a default:
xhtml code :
<form method="post" action="traitement.php">
<p>
<label for="pays">in which country do you live ?</label><br />
<select name="country" id="country">
<option value="france"selected="selected">France</option>
<option value="spain">spain</option>
<option value="italy">Italy</option>
<option value="united kingdons">united kingdons</option>
<option value="canada">Canada</option>
<option value="u.s.a">u.s.a</option>
<option value="china">China</option>
<option value="japan">Japan</option>
</select>
</p>
</form>
[URL="http://tutoriliez.eb2a.com/test112.html"]test code[/URL]
But the list of options can do even better!
You can create groups of options within the list, thanks to the tag <optgroup> </optgroup>. You need to add the label attribute that allows you to name the group (not to be confused with the tag <label>!).
In our example, why not separate countries according to their continent?
xhtml code :
<form method="post" action="traitement.php">
<p>
<label for="country">in which country do you live ?</label><br />
<select name="country" id="country">
<optgroup label="Europe">
<option value="france">France</option>
<option value="spain">spain</option>
<option value="italy">Italy</option>
<option value="united kingdoms">united kingdoms</option>
</optgroup>
<optgroup label="America">
<option value="canada">Canada</option>
<option value="u.s.a">.s.a</option>
</optgroup>
<optgroup label="Asia">
<option value="china">China</option>
<option value="japan">Japan</option>
</optgroup>
</select>
</p>
</form>
[URL="http://tutoriliez.eb2a.com/test113.html"]test code[/URL]
It is quite useful, especially when you have a a large options list.
Now we will try to go even further.
Our goal is twofold: to ensure that our form is available (= understand) and design (= not too bad: - °)
We will do this in three steps:
- Set a tab order (accessibility)
- Set shortcut keys (accessibility)
- Organize the form into several areas (accessibility and design)
Set a tab order
This is the first of the points that we expected to see our lives easier.
As you may know, we can move in one form only through the "Tab" key (tab) to the left of your keyboard. Each time you press Tab, you go to the next field. Every time we do Shift + Tab, you return to the previous field.
The goal is to tell in what order in XHTML it must move in the form. For example, after the field "name" if I hit Tab I must fall on the field "name", then "email" etc. ...
We will use the tabindex attribute that can add all the tags of the form that has learned.
He should be put to a number value. Each form field should have a different number.
The numbers indicate the order in which it moves in the form: first, the No. 1 and No. 2, No. 3, etc. ...
Note:You do not have to put numbers in sequence. It is even advisable to leave "spaces" between the numbers in case you need to add more fields later.
Thus, it is quite possible to have 10 by 10: No. 10, No. 20, No. 30 etc ... It does not cost any more to count from 10 to 10, and if later we need to create a field No. 25, you shouldn't have a problem in this .
xhtml code :
<form method="post" action="traitement.php">
<p>
<label for="Name">what's your name ?</label><br />
<input type="text" name="name" id="name" tabindex="10" /><br />
<label for="mail">what's your mail adress ?</label><br />
<input type="text" name="mail" id="mail" tabindex="20" /><br />
<label for="country">in which country do you live ?</label><br />
<select name="country" id="country" tabindex="30">
<optgroup label="Europe">
<option value="france">France</option>
<option value="spain">spain</option>
<option value="italy">Italy</option>
<option value="united kingdoms">united kingdoms</option>
</optgroup>
<optgroup label="America">
<option value="canada">Canada</option>
<option value="u.s.a">.s.a</option>
</optgroup>
<optgroup label="Asia">
<option value="china">China</option>
<option value="japan">Japan</option>
</optgroup>
</select>
</p>
</form>
[URL="http://tutoriliez.eb2a.com/test114.html"]test code[/URL]
Try typing several times in a row "Tab", you will see that you will move in the order you
have defined with tabindex.
This is particularly useful for people who do not want or can not use a mouse (yes, it exists!).
Set shortcut keys
A shortcut key ("access key" in English) is a button that allows direct access to a field
your form without having to click with the mouse and without having to keep pressing "Tab"
frantically before falling on the field that you interest.
This is very convenient, is that XHTML allows you to select which keys will serve
shortcuts.
What is less clear is that the shortcuts are used differently depending on the browser:
- Firefox and Internet Explorer(Windows): it must be the Alt + shortcuts. If it does
not work, try Shift-Alt Shortcut. - Safari and IE-Mac (Macintosh): you must enter Ctrl + Shortcut.
To define a shortcut, you can use accesskey attribute, like tabindex can get
on all types of form fields have been seen.
You have to put value as the keyboard
to serve as a shortcut to the field.
In this example, the search field is available directly with the 3 button:
xhtml code :
<form method="post" action="traitement.php">
<p>
<label for="nom">whay's your name ?</label><br />
<input type="text" name="name" id="name" tabindex="10" /><br />
<label for="email">what's your mail ?</label><br />
<input type="text" name="email" id="email" tabindex="30" /><br />
<label for="recherche">What are you looking for on this site ? <em>(raccourci : 3)</em></label><br />
<input type="text" name="searching" id="searching" tabindex="40" accesskey="3" />
</p>
</form>
[URL="http://tutoriliez.eb2a.com/test115.html"]test code[/URL]
On Windows, it must therefore be Alt + 3 to get directly to the search box.
Mac, you have to Ctrl + 3 .
Note:The biggest problem of shortcut keys is that some characters are already used by the browser. If you use the same there will be conflict and your visitors can no longer use the shortcuts to which they are accustomed.
The ideal is to use numbers in a nutshell, they are usually used by very few browsers.
oh ya 1 last thing Be sure to indicate somewhere on the page what are shortcuts used because your visitors will not guessit
Organize the form into several zones
so what's the idea about this?
If you have a form quite large (and usually it will), it is easy for visitors to get lost in the mass of information he has to go. It is possible to group several fields XHTML with a theme between them.
We will use the tag <fieldset> </fieldset> to delimit a group of fields.
Inside this tag, you put your fields (your <input /> among others ...) and another tag: <legend> </legend>. This can give the name of the group.
got the idea? then you propably noticed something :
it got almost the same theory according to <optgroup> we just saw this ... But why just now used a attribute (label) to give a title to the group, and here we use a special tag <legend> x)
let's take a look at it in this example :
<form method="post" action="traitement.php">
<fieldset>
<legend>Your details</legend> <!-- title of the fieldset -->
<label for="name">what's your name ?</label><br />
<input type="text" name="name" id="name" tabindex="10" /><br />
<label for="email">what's your mail ?</label><br />
<input type="text" name="email" id="email" tabindex="20" /><br />
</fieldset>
<fieldset>
<legend>your desire</legend> <!-- title of the fieldset -->
<p>
what's your biggest desire :<br />
<input type="radio" name="desire" value="rich" id="rich" tabindex="30" /> <label for="rich">being rich</label><br />
<input type="radio" name="desire" value="famious" id="famious" tabindex="40" /> <label for="famious">become famious</label><br />
<input type="radio" name="desire" value="smart" id="smart" tabindex="50" /> <label for="smart">become even <strong>much</strong> more smarter</label><br />
<input type="radio" name="desire" value="other" id="other" tabindex="60" /> <label for="other">other things...</label><br />
</p>
<p>
<label for="precisions">if "other things", would you like to tell us what? :</label><br />
<textarea name="precisions" id="precisions" cols="40" rows="4" tabindex="70"></textarea>
</p>
</fieldset>
</form>
[URL="http://tutoriliez.eb2a.com/test116.html"]test code[/URL]
wp remain now the press the send(ok) button
We're almost there.
We've seen most of the elements that can be integrated in a form, but it misses the most important: the submit button!
Fortunately, it's very easy to create, especially since you already know the tag ...yes it's the <input />
Well, of course only one type of button was not enough for webmasters (too good to be true xDD ), it was necessary to create 3:
- The submit button: it triggers the form submission. Visitors find themselves automatically teletransporting the page indicated in the action attribute of the form (we saw at the beginning of this chapter).
A submit button is created with the attribute type = "submit". You can add a value attribute to change the text inside the button, but you can leave the default, it is also clear:
<input type="submit" /> - The reset button: it automatically resets all the form values. We must use this time attribute type = "reset"
<input type="reset" /> - The button-used-to-nothing: it is a button "generic" which does nothing special. The form is not sent, it does not reset, no nothing happens.
What interest? It will serve mainly to run scripts written in Javascript (another language that can be used on a web page, yes I know it is a lot of languages). We, we will not use it, but I will talk to you know it exists if you need them one day.
This time, I recommend you set the value attribute for it is known what is the button:
<input type="button" value="i-do-nothing" />
xhtml code :
<form method="post" action="traitement.php">
<fieldset>
<legend>Your details</legend> <!-- title of the fieldset -->
<label for="name">what's your name ?</label><br />
<input type="text" name="name" id="name" tabindex="10" /><br />
<label for="email">what's your mail ?</label><br />
<input type="text" name="email" id="email" tabindex="20" /><br />
</fieldset>
<fieldset>
<legend>your desire</legend> <!-- title of the fieldset -->
<p>
what's your biggest desire :<br />
<input type="radio" name="desire" value="rich" id="rich" tabindex="30" /> <label for="rich">being rich</label><br />
<input type="radio" name="desire" value="famious" id="famious" tabindex="40" /> <label for="famious">become famious</label><br />
<input type="radio" name="desire" value="smart" id="smart" tabindex="50" /> <label for="smart">become even <strong>much</strong> more smarter</label><br />
<input type="radio" name="desire" value="other" id="other" tabindex="60" /> <label for="other">other things...</label><br />
</p>
<p>
<label for="precisions">if "other things", would you like to tell us what? :</label><br />
<textarea name="precisions" id="precisions" cols="40" rows="4" tabindex="70"></textarea>
</p>
</fieldset>
<p>
<input type="submit" /> <input type="reset" />
</p>
</form>
[URL="http://tutoriliez.eb2a.com/test117.html"]test code[/URL]
wp that's pretty much it of course you can add some design in css to make it brighter ,add some colors center the form it self, well that i leave it to your imagination you already got what you need .
the tutoriel is over but there is still a need for closure which will be the next 1. i'll be posting it later
Reply With Quote
. Basically, the browser decides whether or not to scroll bars (it will if necessary).
Originally Posted by Cen
