4. Create radio input (box to choose)
For the choice of civility, we will create radio buttons type, ie single choice. When you make a choice, the choice selected previously will not be free. They are created with the tag <input type = "radio", a name name = "Gender" and a value = "value". You can even use checked = "checked" on a box if you want to be selected by default. Then close the tag with />.
The value is what your script processing form recover, so be sure to avoid any special character ...
So we added three of these cases (of the same name for one choice is possible), preceded by a <label> element, which is the label of the field as its name suggests. We will each field that will require a description of the previous one. Finally, it includes a <p> with an id that we use in the CSS again, so you will understand its value later. Our code becomes:
Code:
<form method="post" action="traitement.php">
<p class="titre"> Information </ p>
<fieldset id="coordonnees">
<p id="civilite"> <label> Title: </ label>
<input type = "radio" name = "Gender" value = "M." /> M.
<input type="radio" name="civilite" value="Mlle" Miss />
<input type="radio" name="civilite" value="Mme" Ms. />
</ p>
</ fieldset>
<p class="titre"> Message </ p>
<fieldset id="message">
</ fieldset>
</ form>
5. Create text fields
The fields are text fields to a line in which we can enter text: name, address, zip code, city on the way.
This text fields are not very complicated to implement, you must first create one <input type = "text", then enter a name with name = "name" and a size (length) with size = "30". But default is optionally possible with value = "value" and a number of characters with maxlength = "100" for example.
In our form, we will precede each of the four text field of a label and then go back on line after each field with <br/>, which donenra this:
Code:
<form method="post" action="traitement.php">
<p class="titre"> Information </ p>
<fieldset id="coordonnees">
<p id="civilite"> <label> Title: </ label>
<input type = "radio" name = "Gender" value = "M." /> M.
<input type="radio" name="civilite" value="Mlle" Miss />
<input type="radio" name="civilite" value="Mme" Ms. />
</ p>
<label> Name: </ label>
<input type="text" name="name" size="30" /> <br />
<label> Address: </ label>
<input type="text" name="adresse" size="30" /> <br />
<label> Postal Code: </ label>
<input type="text" name="codepostal" size="30" /> <br />
<label> City: </ label>
<input type="text" name="ville" size="30" /> <br />
</ fieldset>
<p class="titre"> Message </ p>
<fieldset id="message">
</ fieldset>
</ form>
6. Create a list of choices
We will then create a predefined list containing countries will require that the user choisisseun in the list.
To create the list you must insert a <select which put on a name name = "country" that we will recover its value for the treatment of the form. Then for each option list, we must create a <option with a value = "value" and close it with </ option>. Between the two (<option> and </ option>), put the value of the list for the user. Then in last place, close the tag </ select>.
With the list added, will now this:
Code:
<form method="post" action="traitement.php">
<p class="titre"> Information </ p>
<fieldset id="coordonnees">
<p id="civilite"> <label> Title: </ label>
<input type = "radio" name = "Gender" value = "M." /> M.
<input type="radio" name="civilite" value="Mlle" Miss />
<input type="radio" name="civilite" value="Mme" Ms. />
</ p>
<label> Name: </ label>
<input type="text" name="name" size="30" /> <br />
<label> Address: </ label>
<input type="text" name="adresse" size="30" /> <br />
<label> Postal Code: </ label>
<input type="text" name="codepostal" size="30" /> <br />
<label> City: </ label>
<input type="text" name="ville" size="30" /> <br />
<label> Country: </ label>
<select name="pays">
<option value="france"> France </ option>
<option value="belgique"> Belgium </ option>
<option value="suisse"> Switzerland </ option>
</ select>
</ fieldset>
<p class="titre"> Message </ p>
<fieldset id="message">
</ fieldset>
</ form>
7. Create checkbox (checkboxes)
Now we will add check boxes. The difference with the input type radio, is that the choice may be multiple here. Please tick as you see fit. Simply create an element <input type = "checkbox" and as we recover the values checked in a variable table, we will name them all name = "interest []" and give them a value with value = "value" .
The code with our party boxes containing Ã*cocher the center of interest will be done with this code:
Code:
<form method="post" action="traitement.php">
<p class="titre"> Information </ p>
<fieldset id="coordonnees">
<p id="civilite"> <label> Title: </ label>
<input type = "radio" name = "Gender" value = "M." /> M.
<input type="radio" name="civilite" value="Mlle" Miss />
<input type="radio" name="civilite" value="Mme" Ms. />
</ p>
<label> Name: </ label>
<input type="text" name="name" size="30" /> <br />
<label> Address: </ label>
<input type="text" name="adresse" size="30" /> <br />
<label> Postal Code: </ label>
<input type="text" name="codepostal" size="30" /> <br />
<label> City: </ label>
<input type="text" name="ville" size="30" /> <br />
<label> Country: </ label>
<select name="pays">
<option value="france"> France </ option>
<option value="belgique"> Belgium </ option>
<option value="suisse"> Switzerland </ option>
</ select>
<p id="interets"> <label> Places of interest: </ label>
<input type="checkbox" name="interets[]" value="sport" /> Sport
<input type="checkbox" name="interets[]" value="cinema" Movies /> <br />
<input type="checkbox" name="interets[]" value="internet" Internet />
<input type="checkbox" name="interets[]" value="voyages" /> Travel
</ p>
</ fieldset>
<p class="titre"> Message </ p>
<fieldset id="message">
</ fieldset>
</ form>
8. Create a text box
A text box is an area where you can type text freely and on several lines, unlike the text field which is limited and on a single line.
Its creation is simple enough, we must create a <textarea, add a name with name = "comments" and possibly a number of rows rows = "5" and columns cols = "40". Finally it will close with </ textarea>.
You can also put a default text inside, for that place between <textarea...> and </ textarea>.
Code:
<form method="post" action="traitement.php">
<p class="titre"> Information </ p>
<fieldset id="coordonnees">
<p id="civilite"> <label> Title: </ label>
<input type = "radio" name = "Gender" value = "M." /> M.
<input type="radio" name="civilite" value="Mlle" Miss />
<input type="radio" name="civilite" value="Mme" Ms. />
</ p>
<label> Name: </ label>
<input type="text" name="name" size="30" /> <br />
<label> Address: </ label>
<input type="text" name="adresse" size="30" /> <br />
<label> Postal Code: </ label>
<input type="text" name="codepostal" size="30" /> <br />
<label> City: </ label>
<input type="text" name="ville" size="30" /> <br />
<label> Country: </ label>
<select name="pays">
<option value="france"> France </ option>
<option value="belgique"> Belgium </ option>
<option value="suisse"> Switzerland </ option>
</ select>
<p id="interets"> <label> Places of interest: </ label>
<input type="checkbox" name="interets[]" value="sport" /> Sport
<input type="checkbox" name="interets[]" value="cinema" Movies /> <br />
<input type="checkbox" name="interets[]" value="internet" Internet />
<input type="checkbox" name="interets[]" value="voyages" /> Travel
</ p>
</ fieldset>
<p class="titre"> Message </ p>
<fieldset id="message">
<textarea name="comments" rows="5" cols="40"> </ textarea>
</ fieldset>
</ form>
9. Creating submit buttons and reset
We can only create a button to send the form, which will trigger the action of the form (remember the file traitement.php ...). To do this simply create a <input type = "submit" and give it a value that is displayed on the button with value = "Send" for example, then close the tag of course.
In the same way we can create a button <input type = "reset" which will erase the entire contents of the form fields to start from scratch. We will then value value = "Retry". We will put these two buttons in a <p> </ p> with an id set to apply a style sheet in Part 2 of the tutorial.
Here is the complete code of the form:
Code:
<form method="post" action="traitement.php">
<p class="titre"> Information </ p>
<fieldset id="coordonnees">
<p id="civilite"> <label> Title: </ label>
<input type = "radio" name = "Gender" value = "M." /> M.
<input type="radio" name="civilite" value="Mlle" Miss />
<input type="radio" name="civilite" value="Mme" Ms. />
</ p>
<label> Name: </ label>
<input type="text" name="name" size="30" /> <br />
<label> Address: </ label>
<input type="text" name="adresse" size="30" /> <br />
<label> Postal Code: </ label>
<input type="text" name="codepostal" size="30" /> <br />
<label> City: </ label>
<input type="text" name="ville" size="30" /> <br />
<label> Country: </ label>
<select name="pays">
<option value="france"> France </ option>
<option value="belgique"> Belgium </ option>
<option value="suisse"> Switzerland </ option>
</ select>
<p id="interets"> <label> Places of interest: </ label>
<input type="checkbox" name="interets[]" value="sport" /> Sport
<input type="checkbox" name="interets[]" value="cinema" Movies /> <br />
<input type="checkbox" name="interets[]" value="internet" Internet />
<input type="checkbox" name="interets[]" value="voyages" /> Travel
</ p>
</ fieldset>
<p class="titre"> Message </ p>
<fieldset id="message">
<textarea name="comments" rows="5" cols="40"> </ textarea>
</ fieldset>
<p id="buttons">
<input type="submit" value="Submit" />
<input type="reset" value="Recommencer" />
</ p>
</ form>
Conclusion of tutorial
You just see how to create an HTML form with the main fields used (text field, check box, list, etc.).. But for the moment we have not seen what the class id and placed on certain items or how to retrieve data in a script to do something.
Bookmarks