Formation PUB010 : PHP, 2018 Traiter un formulaire Web avec PHP

Bien utiliser les id et les name


Les balises d'un formulaire Web peuvent comprendre un attribut id et un attribut name. Chacun de ces attributs joue un rôle important.

▼Publicité

Attribut id

L'attribut id a comme rôle d'identifier un élément de façon unique dans une page Web.

À l'intérieur du formulaire, l'attribut id permettra de faire le lien entre les libellés et les zones de saisie. Ce lien permet d'étendre la zone cliquable. Ainsi, un clic sur le libellé donne le focus à la zone de saisie.

Fichier où le formulaire est défini

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

    <p>

        <label class="aligne" for="usager">Usager :</label>

        <input type="text" id="usager" name="usager" />

    </p>

    <p>

        <label class="aligne">Sexe:</label>

        <input type="radio" name="sexe" id="femme" value="femme" />

        <label for="femme">Femme</label>

        <input type="radio" name="sexe" id="homme" value="homme" />

        <label for="homme">Homme</label>

    </p>

    <p>

        <input class="aligne" type="submit" value="Soumettre" name="soumettre" />

        <input type="button" value="Annuler" name="annuler" />

    </p>

</form>

Attribut name

L'attribut name, en plus de rendre les boutons radio mutuellement exclusifs, trouvera son utilité lors du traitement du formulaire.

Ex :

Fichier où le formulaire est défini

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

    <p>

        <label class="aligne" for="usager">Usager :</label>

        <input type="text" id="usager" name="usager" />

    </p>

    <p>

        <label class="aligne">Sexe:</label>

        <input type="radio" name="sexe" id="femme" value="femme" />

        <label for="femme">Femme</label>

        <input type="radio" name="sexe" id="homme" value="homme" />

        <label for="homme">Homme</label>

    </p>

    <p>

        <input class="aligne" type="submit" value="Soumettre" name="soumettre" />

        <input type="button" value="Annuler" name="annuler" />

    </p>

</form>

Fichier où le formulaire est traité (traitement.php)

<?php

    // Remarquez l'utilisation de htmlspecialchars() pour prévenir l'exécution de balises <script> qui auraient pu être entrées dans le formulaire

    if(isset($_POST['soumettre'])) {   // si le bouton a été cliqué

        echo "<p>Bonjour, {htmlspecialchars($_POST['usager'])}</p>";   // affichera le contenu de la boîte de saisie

        echo "<p>Votre sexe : {htmlspecialchars($_POST['sexe'])}</p>";   // affichera l'attribut value de l'option choisie

    }

?>

Pour plus d'information

« Les formulaires ». Site du zéro. http://www.siteduzero.com/tutoriel-3-13596-les-formulaires.html

« Transmettre des données avec les formulaires ». Site du zéro. http://www.siteduzero.com/tutoriel-3-14543-transmettre-des-donnees-avec-les-formulaires.html

« Bonnes pratiques de la conception de formulaires web ». Innova Blog. http://innovablog.com/analyse/formulaires-web-bonnes-pratiques-conception-ajax-1/

« Aligner ses formulaires sans tableaux ». Site du zéro. http://www.siteduzero.com/tutoriel-3-33971-aligner-ses-formulaires-sans-tableaux.html

Dernière révision le 18 août 2017
Merci de partager !

Site fièrement hébergé chez A2 Hosting.

Soumettre