Les formulaires dans une page HTML:

Introduction

 

Les formulaires Html (FORMS  en anglais) sont l'ensemble des composants appelés champs qui permettent à l'utilisateur d'entrer des informations, d'exprimer ses choix, de saisir du texte …

Bien sûr, les réactions de l'utilisateur doivent être prévues à l’avance, càd doivent être programmés,

Ces programmes sont stockés sur le serveur pour que les données envoyées soient traitées par la suite.

 

La balise FORM

 

            Toute la partie formulaire de la page doit se trouver entre les marqueurs

<form>……</form>.

 

Les types de champs

 

Ø      Champ de texte simple : Cette zone permet de saisir un texte court  comme le nom & prénom.Etc.

 

<INPUT TYPE = "texte" name ="nom du champ" value ="texte initial"  size = longueur >.

·        Type= "texte" est facultatif, c'est le champ par défaut.

·        Name = nom du  champ (utile pour la programmation).

·        Value : pour donner un texte visible au champ.

·        Size : fixe la longueur visible du champ.

·        Maxlength : pour limiter le nombre de caractères

 

 

Exemple :

 

Taper votre nom : <input name = "nom" value="said">

 

Ø      Champ mot de passe : Pour saisir un mot de passe, on utilise le type password.

<input type = "password" name = "pass" maxlegth = taille >

 

Exemple :

Entrer votre mot de passe : <input type="password" maxlength=5>

 

Ø      Zone de texte multi-ligne : Pour permettre à l'utilisateur de saisir un texte de plusieurs lignes, on utilise le champ <TEXTAREA> :

<TEXTAREA ROWS = "n" COLS = "n" >

texte par défaut …</TEXTAREA>

 

·        ROWS précise le nombre de ligne

·        COLS  précise le nombre de colonnes 

 

Ø      Liste de sélection : Pour permettre un choix dans une liste de plusieurs options présentées sous forme de liste déroulante, on utilise la balise <SELECT>.

<select>

<option selected>élément 1 </option>

<option>élément 2 </option>

<option>élément 3 </option>

<option>élément 4 </option>

</select>

<option selected>élément 1 </option>

<option>élément 2 </option>

<option>élément 3 </option>

<option>élément 4 </option>

 

• <option> pour introduire chaque option de la liste.
• <option selected> l'option sélectionné par défaut.

 

Exemple :

 

Quel est votre niveau d'étude : 

<select>

<option selected>Bac </option>

<option>Deug</option>

<option>Licence</option>

<option>BTS</option>

</select>

 

Ø      Case à cocher : A fin de répondre à des questions de type  Oui/Non ou Vrai/Faux , on utilise des boîtes à cocher avec la balise :

 

<input type = "checkbox" name= "nom" checked> Question.

 

• <input type = "checkbox"> est indispensable pour la case à cocher.
• Name = "…." : chaque case doit avoir un nom spécifique.
• Checked : pour cocher par défaut une case.

 

Exemple :

 

<input type = "checkbox" name="nouveau"> Nouveau utilisateur 

<input type = "checkbox" name="nouveau">Déjà inscrit 

 

 

Ø      Boutons de sélection : Le type radio est utilisé lorsque l'utilisateur doit faire un choix entre plusieurs. L'utilisateur pourra donc sélectionner qu'un seul bouton radio.

 

<input type = "radio" name= "nom" value = ".." checked> Option 1.

<input type = "radio" name= "nom" value = ".." checked> Option 2.

 

• Le type = "radio" est indispensable pour insérer le bouton.
• Le name  = "nom" : l'ensemble des boutons doit porter le même nom.
• Value = ".." chaque bouton radio doit posséder une valeur différente.
• Checked : pour désigner le bouton sélectionné par défaut.

 

 

Exemple :

 

Vous êtes : 

<input type = "radio" name = "titre" value = "t1" checked> Mr

<input type = "radio" name = "titre" value = "t2" > Mlle

<input type = "radio" name = "titre" value = "t3" > Mde

 

 

 

Ø      Boutons de commande :

Les boutons de commande permettent à l'utilisateur de déclencher des événements auxquels seront rattachées  des fonctions.

 

• Bouton commun

<input type = "button" name =" nom" value="Cliquer">

 

La valeur "value" est le texte qui apparaît sur le bouton .

 

• Bouton  de validation

Il permet d'envoyer les informations saisies dans les champs, soit sur le serveur pour être traités, soit en message électronique.

<input type = "submit" name =" nom" value= "Envoyer">

 

 

• Bouton de rénitialisation

Ce bouton permet de vider les champs saisis

<input type = "reset" name =" nom" value= "Effacer">

 

 

 

Complément : transmission de données

La balise Form possède plusieurs attributs permettant de spécifier que doit être fait lors de la validation du formulaire.

 

• Action : <FORM action ="URL"> permet d'indiquer l'URL qui va recevoir les informations lorsqu'on clique sur envoyer .

L'URL est l'adresse d'un programme qui va récupérer les données et les traiter . Si le champ action est absent, l'URL sera celle du document  courant.