Formulaires

Ceci est une ancienne révision du document !

Ils permettent à l'utilisateur de faire des choix, puis de les envoyer vers le serveur.
Ils nécessitent donc d'utiliser une technologie backend.

        
              <form method="POST" action="/actions/submit.php">
...
</form>

method correspond à la méthode HTTP qui sera utilisée lors de la soumission, et laisse le choix entre :
- GET, par défaut si non précisé ⇒ envoi en query string dans l'url
- POST, envoi dans le body de la requête
action permet de spécifier la ressource côté serveur qui recevra la requête et effectuera son traitement.

Ce sont les champs de saisie, dont le plus commun est le champ de type texte :

Propriétés communes

Propriété	Description
id	Identifiant, utilisé côté client
name	Nom, utilisé côté serveur pour la récupération des données
value	Valeur, valeur à l'initialisation
placeholder	Contenu d'aide à la saisie affiché
type	Pour un input, défini le type du champ : text par défaut
autofocus	Permet de donner le focus à l'un des champs
disabled	Désactive le champ
form	Permet de spécifier l'id de la form associée si le champ n'est pas un enfant DOM de la form

Contrôles natifs

Type Définition Résultat

texte

<input type="text" placeholder="Saisir votre nom">

Nombre

<input type="number" value="2" min="0" max="5">

Mot de passe

<input type="password">

Champ caché

<input type="hidden" value="12352">

Ne se voit pas...

Case à cocher

<input type="checkbox" checked>

Bouton radio

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

Fichier

<input type="file">

Reset

<input type="reset" value="Reset">

Bouton

<input type="button" value="Afficher">

Submit

<input type="submit" value="Valider">

Extensions HTML5

Type Définition Résultat

Email

<input type="email" value="mail@provider.com">

Téléphone

<input type="tel" placeholder="Téléphone ?">

Recherche

<input type="search" placeholder="Rechercher...">

URL

<input type="url" id="url" name="url">

Curseur

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

Date & heure

<input type="datetime-local" name="datetime" id="datetime">

Mois

<input type="month">

Heure

<input type="time">

Semaine

<input type="week">

Couleur

<input type="color" value="#79ACFF">

Autres champs

Type Définition Résultat

Zone de saisie multilignes

<textarea rows="5">Valeur initiale</textarea>

Liste déroulante

        
              <select id="simple" name="simple">
  <option>Banane</option>
  <option selected>Cerise</option>
  <option>Citron</option>
</select>

Liste standard

        
              <select id="standard" name="standard" size="4">
     <option>Banane</option>
     <option selected>Cerise</option>
     <option>Citron</option>
</select>

Liste multiple

        
              <select id="multi" name="multi" multiple size="4">
     <option>Banane</option>
     <option selected>Cerise</option>
     <option>Citron</option>
</select>

Liste avec groupes d'options

        
              <select id="multi" name="multi" multiple size="8">
  <optgroup label="fruits">
     <option>Banane</option>
     <option selected>Cerise</option>
     <option>Citron</option>
   </optgroup>
   <optgroup label="legumes">
     <option>Carotte</option>
     <option>Aubergine</option>
     <option>Pomme de terre</option>
   </optgroup>
</select>

Formulaires

Form

Champs

Input

Propriétés communes

Contrôles natifs

Extensions HTML5

Autres champs