Code source de exo5-1.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<style>
@media (min-width: 800px) {
form {display: flex;}
fieldset {width: 50%;}
}
textarea { width: 90%;
margin: auto;}
</style>
</head>
<body>
<h1>Prise de contact</h1>
<form action="http://lipn.fr/~dubacq/test.php" method="GET">
<fieldset>
<legend>Identité des parents</legend>
<p><label for="nom">Nom: <input type="text"
name="nom" id="nom"></label></p>
<p><label for="prenom">Prénom:
<input type="text" name="prenom"
id="prenom"></label></p>
<p><label for="adresse">Adresse:
<input type="text" name="adresse"
id="adresse"></label></p>
<p><label for="code">Codes ou interphone:
<input type="text" name="code" id="code" placeholder="Par
ex., 72AB8 ou interphone: DURAND"></label></p>
<p><label for="email">Adresse électronique:
<input required="required" type="email"
placeholder="login@fournisseur.com" name="email"
id="email"></label></p>
<p><label for="pass">Mot de passe pour
le compte: <input type="password" name="pass"
id="pass"></label></p>
<p><label for="when">Date et
heure: <input type="datetime" name="when"
id="when"></label></p>
<p><label for="discount">Réduction demandée:
<input disabled type="number" name="discount"
id="discount"></label></p>
</fieldset>
<fieldset>
<legend>Identité de l'enfant</legend>
<p><label for="prenom_enfant">Prénom:
<input type="text" name="prenom_enfant"
id="prenom_enfant"></label></p>
<p>Genre:
<label for="genre_unknown" title="je ne couche pas
avec mes élèves">Aucune importance
<input checked="checked" type="radio"
name="genre[]" value="unknown" id="genre_unknown">
</label>
<label for="genre_garcon">Garçon
<input type="radio" name="genre[]" value="garcon"
id="genre_garcon">
</label>
<label for="genre_fille">Fille
<input type="radio" name="genre[]" value="fille"
id="genre_fille">
</label>
</p>
<p>Matières souhaitées:
<label for="matiere_sciences">Sciences
<input type="checkbox" name="matiere[]"
value="sciences" id="matiere_sciences">
</label>
<label for="matiere_maths">Mathématiques
<input type="checkbox" name="matiere[]"
value="maths" id="matiere_maths">
</label>
<label for="matiere_histoire">Histoire
<input type="checkbox" name="matiere[]"
value="histoire" id="matiere_histoire">
</label>
</p>
<p><label for="niveau">Niveau scolaire :
<select id="niveau">
<optgroup label="Collège">
<option>Sixième</option>
<option>Cinquième</option>
<option>Quatrième</option>
<option>Troisième</option>
</optgroup>
<optgroup label="Lycée">
<option>Seconde</option>
<option>Première</option>
<option>Terminale</option>
</optgroup>
</select>
</p>
<textarea width=80 name="particulier"
placeholder="Mettez ici si l'enfant a des besoins
particuliers"></textarea>
<input type="submit">
</fieldset>
</form>
</body>
</html>
Lien de téléchargement de exo5-1.html