Formulaire d'une page Web

Numérique et sciences informatiques

ihm

Un formulaire HTML est indiqué par la balise <form> et contient notamment des champs de saisie appelés input de différents types ou select.

Les attributs value seront des variables utilisées en JavaScript ou côté serveur.

Le mode de passage des paramètres par un formulaire est défini par l'attribut method de la balise <form> ci-dessous :

<form method="........" action="fichier.php">

ICI LES ELEMENTS DU FORMULAIRE

</form>

méthode : GET

Si l'attribut de method est absent ou que sa valeur est GET alors les paramètres du formulaire sont passés au serveur via l'URL, en suivant la syntaxe précédente :

protocole://nom_ou_adresse_IP:port/fichier.php?paramètre1 = valeur1&...&paramètreN=valeurN

L'intérêt de la méthode GET est que toute l'information nécessaire au serveur est contenue dans l'URL.
Au niveau sécurité, on peut avoir un vrai problème concernant les mots de passe qui seraient affichés en clair dans l'URL ! Ce qui est évidemment par recommandé !

méthode : POST

Si l'attribut de method est POST, alors les paramètres sont passés au serveur de manière différente. Le navigateur Web forme bien la chaîne de caractères paramètre1 = valeur1&...&paramètreN=valeurN. Cependant, il envoie un message HTTP commençant par POST. Les paramètres sont alors placés dans le corps de la requête HTTP.

Les paramètres transitent dans le corps de la requête HTTP.

