Html&CSS 3STI 1
Les formulaires
Activité :
a- Dans une nouvelle page html nommée «[Link] » , écrire et exécuter le code suivant puis
déduire le rôle de chaque balise :
<form>
<fieldset>
<legend> Authentification </legend>
<label >Login</label>
<input type="text"> <br><br>
<label > Mot de passe </label>
<input type="password" > <br><br>
<input type="submit" value="Envoyer">
<input type="reset" value="Effacer">
</fieldset>
</form>
………………………………
……………………….
……………….
…………………………………………………
………………………………….
………………………………………………………
………………………………………. ……………………………………………….
b- Relier les labels par les zones de textes correspondantes
Exemple : <label for="log"> Login : </label><input type="text" id="log" >
c- Ajouter l’attribut maxlength="6" pour la zone de texte du type password, puis essayer lors de l’exécution
d’entrer un mot de passe de longueur 7 caractères , que remarquez-vous ?
NB :On peut ajouter plusieurs autres attributs :
Attribut Description
placeholder permet d’afficher un exemple de la valeur attendue en gris clair directement dans le champ
disabled indique si le champ doit être désactivé
readonly indique si le champ peut être édité ou non
required indique que le champ est obligatoire à saisir
value La valeur par défaut du champ
maxlength le nombre maximal de caractères à saisir
size définit la largeur de la zone de texte
hidden Les champs de ce type sont invisibles sur la page.
Lycée Mourouj 6 15 Enseignante : Monia CHENINI
Html&CSS Annexe formulaire 3STI 1
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…).
Les types de champs qu’on peut ajouter :
La zone de texte long : <textarea type="text" name="lib" 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" name="sexe" value="M"
checked > Homme
<input type="radio" name="sexe" value="F" >
ils permettent d’effectuer un seul choix (conditionné par une
Femme
valeur identique pour l’attribut name) parmi des propositions
L’attribut facultatif checked détermine la valeur préselectionnée.
Jour(s) de disponibilité :
Les cases à cocher : <input type="checkbox" name="jour[]" value="1">
Mercredi
<input type="checkbox" name="jour[]" value="2">
elles permettent d’effectuer un à plusieurs choix parmi un
Samedi
nombre limité de propositions ; les choix effectués peuvent être
<input type="checkbox" name="jour[]" value="3">
stockés dans un tableau (attribut name ci-contre) ou chaque case Dimanche
peut avoir sa propre valeur de l’attribut name
Statut :
La liste déroulante : <select name="statut">
<option value="1">Etudiant</option>
<option value="2">Professeur</option>
</select>
L’attribut value indique la valeur renvoyée.
elle permet d’effectuer un seul choix parmi un nombre élevé de
propositions
La liste déroulante avancée : <input list=ville >
<datalist id=ville>
<option value="TUNIS"></option>
<option value="Bizerte"></option>
<option value="Nabeul"></option>
</datalist>
Vérifient que le contenu saisi respecte le format requis
Les zones de type « tel » , « email » et « url » et signalent l’erreur si ce n’est 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>
Lycée Mourouj 6 16 Enseignante : Monia CHENINI
Html&CSS 3STI 1
Application
1- Créer la page web suivante et l'enregistrer dans votre répertoire avec le nom
« [Link] »
Exemple :
Niveau est de type nombre
compris entre 1 et 4 (min =
1 , max=4)
Thème : présente la liste
suivante
2- Modifier les dimensions , les marges , l’habillage et appliquer des mises en
forme pour les polices, les bordures et les arrière-plans des différents
éléments de formulaires.
Lycée Mourouj 6 17 Enseignante : Monia CHENINI