HTML5 / CSS3 Les formulaires 2 TI 4
Les pages Web construites en HTML permettent de présenter et de diffuser de
l’information en provenance d’un serveur Web vers un navigateur client. Un « dialogue »
client-serveur s’instaure lorsque le client peut à son tour envoyer des informations au
serveur, notamment par le biais de formulaires :
1. Recueil d’informations à l’aide de contrôles dans un formulaire HTML,
2. Envoi des informations au serveur,
3. Traitement des informations par le serveur (à l’aide d’un langage adapté tels que
PHP ou Perl),
4. Renvoi éventuel d’informations HTML au client (réponse, accusé de réception,
demande de précision…).
Une page peut comprendre un à plusieurs formulaires dans sa section <body>. Tous les
contrôles du formulaire doivent être insérés entre les balises <form>…</form>
Activité 1 :
On veut créez un formulaire d’authentification contenant un champ de texte pour saisir un
login et un champ password pour le mot de passe de huit caractères au maximum, chacun
étant précédé d’un label explicatif.
Ajoutez un bouton d’envoi et un bouton de réinitialisation.
Commençons pas à pas :
1- Ouvrir un nouveau fichier et l’enregistrer sous le nom
« fomulaire_authentification.html »
2- Commencer par la balise <form> </form> pour créer un formulaire.
3- Dans le bloc form , insérer les lignes suivantes :
<label for=""> Login : </label>
<input type="text" >
Exécuter et voir le résultat :
Ajouter une liaison entre le label et la zone de texte comme suit :
<label for="log"> Login : </label>
<input type="text" id="log" >
Le type « text » de la balise input permet de préciser que
le type des données à saisir dans cette zone est un texte.
4- Ajoutons maintenant le champ de mot de passe :
<label for=""> Mot de passe </label>
<input type="password" >
5- Ajouter les boutons envoyer et effacer :
<input type="submit" value="Envoyer">
<input type="reset" value="Effacer">
Le bouton de type submit permet d’envoyer les données
du formulaire au serveur pour un traitement par le script
spécifié dans l’attribut action de la balise <form
action= …>
Le bouton de type reset réinitialise tous les contrôles du formulaire à vide ou à leur valeur
par défaut.
A.S : 2024-2025 Page 1 sur 3 Mme BRIK Olfa
HTML5 / CSS3 Les formulaires 2 TI 4
6- Ajoutons les balises <fieldset> </fieldset> autour des éléments ajoutés dans le bloc
form.
<fieldset>
<label for="log"> Login </label> …
<input type="reset" value="Effacer"/>
</fieldset>
Enregistrer et voir le résultat. ………………………………………………….
Après la balise fieldset, ajouter la balise
suivante et voir le résultat :
<fieldset>
<legend> Authentification </legend>
Les autres types de champs qu’on peut
ajouter :
La zone de texte long : <textarea type="text" rows="3"
cols="25">valeur par défaut</textarea>
L’apparence de la zone de texte multilignes
est paramétrable soit à l’aide des attributs
rows (lignes) et cols (caractères en elle
permet de saisir tout type de données, sur
plusieurs lignes colonnes) ou en CSS
(propriétés width et height).
Les boutons radio : Sexe :
<input type="radio" value="M" checked >
ils permettent d’effectuer un seul choix Homme
(conditionné par une valeur identique pour <input type="radio" value="F" > Femme
l’attribut name) parmi des propositions
L’attribut facultatif checked détermine la
valeur préselectionnée.
Les cases à cocher : Jour(s) de disponibilité :
<input type="checkbox">Mercredi
elles permettent d’effectuer un à plusieurs <input type="checkbox"> Samedi
choix parmi un nombre limité de <input type="checkbox" > Dimanche
propositions
Statut :
<select name="statut">
La liste déroulante : <option value="1">Etudiant</option>
<option value="2">Professeur</option>
</select>
elle permet d’effectuer un seul choix parmi L’attribut value indique la valeur
un nombre élevé de propositions renvoyée.
Vérifient que le contenu saisi respecte le
Les zones de type « tel » , « email » et « url »
format requis et signalent l’erreur si ce n’est
A.S : 2024-2025 Page 2 sur 3 Mme BRIK Olfa
HTML5 / CSS3 Les formulaires 2 TI 4
pas le cas (empêchant la validation du
formulaire)
Les boutons d’envoie et de réinitialisation :
<input type="submit" value="Envoyer"> ou <button type=submit>Envoyer</button>
<input type="reset" value="Effacer"> ou <button type="reset">Effacer</button>
Application : Créer le formulaire suivant et l’enregistrer sous le nom [Link]
Projet : ajouter des formulaires dans votre site web
A.S : 2024-2025 Page 3 sur 3 Mme BRIK Olfa
