Le document présente des exemples de création de formulaires HTML, incluant des champs de saisie simples, multiligne et enrichis. Il aborde également les éléments d'options tels que les cases à cocher, les boutons radio et les listes déroulantes. Enfin, il évoque la mise en forme des formulaires avec des fieldsets et des attributs supplémentaires.

1. Akambi Fagbohoun
http://getbootstrap.com
Les formulaires
HTML
http://twitter.com/afagbohoun

2. <form>
<p>Texte à l'intérieur du formulaire</p>
</form>
Création d’un formulaire

3. <form>
<p>
<label for="pseudo">Votre pseudo :</label>
<input type="text" name="pseudo" id="pseudo" placeholder="Ex : Zozor" size="30" maxlength="10" />
</p>
</form>
Champ de saisie simple

4. <form method="post" action="traitement.php">
<p>
<label for="pseudo">Votre pseudo :</label>
<input type="text" name="pseudo" id="pseudo" />
<br />
<label for="pass">Votre mot de passe :</label>
Champ de saisie simple

5. <form>
<p>
<label for="ameliorer">
Comment pensez-vous que je puisse améliorer mon site ?
</label>
<br />
Champ de saisie multiligne

6. <input type="email" />
<input type="url" />
<input type="tel" />
Champ de saisie enrichies

7. <input type="color" />
<input type="date" />
Champ de saisie enrichies

8. les éléments d’options
• les cases à cocher
• les zones d'options
• les listes déroulantes

9. Les cases à cocher
<form>
<p>
Cochez les aliments que vous aimez manger :<br />
<input type="checkbox" name="frites" id="frites" /> <label for=« frites">Frites</label>
<br />
<input type="checkbox" name="steak" id="steak" /> <label for="steak">Steak
haché</label><br />

10. Les zones d’options (boutons radio)
<form>
<p>
Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br />
<input type="radio" name="age" value="moins15" id="moins15" /> <label
for="moins15">Moins de 15 ans</label><br />
<input type="radio" name="age" value="medium15-25" id="medium15-25" /> <label
for="medium15-25">15-25 ans</label><br />

11. Les listes déroulantes
<form>
<p>
<label for="pays">Dans quel pays habitez-vous ?</label><br />
<select name="pays" id="pays">
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="italie">Italie</option>

12. Mise en forme des formulaires
<form>
<fieldset>
<legend>Vos coordonnées</legend> <!-- Titre du fieldset -->
</fieldset>
</form>
<input type="text" name="prenom" id="prenom" autofocus />
<input type="text" name="prenom" id="prenom" required />
Cadre et légende
Colonne

13. Bouton envoi et page de traitement
<form>
<input type="submit" value="Envoyer" />
</form>
<input type="text" name="prenom" id="prenom" autofocus />
<input type="text" name="prenom" id="prenom" required />
Bouton envoi
autres attributs à connaitre