HTML 4 : FORMULAIRE html

1. Balise d'ouverture d'un formulaire
Les FORMULAIRES sont certainement le moyen le plus simple et le plus utilisé pour recueillir des données à propos des utilisateurs du site. Cependant, on touche aux limites du html. En effet, si l’on peut créer des formulaires en html, on ne peut en revanche ni stocker ni utiliser les données du formulaire avec ce langage.

Il sera possible d'utiliser les données :
  • En local, c'est-à-dire que les données disparaîtront quand on quittera la page web. On utilisera alors le langage javascript ;
  • Sur Internet, avec la programmation d'un côté serveur (langages PHP, Django, etc.).
Dans tous les cas, le formulaire est généré entre les balises :
                            
<form method="#" action="#"></form>
                            
                        

Les paramètres de cette balise ne sont nécessaires que pour un envoie vers un serveur distant :
  • Le paramètre action va servir à indiquer où les informations recueillis dans le formulaire doivent être envoyées en vue de leur traitement ;
  • Le paramètre method va lui spécifier de quelle manière doit être envoyées les données :
    • Valeur GET : les données vont transiter via l'URL de la page (données visibles) ;
    • Valeur POST : les données ne transitent pas dans l'URL (données invisibles).
2. Créer un formulaire simple
                            
<form method="#" action="POST">
    <p>
        <label for="pseudo">Entrez votre pseudo :</label>
        <input type="text" name="pseudo">
        <br>
        <label for="mdp">Mot de passe :</label>
        <input type="password" name="mdp">
    </p>
</form>
                            
                        

Avant saisie :


Après saisie :


Remarque : le mot de passe n'est pas visible lors de la saisie, c'est grâce au type de la balise <input>.
3. Créer une zone de saisie multiligne
                            
<form method="#" action="POST">
    <p>
        <label for="commentaire">Laissez votre commentaire ici :</label>
        <br>
        <textarea name="commentaire" id="commentaire" cols="30" rows="10">
        </textarea>
    </p>
</form>
                            
                        

Remarque : cols et rows permettent de donner la taille de la zone de saisie au départ, mais elle reste extensible par la suite.
4. Créer un checkbox
                            
<form method="#" action="POST">
    <p>
        Tâche à faire : <br><br>
        <input type="checkbox" name="tache1" id="tache1"><label for="tache1">Ranger ma chambre</label><br>
        <input type="checkbox" name="tache2" id="tache2"><label for="tache2">Faire les courses</label><br>
        <input type="checkbox" name="tache3" id="tache3" checked><label for="tache3">Faire mes devoirs</label><br>
        <input type="checkbox" name="tache4" id="tache4"><label for="tache4">Aider mon petit frère</label><br>
    </p>
</form>
                            
                        


Remarque : en ajoutant checked dans la balise <input>, la checkbox générée aura le case sélectionnée "validée".
Dans ce type de formulaire, vous pouvez cocher plusieurs cases à la fois.
5. Créer un radio-bouton
                        
<form method="#" action="POST">
<p>
    Vous êtes : <br><br>
    <input type="radio" name="genre" id="homme" checked><label for="homme">Un homme</label><br>
    <input type="radio" name="genre" id="femme"><label for="femme">Une femme</label><br>
</p>
</form>
                        
                    
Remarque : à la différence d'un checkbox, dans un radio-bouton, vous ne pouvez pas cocher plusieurs cases en même temps.
6. Créer une sélection
                        
<form method="#" action="POST">
<p>
    <label for="pays">Sélectionnez votre pays dans la liste :</label>
    <br><br>
    <select name="pays" id="pays">
        <optgroup label="Europe">
            <option value="belgique">Belgique</option>
            <option value="france">France</option>
            <option value="italie">Italie</option>
        </optgroup>
        <optgroup label="Afrique">
            <option value="algerie">Algérie</option>
            <option value="benin">Bénin</option>
            <option value="egypte">Egypte</option>
        </optgroup>
    </select>
</p>
</form>
                        
                    
7. Envoyer un formulaire
Une fois les formulaires remplies, il est nécessaire de les envoyer :
  • En local à la page : avec le langage javascript ;
  • Sur un serveur distant : avec de la programmation serveur (PHP, Django, etc.) en vue de renseigner potentiellement une base de données.
Pour envoyer les données, on va créer un bouton.
                            
<form method="#" action="POST">
<p>
    Vous êtes : <br><br>
    <input type="radio" name="genre" id="homme" checked><label for="homme">Un homme</label><br>
    <input type="radio" name="genre" id="femme"><label for="femme">Une femme</label><br>
</p>
<input type="submit" value="Envoyer">
</form>
                            
                        
Le bouton <input type="submit"> génère un bouton, qui sera renseigné par le paramètre value.