Mais, il est important de bien comprendre que lorsqu'on soumet un mot de passe dans un formulaire, on doit IMPERATIVEMENT utiliser la méthode POST, mais ceci n'est pas SUFFISANT, car le mot de passe circulera en clair dans la requête HTTP (c'est vérifiable en analysant des trames TCP, avec des logiciels du type WireShark). Pour cela, il faudra chiffrer les échanges avec HTTPS, vu précédemment. Les navigateurs modernes nous alertent s'il y a un champ de type password SANS HTTPS.



Les formulaires

Balise FORM
Balise Attribut Valeur code (exemple) Description Affichage
<form> method POST
GET		 
<form method = "post" action = "" enctype="">
</form>
 permet de préciser de quelle manière vont circuler les données
C'est important pour la récupération et le traitement PHP.		 -
action traitement.php 
<form method = "post" action="" enctype="">
 
</form>
 permet de préciser sur quelle page nous allons arriver après l'envoi du formulaire. -
enctype multipart/form-data 
<form method = "post" action=""
enctype = "multipart/form-data">
 
</form>
 permet de préciser le type mime utilisé. -


Balise LABEL
Balise Attribut Valeur code (exemple) Description Affichage
<label> for exemple 
<label for="exemple">Pseudo :</label>
 permet de préciser un nom identique à l'id d'une case de saisie <input> afin de les relier entre eux. Pseudo :


Balise INPUT
<input> name exemple 
<input type="text" name="nom1">
 permet de créer une case de saisie ayant pour nom : nom1.
<input> id exemple 
<input type="text" name="champ" id="exemple">
 permet de créer une case de saisie ayant pour id : exemple.
Cela permet de faire la liaison avec l'attribut for d'un label.
<input> required - 
<input type="text" name="champ" required>
 permet de rendre la saisie sur le champ obligatoire.
<input> maxlength 10 
<input type="text" name="champ" maxlength="10">
 permet de fixer la saisie à 10 caractères maximum.
<input> readonly - 
<input type="text"
permet de rendre le champ lisible seulement, sans modification possible.
<input> disabled - 
<input type="text" name="champ" disabled>
 permet de désactiver le champ.
<input> list exemple 
<input type="text" name="ville" list="France">
 permet de faire la liaison avec une balise datalist ayant pour id : France.
<input> pattern [0-9]{5} 
<input type="text" name="cp"  pattern="[0-9]{5}">
 expression régulière : 5 chiffres requis entre 0 et 9.
<input> title texte 
<input type="text" name="cp"  pattern="[0-9]{5}"
title="5 chiffres requis entre 0 et 9">
 le title permet de personnaliser le message d'erreur dans une infobulle.
<input> value texte 
<input type="submit" value="mon texte">
 l'attribut value permet de saisir du texte dans le champ (ou dans un bouton submit).
<input> placeholder texte 
<input type="text" placeholder="mon texte">
 l'attribut placeholder permet de pré-saisir du texte.
<input> type text 
<input type="text">
 permet de créer une case de saisie.
<input> type password 
<input type="password" name="nom">
 permet de créer une case de saisie avec saisie des caractères cryptés.
<input> type email 
<input type="email" name="nom">
 permet de créer une case de saisie acceptant uniquement la saisie d'une adresse email.
<input> type file 
<input type="file" name="nom">
 permet de créer une case de saisie pour l'upload de fichiers.
<input> type checkbox 
<p><input type =
"checkbox" name="choix" checked > Orange</p>
 permet de créer une case à cocher.
<input> type radio 
<p><input type="radio" 
name = "civilite" value = "m" > Homme</p>
 permet de créer une case à cocher unique.
<input> type date 
<input type="date" 
name = "dateDeNaissance">
 permet d'ouvrir un calendrier pour choisir une date.
<input> type range 
<input type="range" min="1" 
max="100" name="nombre">
 permet d'afficher une jauge.
<input> type tel 
<input type="tel" name="nombre">
 permet d'afficher un clavier numérique sur les smartphones.
<input> type color 
<input type="color" name="couleur">
 permet d'afficher une palette de couleur.
<input> type hidden 
<input type="hidden" id="cache" name="cache">
 permet d'afficher un champ caché.
<input> type submit 
<input type="submit">
 permet de valider un formulaire.
<input> type reset 
<input type="reset">
 permet de réinitialiser le formulaire.




Balise SELECT
Balise Attribut Valeur code (exemple) Description Affichage
<select> name exemple 
<select name="exemple">
 
</select>
 SELECT permet d'afficher une liste déroulante
<select> option exemple 
<select name="pays">
  <option name="pays" value="fr">France</option>
  <option name="pays" value="it">Italie</option>
  <option name="pays" value="es" selected>Espagne</option>
</select>
 La balise OPTION permet de proposer plusieurs choix à l'intérieur d'un SELECT
<select> optgroup exemple 
<select name="pays">
  <optgroup label="Europe">
  <option name="pays" value="fr">France</option>
  <option name="pays" value="it">Italie</option>
  <option name="pays" value="es">Espagne</option>
  </optgroup>
</select>
 La balise OPTGROUP permet de classer les options avec l'aide d'une indication écrite
<select> multiple - 
<select name="pays" multiple>
  <optgroup label="Europe">
  <option name="pays" value="fr">France</option>
  <option name="pays" value="it">Italie</option>
  <option name="pays" value="es">Espagne</option>
  </optgroup>
</select>
 L'attribut MULTIPLE permet d'effectuer plusieurs choix
<select> selected - 
<select name="pays">
  <optgroup label="Europe">
  <option name="pays" value="fr">France</option>
  <option name="pays" value="it">Italie</option>
  <option name="pays" value="es" selected>Espagne</option>
  </optgroup>
</select>
 L'attribut SELECTED permet de sélectionner une option par défaut.


Balise TEXTAREA
Balise Attribut Valeur code (exemple) Description Affichage
<textarea> name exemple 
<textarea name="exemple">
 
</textarea>
 La balise textarea permet d'afficher une zone de saisie
<textarea> rows 10 
<textarea name="exemple" rows="10"> 
</textarea>
 L'attribut rows de la balise textarea permet de régler la hauteur
<textarea> cols 10 
<textarea name="exemple" cols="10">
 
</textarea>
 L'attribut rows de la balise textarea permet de régler la largeur


Entraînement 1:

A l'aide des informations ci-dessus, réaliser le visuel du formulaire suivant :

formulaire
Formulaire

Entraînement 2:

Tester,modifier, améliorer et utiliser ce code pour réaliser un formulaire 

<form name="QCM">
    <fieldset>
        <legend>Qui était le père de Luke ?</legend>
        <input type="radio" name="choix" value="choix1"/>Anakin Skywalker<br>
        <input type="radio" name="choix" value="choix2"/>Han Solo<br>
        <input type="radio" name="choix" value="choix3"/>Jabba le Hutt<br>
    </fieldset>

    <fieldset>
        <legend>Qui est la princesse Leia ?</legend>
        <input type="radio" name="choix1" value="choix4"/>La sœur de Luke Skywalker<br>
        <input type="radio" name="choix1" value="choix5"/>La filleule de Yoda<br>
        <input type="radio" name="choix1" value="choix6"/>La femme d'Obi Wan Kenobi<br>
    </fieldset>

    <fieldset>
        <legend>Les planètes de Star Wars sont :</legend>
        <input type="checkbox" name="check1" value="choix7">Tatooine<br>
        <input type="checkbox" name="check2" value="choix8">Naboo<br>
        <input type="checkbox" name="check3" value="choix9">Sakaar<br>
        <input type="checkbox" name="check4" value="choix10">Mustafar<br>
    </fieldset>

    <div id="resultat"></div>
    <input type="button" value="Valider" onclick="tester(this.form)"/>
    <br>
    Votre score est : <span id="score"></span>
</form>

<script type="text/javascript">
    // Fonction pour modifier le texte d'un élément HTML
    function modifierText(id, texte) {
        // Utilisation de innerText pour changer le contenu texte de l'élément avec l'ID spécifié
        document.getElementById(id).innerText = texte;
    }

    // Fonction pour tester les réponses du formulaire
    function tester(form) {
        var toutEstOk = true;
        var score = 0;

        // Vérification de la première question
        if (form.choix[0].checked) {
            score++;
        } else if (form.choix[1].checked || form.choix[2].checked) {
            toutEstOk = false;
        } else {
            alert("Le QCM est mal rempli");
            return false;
        }

        // Vérification de la deuxième question
        if (form.choix1[0].checked) {
            score++;
        } else if (form.choix1[1].checked || form.choix1[2].checked) {
            toutEstOk = false;
        } else {
            alert("Le QCM est mal rempli");
            return false;
        }

        // Vérification des cases à cocher pour les planètes de Star Wars
        if (form.check1.checked && form.check2.checked && !form.check3.checked && form.check4.checked) {
            score++;
        } else {
            toutEstOk = false;
        }

        // Appel de la fonction pour afficher le score
        modifierText("score", score);

        // Affichage du message en fonction des résultats
        if (toutEstOk) {
            alert('Bravo ! Tout bon !');
        } else {
            alert('Aïe ! Il y a des erreurs...');
        }

        return false;
    }
</script>

Savoir faire

  • Analyser et modifier les méthodes exécutées lors d'un clic sur un bouton d'une page web.
  • Reconnaître quand et pourquoi la transmission est chiffrée.
  • Analyser le fonctionnement d'un formulaire simple.
  • Distinguer les transmissions de paramètres par les requêtes POST et GET.
  • Identifier les évènements.
  • Distinguer ce qui est exécuté sur le serveur ou sur le client et dans quel ordre

Fiche de cours