OFPPT
Exercice 01 :
Code source :
<!DOCTYPE html>
<html >
<head>
<title>Formulaire de base</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="images/x-icon" href="../images/[Link]" />
</head>
<body>
<form method="post" action="[Link]">
<fieldset>
<legend>Formulaire type</legend>
<h1>Les composants du formulaire</h1>
<!-- Composants du formulaire -->
</fieldset>
</form>
<!-- The document is valid HTML5 + ARIA + SVG 1.1 + MathML 2.0 -->
</body>
</html
Exercice 02
Formateur : CHENNOUFI Issam 1
OFPPT
Code source :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Les boutons d'envoi</title>
<link rel="shortcut icon" type="images/x-icon" href="../images/[Link]" />
</head>
<body>
<form action="[Link]" method="post" name="formul1">
<fieldset>
<h2>Les boutons d'envoi : </h2>
<h3>Avec input <input type="submit" value="Envoi" name="soumission" id="soumission"
tabindex="5" accesskey="E" title="Bouton d'envoi" />
</h3>
<h3>Avec button et du texte :
<button type= "submit" value="Envoi2" name="soumission2" id="soumission2" accesskey="B"
title="Bouton d'envoi"> Envoi2</button>
</h3>
<!-- -->
<h3>Avec button et une image :
<button type="submit" value="Envoi3" name="soumission3" id="soumission3" accesskey="C"
title="Bouton d'envoi">
<img src= "[Link]" height="50" width="50" alt="France"/>
</button>
Formateur : CHENNOUFI Issam 2
OFPPT
</h3>
<!-- -->
<h3>Avec input et une image : <input type="image" src="[Link]" name="soumission4"
id="soumission4" tabindex="6" accesskey="D" alt="Bouton d'envoi image" onclick="submit()"/>
</h3>
<!-- -->
<h2>Les boutons de réinitialisation : </h2>
<h3>Avec input : <input type="reset" value="Effacement" name="efface" title="Bouton
d'effacement"/></h3>
<h3>Avec button et du texte : <button type= "reset" value="efface2" name="efface2"
id="efface2" accesskey="G" title="Bouton d'effacement"> Effacement</button></h3>
<!-- -->
<h3>Avec button et une image :
<button type= "reset" value="efface3" name="efface3" id="efface3" accesskey="H" title="Bouton
d'effacement">
<img src= "[Link] " height= "50" width= "50" alt= "France"/>
</button>
</h3>
<h3>Avec input et une image : <input type="image" src="[Link]" name="efface4"
id="efface4" tabindex="6" accesskey="D" alt="Bouton d'effacement" title="Bouton d'effacement"
onclick="reset()"/>
</h3>
</fieldset>
</form>
<!-- The document is valid HTML5 + ARIA + SVG 1.1 + MathML 2.0 -->
</body>
</html>
Exercice 03 :
Code source :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Saisie de texte</title>
<link rel="shortcut icon" type="images/x-icon" href="../images/[Link]" />
</head>
<body>
<form method="post" action="[Link]" >
Formateur : CHENNOUFI Issam 3
OFPPT
<fieldset>
<legend>Vos données personnelles</legend>
<label>Nom : </label><input type="text" name="nom" maxlength="25" /><br /><br />
<label>Prénom : </label><input type="text" name="prenom" value="Votre prénom"
maxlength="25" onclick="[Link]=''" /><br /><br />
<label>Adresse : </label><input type="text" name="adresse" value="Votre adresse"
maxlength="60" onfocus="[Link]=''" /><br /><br />
<label>Pays : </label><input type="text" name="pays" value="Votre pays" maxlength="20"
onchange="alert('Modification opérée')" /><br /><br />
<input type="submit" name="envoi" value="Envoyer"/>
</fieldset>
</form>
</body>
</html>
Exercice 04 :
Code source :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Saisie de texte</title>
<link rel="shortcut icon" type="images/x-icon" href="../images/[Link]" />
</head>
<body>
<form method="post" action="[Link]" >
<fieldset>
<legend>Accès réservé: donner vos login et mot de passe</legend>
<label> Login : </label><input type="text" name="nom" maxlength="8" autocomplete="on"/>
<label> Mot de passe : </label><input type="password" name="code" maxlength="8" /><br /><br
/>
<input type="submit" value="Envoyer"/>
</fieldset>
</form>
<!-- The document is valid HTML5 + ARIA + SVG 1.1 + MathML 2.0 -->
</body>
</html>
Exercice 05 :
Formateur : CHENNOUFI Issam 4
OFPPT
Code source :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Saisie de texte sur plusieurs lignes</title>
<link rel="shortcut icon" type="images/x-icon" href="../images/[Link]" />
</head>
<body>
<form action="[Link]" method="post">
<fieldset>
<legend>Donnez nous vos impressions</legend>
<label>Votre nom </label><input type="text" name="nom" size="25" tabindex="1" /><br />
<textarea name="commentaire" cols="70" rows="10" onfocus="[Link]=''" tabindex="2"
placeholder="Tapez vos commentaires ici . . . ">
Vos Commentaires
</textarea><br />
<input type="submit" value="Envoi de vos commentaires" />
<input type="reset" value=" Effacer tout" /><br />
</fieldset>
</form>
<!-- The document is valid HTML5 + ARIA + SVG 1.1 + MathML 2.0 -->
</body>
</html>
Exercice 06 :
Formateur : CHENNOUFI Issam 5
OFPPT
Code source :
<!DOCTYPE html>
<html>
<head>
<title>Saisir le temps qui passe...</title>
</head>
<body>
<form method="post" action="[Link]" autocomplete="on">
<p><label>Heure HH:MM:[Link]</label>
<input type="time" name="heure" min="09:00" max="18:00" step="1" /> </p>
<p><label>Date AAAA-MM-JJ</label>
<input type="date" name="date" min="2011-09-21" max="2012-01-21" step="7" /> </p>
<p><label>Date et Heure AAAA-MM-JJThh:mm:ss</label>
<input type="datetime" name="dateheure" min="2011-10-21T[Link]-02:00" max="2012-03-
01T[Link]-02:00" step="1"> </p>
<p><label>Mois AAAA-MM</label>
<input type="month" min="2011-09" max="2012-10" step="1" name="mois"></p>
<p><label>Semaine AAAA-WMM</label>
<input type="week" min="2011-W01" max="2012-W52" step="1" name="semaine"></p>
<p><label>Envoyer : </label>
<input type="submit" name="" value="Envoi" /> </p>
</form>
<!-- The document is valid HTML5 + ARIA + SVG 1.1 + MathML 2.0. -->
</body>
</html>
Exercice 07 :
Formateur : CHENNOUFI Issam 6
OFPPT
Code source :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Boutons radio et cases à cocher</title>
<link rel="shortcut icon" type="images/x-icon" href="../images/[Link]" />
</head>
<body>
<form action="[Link]" method="post">
<fieldset>
<legend>Quelques renseignements </legend>
<!-- Premier groupe de boutons radio -->
<label>Mr</label> <input type="radio" name="sexe" value="Monsieur" checked="checked"
tabindex="1" />
<label>Me</label> <input type="radio" name="sexe" value="Madame" tabindex="2" />
<label>Mlle</label> <input type="radio" name="sexe" value="Mademoiselle" tabindex="3" />
<!-- Second groupe de boutons radio -->
<label>Nom </label><input type="text" name="nom" size="25" tabindex="4" /><br /><br />
<label>France : <img src="[Link]" alt="France" width="78" height="52"/></label>
<input type="radio" name="pays" tabindex="5" accesskey="A" value="France" />
<label>Allemagne : <img src="[Link]" alt="Allemagne" width="48" height="32"/></label>
<input type="radio" name="pays" tabindex="6" accesskey="B" value="Allemagne" />
<label>Italie : <img src="[Link]" alt="Italie" width="48" height="32"/></label>
<input type="radio" name="pays" tabindex="7" accesskey="D" value="Italie" />
<!-- Ensemble de cases à cocher -->
<p>Vos gouts musicaux : <br />
<label>Classique : </label><input type="checkbox" name="classique" tabindex="8"
accesskey="G" value="oui" />
<label> ..... Chanson française : </label><input type="checkbox" name="chanson" tabindex="9"
accesskey="H" value="oui" />
Formateur : CHENNOUFI Issam 7
OFPPT
<label> ..... Rock : </label><input type="checkbox" name="rock" tabindex="10" accesskey="J"
value="oui" />
<label> ..... Pop : </label><input type="checkbox" name="pop" tabindex="11" accesskey="K"
value="oui" />
<label> ..... Rap : </label><input type="checkbox" name="rap" tabindex="12" accesskey="P"
value="oui" />
</p>
<br /><input type="submit" value="Envoi de vos choix" />
<input type="reset" value=" Effacer tout" /><br />
</fieldset>
</form>
</body>
</html>
Exercice 08 :
Code source :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Les listes de sélection</title>
<link rel="shortcut icon" type="images/x-icon" href="../images/[Link]" />
</head>
<body>
<form action="[Link]" method="post" enctype="application/x-www-form-urlencoded">
<fieldset>
<legend><b>Veuillez compléter le questionnaire</b></legend>
<label>Nom : </label><input type="text" name="nom" size="40" maxlength="256" value="votre
nom" onclick="[Link]=''" tabindex="1"/><br /><br />
<!-- Liste à choix unique -->
<h3>Votre pays
<select name="pays" size="1" tabindex="2">
Formateur : CHENNOUFI Issam 8
OFPPT
<option value="null" disabled="disabled"
selected="selected"> Votre pays</option>
<option value="Fr" label="France"
>France</option>
<option value="B" label="Belgique">
Belgique</option>
<option value="Ch" label="Suisse">
Suisse</option>
<option value="Cdn" label="Canada">
Canada</option>
</select></h3>
<!-- Liste à choix multiples -->
<h3>Vos connaissances informatique<small>(Pour faire plusieurs choix maintenir la touche CTRL
enfoncée)</small></h3>
<select name="savoir[]" size="4" multiple="multiple" tabindex="3">
<option value="HTML 5"> HTML
5</option>
<option value="PHP"
onclick="[Link]='disabled'"> PHP </option>
<option value="SQL"> SQL</option>
<option value="C#" > C# </option>
</select>
<br /><br />
<input type="submit" value="Envoi " tabindex="4"/>
<input type="reset" value=" Effacer tout" tabindex="5"/><br />
</fieldset>
</form>
<!-- The document is valid HTML5 + ARIA + SVG 1.1 + MathML 2.0 -->
</body>
</html>
Exercice 09 :
Code source :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Transfert de fichier</title>
</head>
<body>
<form action="[Link]" method="post" enctype="application/x-www-form-urlencoded">
<fieldset>
Formateur : CHENNOUFI Issam 9
OFPPT
<legend><b>Envoyez nous votre photo</b></legend>
<label>Choisissez le fichier JPEG ou PNG : </label><input type="file" name="fichier"
accept="image/jpeg,image/png" />
<input type="hidden" name="MAX_FILE_SIZE" value="50000" /><br /><br />
<input type="reset" value="Effacer" />
<input type="submit" value="Envoyer" />
</fieldset>
</form>
<!-- The document is valid HTML5 + ARIA + SVG 1.1 + MathML 2.0 -->
</body>
</html>
Exercice 10 :
Code source :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
Formateur : CHENNOUFI Issam 10
OFPPT
<title>Formulaire traité par PHP</title>
</head>
<body>
<form action="[Link]" method="post" enctype="multipart/form-data">
<!-- Premier groupe de composants-->
<fieldset>
<legend><b>Vos coordonnées</b></legend>
<label>Nom : </label>
<input type="text" name="nom" size="40" maxlength="256" value="votre nom" /><br />
<label>Prénom : </label>
<input type="text" name="prenom" size="40" maxlength="256" value="votre prénom" /><br />
<label>Date de naissance :</label>
<input type="date" name="date" max="1993-01-01"/><br />
<label>Mail : </label>
<input type="email" name="mail" size="40" maxlength="256" value="votre mail" /><br />
<label>Votre site : </label>
<input type="url" name="site" value="[Link] /><br />
<label>Code : </label>
<input type="password" name="code" size="40" maxlength="6" /><br />
<input type="radio" name="sexe" value="homme" /><label>Homme</label> <br />
<input type="radio" name="sexe" value="femme" /><label>Femme</label> <br />
<select name="pays" size="1" tabindex="2" onfocus="[Link]='red'"
onchange="alert('Merci de votre choix')" onblur="[Link]='black'">
<option value="null" > Votre pays</option>
<optgroup label="Europe">
<option value="France" > France</option>
<option value="Belgique" > Belgique</option>
<option value="Italie" > Italie</option>
<option value="Allemagne" > Allemagne</option>
</optgroup>
<optgroup label="Amérique">
<option value="USA" label="fr" > USA </option>
<option value="Canada" > Canada</option>
<option value="Argentine" > Argentine</option>
</optgroup>
<optgroup label="Autres">
<option value="Europe" > Europe </option>
<option value="Asie" > Asie </option>
<option value="Amériques" > Amériques </option>
<option value="Océanie" > Océanie</option>
</optgroup>
</select>
<br />
</fieldset>
<!-- Deuxième groupe de composants-->
<fieldset>
<legend><b>Vos goûts</b></legend>
<input type="checkbox" name="pomme" value="pomme" /> Pommes<br />
<input type="checkbox" name="poire" value="poire" /> Poires<br />
<input type="checkbox" name="scoubidou" value="scoubidou" /> Scoubidous<br />
Formateur : CHENNOUFI Issam 11
OFPPT
<textarea name="gouts" cols="50" rows="5" onclick="[Link]=''">
Décrivez vos goûts en détail
</textarea>
<br />
</fieldset>
<!-- Troisième groupe de composants-->
<fieldset>
<legend><b>Envoyez nous votre photo</b></legend>
<input type="file" name="fichier" accept="image/jpeg" />
<input type="hidden" name="MAX_FILE_SIZE" value="10000" />
<br /><br />
<input type="reset" value="Effacer" />
<input type="submit" value="Envoyer" />
<br />
</fieldset>
</form>
<!-- The document is valid HTML5 + ARIA + SVG 1.1 + MathML 2.0 -->
</body>
</html>
Formateur : CHENNOUFI Issam 12