Les formulaires

1) Introduction:

Dans ce chapitre nous allons apprendre à créer des formulaires.  Si vous ne connaissez pas ce que c’est un formulaire, eh bien ce n’est pas grave, regardez juste au-dessous, c’est ce qu’on appelle formulaire.

Vous voyez ? C’est génial hein ?
Mon but, c’est de faire en tel sorte que vous puissiez réaliser quelque chose de semblable.

2) Création d’un formulaire :

Pour créer un formulaire on utilise la balise form.

 Syntaxe : <form>formulaire</form>.

Une chose que vous devez savoir : ce qu’un formulaire n’est pas fait pour être dans une page web et le regarder  comme beauté. Il est plutôt fait pour être envoyé. Pour ce là, il y a des choses que nous allons ajouter dans la balise form.

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

Method détermine la méthode que les données vont être envoyées. Vous pouvez utiliser soit post comme on l’a fait ou get.
Action indique l’adresse de la page ou de programme qui va traiter les données envoyées. Ici dans notre cas, les données sont traitées par la page traitement.php.

Si vous voyez, on a choisi traitement.php pour traiter nos données. Mais pourquoi pas traitement.html ?

Eh bien ! C’est juste parce que le langage html n’a pas la puissance de traiter des données. Donc vous avez besoin d’apprendre un autre langage : le PHP par exemple ; pour voir l’importance des formulaires.

 Ici nous allons apprendre comment créer un formulaire mais pas comment traiter les données d’un formulaire.

 3) zones de saisie

Ici, on va vous parler de 2 types de zone de saisie : zone de saisie de texte à une ligne qui nous permet de saisir juste une ligne et le zone de saisie multiligne qui nous permet de saisir  qui nous permet de saisir plusieurs lignes.

3.1  Zone de saisie à une ligne

    Pour insérer une zone de saisie, on utilise la balise input. Une fois que vous mettrez cette balise <input> dans bloc-notes ou notepad++  et vous l’enregistrez en le donnant une extension html, vous verrez l’apparition d’une zone de saisie. Mais ceci n’a pas de valeur car on n’arrivera pas à traiter les données qui seront saisies au niveau de cette zone de saisie. Pour cela nous devons la donner certaines valeurs qui nous permettront de traiter les données qui seront entrées.

Et voici la syntaxe :

<input type="text" name="nom"/>

Vous pouvez ajouter une derniere option qui est value.

La synataxe deviendra :  <input type="text" name="nom" value="valeur "/>

type : montre le type des données qui seront saisie. Ici  nous avons choisie text comme type, ce qui montre que les données que nous allons saisir seront un texte visible.

Si vous vous voulez que vos données apparaissent sous forme des points, ce qu’on utilise souvent dans les zones de saisie des mots de passe, il vous suffit de changer text par password. Pour cela la syntaxe deviendra :

<input type="password" name="nom"/>

name:  il permet de distinguer les données entrées lors du traitement de la page. Par exemple ici, quand il traite les données, il saura que les données  entrées ici s’agissent du nom.

Une chose vous manque, quand un visiteur entre sur votre site, il ne saura pas ce qu’il doit mettre dans votre zone de saisie. Pour cela vous devez l’indiquer qu’ici il s’agit de mettre telle chose. Donc moi je préfère qu’on met  la balise label pour résoudre ce tache.

Syntaxe : <label>Votre nom : <input type="text" name="nom" /></label>

3.2) Zone de saisie multiligne

Pour la zone de saisie multiligne, on utilise la balise textarea. Et surtout il ne faut pas oublier de déterminer les nombres de lignes et les nombres de colonnes en utilisant successivement rows et cols.

Syntaxe : <textarea name="reponse" rows="X" cols="Y"></textarea>

 X et Y étant des entiers naturels

Exemple :
Demo : 

4) les cases à cocher et les zones d’options : 

Il vous suffit de retourner sur notre fameuse balise input et prendre checkbox pour type (cas de case à cocher) et radio pour type cas de zone d’options.

Exemple :

Demo :

5) Les listes déroulantes:

Pour insérer une liste déroulante, 2 balises sont importantes: la balise select et la balise option

 Syntaxe :

<label>

<select name="nom_de_la_sélection">
               <option value="valeur1_à_sélectionner">1^er_mot_à_sélectionner</option>
               <option value=" valeur2_à_sélectionner ">2eme_mot_à_sélectionner </option>
                ………
               <option value=" valeurn_à_sélectionner "> nième_mot_à_sélectionner </option>

</select>

</label>

 Exemple :

6) bouton de parcours, de validation et d’effacement: 

     Il vous suffit de retourner sur notre fameuse balise input et prendre reset pour type (cas d’effacer le contenue du formulaire), submit pour type (cas d’envoie des données du formulaire) et file pour le parcours sans oublier de déterminer l’id. Exemple :

Demo :

Wo msomo wahe darasa yinu wukaza pvanu. Marahaba mendji howustahamilifu wahanyu ha hurega le bure.