H2 - P2019

Développement web

Cours 22 - 2016-02-01

HTML / PHP

Formulaires

Créer le formulaire

En HTML, un formulaire se créé avec le tag form

L'attribut action correspond à l'adresse de destination lorsque l'utilisateur va valider le formulaire

L'attribut method correpond à la méthode d'envoi des données

Exemple


<form action="#" method="post">
</form>

Les différents champs sont en général créés à l'aide d'inputs

Il existe des exceptions comme le select ou le textarea

Certains ne sont pas compatibles avec tous les navigateurs et l'affichage peut varier

Exemple


<form action="#" method="post">
    <input type="text" name="text" value="Mon text">

    <br>
    <input type="password" name="password" value="password">

    <br>
    <input type="search" name="search" value="search">

    <br>
    <input type="color" name="color" value="#ff0000">

    <br>
    <input type="date" name="date" value="1990-01-17">

    <br>
    <input type="month" name="month" value="2014-03">

    <br>
    <input type="week" name="week" value="2014-W12">

    <br>
    <input type="time" name="time" value="10:25">

    <br>
    <input type="email" name="email" value="toto@tata.com">

    <br>
    <input type="tel" name="tel" value="+33631446033">

    <br>
    <input type="url" name="url" value="http://google.com">

    <br>
    <input type="number" name="number" value="1337">

    <br>
    <input type="checkbox" name="checkbox" value="1">

    <br>
    <input type="radio" name="radio" value="value">

    <br>
    <input type="range" name="range" value="60" max="100" max="20">

    <br>
    <input type="file" name="file">

    <br>
    <select name="select" multiple>
        <option value="1">Toto</option>
        <option value="2">Tata</option>
        <option value="3">Tutu</option>
    </select>

    <br>
    <textarea name="textarea" cols="30" rows="10">Mon text</textarea>

    <br>
    <input type="hidden" name="hidden" value="value">

    <br>
    <input type="reset" name="reset" value="reset">

    <br>
    <input type="submit" name="submit" value="submit">
</form>

Les différents champs peuvent être organisés dans des fieldsets

La balise fieldset va créer un cadre englobant les champs

La balise legend permet de rajouter un titre au fieldset

Exemple


<form action="#" method="post">
    <fieldset>
        <legend>Legend</legend>
        <input type="text" name="name" value="value">
        <input type="submit">
    </fieldset>
</form>

La majorité des champs sont des inputs et ont plusieurs attributs

  • type correspond au type de champ
  • name correspond au nom du champ (nécessaire pour récupérer en PHP)
  • value correpond à la valeur
  • placeholder permet d'afficher un texte par défaut
    (non compatible IE 9)

Un input peut-être accompagné d'un label

Si l'attribut for du label correspond à l'id de l'input, cliquer sur le label aura pour effet de cliquer sur l'input

Dans le cadre des inputs de types checkbox et radio, le label peut contenir l'input

Il n'est plus nécessaire de mettre le for et l'id

Gérer les données

Il existe deux manière d'envoyer les données d'un formulaire, en GET et en POST

  • Les données en GET se trouvent dans l'URL
  • Les données en POST n'apparaissent pas dans l'URL

Pour les formulaires, il vaut mieux utiliser POST

En PHP il est possible de récupérer les données envoyées dans les variables $_POST ou $_GET selon la méthode d'envoi

Ce sont des tableaux associatifs

Les clés du tableau correspondent aux attributs name des champs

Les valeurs correspondent aux attributs value des champs

Exemple


<?php 
    echo '<pre>';
    print_r($_POST);
    echo '</pre>';
?>


<form action="#" method="post">
    <input type="text" name="name" value="value">
    <input type="submit">
</form>