Download - Cours formulaire html - niveau débutant
![Page 1: Cours formulaire html - niveau débutant](https://reader031.vdocuments.pub/reader031/viewer/2022031910/58efb9391a28ab15348b45a7/html5/thumbnails/1.jpg)
Akambi Fagbohoun
http://getbootstrap.com
Les formulaires HTML
http://twitter.com/afagbohoun
![Page 2: Cours formulaire html - niveau débutant](https://reader031.vdocuments.pub/reader031/viewer/2022031910/58efb9391a28ab15348b45a7/html5/thumbnails/2.jpg)
<form> <p>Texte à l'intérieur du formulaire</p> </form>
Création d’un formulaire
![Page 3: Cours formulaire html - niveau débutant](https://reader031.vdocuments.pub/reader031/viewer/2022031910/58efb9391a28ab15348b45a7/html5/thumbnails/3.jpg)
<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
![Page 4: Cours formulaire html - niveau débutant](https://reader031.vdocuments.pub/reader031/viewer/2022031910/58efb9391a28ab15348b45a7/html5/thumbnails/4.jpg)
<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>
<input type="password" name="pass" id="pass" />
</p>
</form>
Champ de saisie simple
![Page 5: Cours formulaire html - niveau débutant](https://reader031.vdocuments.pub/reader031/viewer/2022031910/58efb9391a28ab15348b45a7/html5/thumbnails/5.jpg)
<form>
<p>
<label for="ameliorer">
Comment pensez-vous que je puisse améliorer mon site ?
</label>
<br />
<textarea name="ameliorer" id="ameliorer" rows="10" cols="50">
</textarea>
</p>
</form>
Champ de saisie multiligne
![Page 6: Cours formulaire html - niveau débutant](https://reader031.vdocuments.pub/reader031/viewer/2022031910/58efb9391a28ab15348b45a7/html5/thumbnails/6.jpg)
<input type="email" />
<input type="url" />
<input type="tel" />
<input type="number" min="5"
max="20"/>
<input type="range" min="5"
max="20"/>
Champ de saisie enrichies
![Page 7: Cours formulaire html - niveau débutant](https://reader031.vdocuments.pub/reader031/viewer/2022031910/58efb9391a28ab15348b45a7/html5/thumbnails/7.jpg)
<input type="color" />
<input type="date" />
<input type="search" />
Champ de saisie enrichies
![Page 8: Cours formulaire html - niveau débutant](https://reader031.vdocuments.pub/reader031/viewer/2022031910/58efb9391a28ab15348b45a7/html5/thumbnails/8.jpg)
les éléments d’options
• les cases à cocher
• les zones d'options
• les listes déroulantes
![Page 9: Cours formulaire html - niveau débutant](https://reader031.vdocuments.pub/reader031/viewer/2022031910/58efb9391a28ab15348b45a7/html5/thumbnails/9.jpg)
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 />
<input type="checkbox" name="epinards" id="epinards" /> <label
for="epinards">Epinards</label><br />
<input type="checkbox" name="huitres" id="huitres" /> <label
for="huitres">Huitres</label>
</p>
</form>
![Page 10: Cours formulaire html - niveau débutant](https://reader031.vdocuments.pub/reader031/viewer/2022031910/58efb9391a28ab15348b45a7/html5/thumbnails/10.jpg)
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 />
<input type="radio" name="age" value="medium25-40" id="medium25-40" />
<label for="medium25-40">25-40 ans</label><br />
<input type="radio" name="age" value="plus40" id="plus40" /> <label
for="plus40">Encore plus vieux que ça ?!</label>
</p>
</form>
![Page 11: Cours formulaire html - niveau débutant](https://reader031.vdocuments.pub/reader031/viewer/2022031910/58efb9391a28ab15348b45a7/html5/thumbnails/11.jpg)
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>
<option value="royaume-uni">Royaume-Uni</option>
<option value="canada">Canada</option>
<option value="etats-unis">États-Unis</option>
</select>
</p>
</form>
![Page 12: Cours formulaire html - niveau débutant](https://reader031.vdocuments.pub/reader031/viewer/2022031910/58efb9391a28ab15348b45a7/html5/thumbnails/12.jpg)
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
![Page 13: Cours formulaire html - niveau débutant](https://reader031.vdocuments.pub/reader031/viewer/2022031910/58efb9391a28ab15348b45a7/html5/thumbnails/13.jpg)
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