HTML Formulaires Cheatsheet

Author

Patrick Reuter (version de travail non-exhaustive)

Published

April 17, 2025

Formulaires en HTML5 : Exemple

<form action="cible.php" method="get">
...
</form>
  • La balise form doit encapsuler tous les champs du formuaire.
  • L’attribut action définit la page cible du formulaire. Si laissé vide, ça envoie vers la page elle-même.
  • L’attribut method définit la forme d’envoi du formulaire,
    • get envoie les informations via l’URL (HTTP Get).
    • post envoie les informations via HTTP Post.
  • L’attribut enctype définit l’encodage. Pour l’envoie de fichiers, utilisez enctype="multipart/form-data", avec la méthode get.

Champs de formulaires « classiques »

<input type="text" name="prenom">
<textarea name="commentaire" rows="7" cols="22"> </textarea> dd
<input type="password" name="pass">
<input type="checkbox" name="voiture">
<input type="radio" name="transport" value="vélo">
<input type="radio" name="transport" value="bus">
<input type="radio" name="transport" value="autre">
<select name="chats">
    <option value="1">Un chat</option>
    <option value="2">Deux chats</option>
    <option value="plus">Plus que deux chats</option>
</select>
<input type="hidden" name="id" value="1"> (volontairement invisible)

Exemple complet simple

<form action="cible.php" method="get">
    Nom :
    <input type="text" name="nom">
    <input type="submit" value="Soumettre">
</form>
Nom :
  • A la soumission du formulaire, envoi vers la page cible.php
  • L’attribut name sera le nom du paramètre GET, et aura la valeur nom.
  • Donc, sur la page cible.php, on peut récupérer ce paramètre avec $_GET['nom'], qui aura la valeur nom.
  • Avec la méthode get, les paramètres sont visibles dans l’URL.

Regroupement et étiquetage des champs (<fieldset>, <legend>, <label>)

Exemple renvoyant vers la page cible.php avec la méthode post, en passant les paramètres des deux champs texte nom et prenom:

Identité
<form action="cible.php" method="post">
    <fieldset>
        <legend>Identité</legend>
            <label for="nom">Nom:</label>
            <input type="text" name="nom" id="nom">
            <label for="prenom">Prénom:</label>
            <input type="text" name="prenom" id="prenom">
            <input type="submit" value="Soumettre">
    </fieldset>
</form>

Avec la propriété for au label, c’est l’identifiant id qui est visé. Lorsqu’on clique sur le label, le champ correspondant devient actif.

Nouveaux types de champs <input .. > HTML5

<input type="email">

<input type="url">

<input type="color">

<input type="date">

<input type="datetime">

<input type="datetime-local">

<input type="number" min="0" max="10" value="4" step="2">

<input type="range" min="0" max="10" value="4" step="2">

<input type="search">

<input type="tel">

<input type="time">

<input type="month">

Nouveaux attributs de champs HTML5 (pour <input ..>)

Exemple : <input type="url" required="required" placeholder="https://www.u-bordeaux.fr">

required required="required", le champ doit être non-vide pour que le formulaire soit validé
placeholder p.ex. placeholder="email ici", affiche une valeur indicative dans le champ.
autocomplete autocomplete="on"ou autocomplete="off", avec l’historique du navigateur
autofocus autofocus="autofocus", à l’ouverture de la page, cela donne le focus au champ
pattern p.ex. pattern="[A-Za-z0-9]", expression régulière du format du champs.
min,max,step concerne number, range, date, datetime, datetime-local, month, week, time
…. ….

Exemples pour feuille de style CSS pour champs et pseudo-classes

input {
    border:3px solid #cccccc;
    font-size:20px; 
    border-radius:5px;
}
input:invalid {
    background-color: #f0dddd;
}