Make a form in HTML, CSS, PHP

[Gyan Guru]

Introduction to HTML form CSS PHP

In this tutorial, we will discuss the creation of forms (x) html so that you are able to create a form for the pages of your website not only, but also that this form completely respects the standards (x) html and uses a CSS style file for formatting. And we will just complicate the layout CSS so you can hopefully learn some interesting things in CSS.
Then how to handle data sent through this form, as an example for different cases, because Recovered data in a form of a web page can be treated in many ways depending on what we want done.

A form will be divided into three parts: the form of tags beginning and end of the form, the elements in which visitors will enter the information (fields, lists, etc.). And a submit button (or image) which sends information to the server. There are also data processing once sending the completed form, that is external to the form but will also be discussed in this tutorial.

Explanations

1. Preview Form final

Let us first what you'll learn to do through this tutorial:

As you can see, we'll create a little of all types of fields used in a form so that HTML forms have more secrets for you.

2. tags form

We will first create the form with the appropriate <form> it.
To create a form, you must specify a method to upload one hand (to choose between "get" and "post") and the URL of the script that will receive the form data. The results in the HTML:

<form method="post" action="traitement.php"> 
</ form>

On this example, the data will be sent to file "traitement.php, we'll use later. All elements of the form will be placed between the start tag <form...> and end tag </ form>.


3. Creating blocks and coordinated message

As you saw on the picture showing the final result, we will divide our form into two main blocs: "details" and "message" with a title for each block. For this we will create two <p> elements on which we will provide a class "title" for formatting CSS thereafter.
And our two fields will be created with elements <fieldset> on which we will provide an attribute "id" to shape up later.

Our code becomes:

<form method="post" action="traitement.php"> 
<p class="titre"> Information </ p> 
<fieldset id="coordonnees"> 
</ fieldset> 
<p class="titre"> Message </ p> 
<fieldset id="message"> 
</ fieldset> 
</ form>

[Gyan Guru]

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:

<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:

<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:

<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:

<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>.

<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:

<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.