Correction TP3
Exercice1
<!DOCTYPE html>
<html>
<head>
<title>
Premier formulaire
</title>
</head>
<body>
<form>
<table align="center">
<tr>
<td>Catégorie </td>
<td>
<select name="cat">
<option selected >choisissez votre catégorie</option>
<option value="EtL" >Etudiant en licence</option>
<option value="EtMR" > Etudiant en mastère de recherche</option>
<option value="EtMP" > Etudiant en mastère professionnel</option>
<option value="EtT" > Etudiant en thèse</option>
<option value="En" > Enseignant</option>
</select>
</td>
</tr>
<tr>
<td> <b> Identifiant </b></td>
<td> <input type="text" size="30"/></td>
</tr>
<tr>
<td> <b>Mot de passe</b></td>
<td> <input type="password" size="30"/> </td>
</tr>
<tr>
<td colspan="2"> <center>
<input type="submit" value="ok"/>
<input type="reset" value="annuler"/> </center>
</td>
</tr>
</table>
</form>
</body>
</html>
Exercice2
Les attributs additionels qui sont utilisés pour formater les champs de texte sont:
size - pour définir la taille du champ
value - pour définir la valeur prédéfinie
maxlength - pour définir le nombre de caractères maximum qui peut être entré par
l'utilisateur
- saisir du texte sur une seule ligne (<input>).
Attribut Description
maxlength Le nombre de caractères maximal qui peut être écrit dans ce champ.
minlength Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré
pattern Une expression rationnelle à laquelle doit correspondre le texte saisi pour être valide.
placeholder Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie
Textarea
L'élément HTML <textarea> représente un contrôle qui permet d'éditer du texte sur
plusieurs lignes.
maxlength définit le nombre maximal de caractères qui peuvent être saisis dans
l'élément <textarea>.
Il est également possible de définir une taile minimale avec l'attribut minlength ,
utiliser l'attribut required afin de bloquer l'envoi du formulaire si aucune valeur n'est
saisie.
Cols :La largeur visible du contrôle de saisie, exprimée en largeur moyenne de
caractères. La valeur utilisée doit être un entier positif. La valeur par défaut de cet
attribut est 20.
Rows : Le nombre de lignes de texte visibles pour le contrôle.
Il est possible d'ajouter certaines contraintes qui seront vérifiées côté client :
Rendre la valeur obligatoire
On peut utiliser l'attribut required afin d'indiquer que la valeur doit être remplie avant
de pouvoir envoyer le formulaire :
<input type="text" id="uname" name="name" required>
Si vous tentez d'envoyer le formulaire sans avoir saisi de valeur dans le champ texte, le
navigateur affichera un message d'erreur.
- Les éléments <input> dont l'attribut type vaut range permettent à l'utilisateur
d'indiquer une valeur numérique comprise entre deux bornes.
Attribut Description
max La valeur maximale autorisée.
min La valeur minimale autorisée.
Le pas utilisé pour incrémenter la valeur du champ. Cette valeur est utilisée pour l'interface utilisa
step
la valeur.
Exercice2
<html><body>
<form>
<table width="45%" align="center">
<tr>
<td> <label for="n">Nom</label> </td>
<td> <input type="text" id="n" size="30" name="nom" pattern="[a-z]" required
placeholder="contient seulement des lettres majuscules et minuscules" /></td>
</tr>
<tr>
<td> <label for="p">Prenom</label> </td>
<td> <input type="text" size="30" id="p" pattern="[a-z]" required
placeholder="contient seulement des lettres majuscules et minuscules"/> </td>
</tr>
<tr>
<td> <label for="c">Classe</label> </td>
<td> <input type="text" id="c" maxlength="6"/> </td>
</tr>
<tr>
<td><label for="s">Sexe</label></td>
<td> <input type="radio" id="s" name="sexe"/> féminin
<input type="radio" name="sexe"/> masculin
</td>
</tr>
<tr> <td>Date de naissance</td>
<td><input type="date" id="start" name="dn"
value="1985-11-20"
min="1970-01-01" max="1990-01-01">
</td>
</tr>
<tr> <td>Date de naissance</td>
<td> année
<select name="annee">
<option value="1985" selected>1985</option>
<option value="1970">1970</option>
</select>
mois
<select name="mois">
<option value="01">Janvier</option>
<option value="12">décember</option>
</select>
jour
<select name="jour">
<option value="01">01</option>
<option value="02">02</option>
<option value="31">31</option>
</select>
</td>
</tr>
<tr>
<td>origine géographique</td>
<td> <input type="radio" name="origine"/> Ville de l'établissement
<input type="radio" name="origine"/> Autre région
<input type="radio" name="origine"/> Etranger
</td>
</tr>
<tr>
<td> Email </td>
<td> <input type="email" size="30"/> </td>
</tr>
<tr>
<td> Intitulé du module à évaluer </td>
<td>
<select name="mod">
<option value="LanTI" selected>languages et techniques d'internet
</option>
<option value="DevIHM" >Dev-IHM</option>
<option value="POO" > programmation OO</option>
</select>
</td>
</tr>
<tr>
<td> note </td>
<td>
<input type="range" min="0" max="20" value="20" step="0.1">
</td>
</tr>
<tr>
<td>Volume horaire</td>
<td> <input type="radio" name="vh"/> suffisant
<input type="radio" name="vh"/> insuffisant
<input type="radio" name="vh"/> sans avis
</td>
</tr>
<tr>
<td>Les travaux pratiques sont bien adaptés aux cours?</td>
<td> <input type="radio" name="tp"/> oui
<input type="radio" name="tp"/> non
</td>
</tr>
<tr>
<td>vous assistez toujours à ce cours?</td>
<td> <input type="radio" name="cou"/> oui
<input type="radio" name="cou"/> non
</td>
</tr>
<tr>
<td>vous pensez que ce cours sera utile pour</td>
<td> <input type="radio" name="PV"/> la recherce
<input type="radio" name="PV"/> la vie profesionnelle
</td>
</tr>
<tr>
<td> Point forts de ce module</td>
<td> <textarea name="PF" cols="100" rows="10" maxlength="1000" >
</textarea> </td>
</tr>
<tr>
<td> Points faibles de ce module</td>
<td> <textarea name="PFa" cols="100" rows="10" maxlength="1000">
</textarea> </td>
</tr>
<tr>
<td> Vos propositions</td>
<td> <textarea name="Prop" cols="100" rows="10" maxlength="1000" >
</textarea> </td>
</tr>
</table>
<center> <input type="submit" value="Envoyer"/>
<input type="reset" value="Réinitialiser"/>
</center>
</form></body></html>
