Les bases d'un formulaire
Créer un formulaire
<form method="post" action="">
</form>
Les libellés
<label for="pseudo">Votre pseudo</label>
Regrouper les champs
<fieldset>
<legend>Vos coordonnées</legend>
</fieldset>
Zone de texte monoligne
<input type="text" name="pseudo" id="pseudo" placeholder="Ex : Zozor" size="30" maxlength="10" value="" autofocus required />
Zone de mot de passe
<input type="password" name="pass" id="pass" />
Zone de texte multiligne
<textarea name="" id="" rows="" cols="">
Les zones de saisie enrichies
E-mail
<input type="email" />
Une URL
<input type="url" />
Numéro de téléphone
<input type="tel" />
Nombre
<input type="number" min="" max="" step="" />
Un curseur
<input type="range" min="" max="" step="" />
Couleur
<input type="color" />
Date
<input type="date" />
Recherche
<input type="search" />
Les éléments d'options
Les cases à cocher
<input type="checkbox" name="frites" id="frites" checked />
<input type="checkbox" name="steak" id="steak" />
Les zones d'options
<input type="radio" name="age" value="moins15" id="moins15" />
<input type="radio" name="age" value="medium15-25" id="medium15-25" />
<input type="radio" name="age" value="medium25-40" id="medium25-40" />
<input type="radio" name="age" value="plus40" id="plus40" checked />
Les listes déroulantes
<select name="pays" id="pays">
<option value="france">France</option>
<option value="espagne" selected>Espagne</option>
</select>
<select name="pays" id="pays">
<optgroup label="Europe">
<option value="france">France</option>
</optgroup>
<optgroup label="Amérique">
<option value="canada">Canada</option>
</optgroup>
</select>
Le bouton d'envoi
<input type="submit" value="Envoyer" />
<input type="hidden" value="" />
<input type="reset" value="Envoyer" />
<input type="image" src="" />
<input type="button" value="Envoyer" />