Exercices sur les formulaires xHTML et HTML 5

formulaire d'envoi de fichier multiples

Écrire une page HTML5 destiné à l'envoi d'un fichier en upload HTTP. pour cela nous aurons recours à un formulaire tel que celui-ci :

Dans le cas où l'on ne dispose pas d'un interpréteur (PHP ou autre) afin de voir le transfert effectué, il est possible d'utiliser le module firebug de firefox. Pour cela il faudra activer la partie réseau.

Fichier à produire  :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Envoi de fichiers en upload HTTP</title>
</head>
<body>
  <h1>Envoi de fichiers en upload <abbr lang="en" title="Hyper Text Transfert Protocol">HTTP</abbr></h1>
 
  <form id="send_file" action="print_vars.php" method="post" enctype="multipart/form-data">
    <fieldset> 
      <legend>identification</legend> 
      <label>identifiant : <input name="id" size="15" type="text" required="required" pattern="^[a-z].*" autofocus="autofocus"
          title="le nom doit impérativement commencer par une lettre minuscule"/></label><br/>
      <label>mot de passe :
	<input name="Password" size="15" type="password" required="required"
               pattern="(?=^.{4,8}$)(?=.*\d)(?=.*[A-Z])(?=.*[a-z]).*\W.*$"
               title="le mot de passe doit contenir entre 4 et 8 caractères et avoir
		      au moins un chiffre, une lettre majuscule, une lettre minuscule
		      et un caractère d'un autre type (ponctuation, contrôle...)"/></label><br/>
    </fieldset>
    <fieldset> 
      <legend>transfert de fichiers</legend> 
      <input type="hidden" name="MAX_FILE_SIZE" value="3000"/>
      <label>Choisir les fichiers : <input name="les_fichiers[]"
					   type="file"
					   multiple="multiple"/></label><br/>
      <label>Pour envoyer : <input type="submit" name="envoyer" value="Valider"/></label>
    </fieldset>
  </form>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p>
</body>
</html>
voir le résultat

Dévalidation de champs par fieldset

Écrire une page HTML5 destiné à l'envoi d'un message tel que présenté par un forum. Pour cela nous aurons recours à un formulaire tel que celui-ci :

Fichier à produire  :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Envoi de fichiers en upload HTTP</title>
</head>
<body>
  <h1>Test de la désactivation par <samp>fieldset</samp></h1>
 
  <form method="get" action="#" enctype="multipart/form-data">
    <fieldset id="fld" disabled="disabled"> 
      <legend>Envoi d'un message</legend> 
      <label>Votre nom : <input name="id" size="15" type="text" autofocus="autofocus"
			     placeholder="Entrez le texte"/></label><br/>
      <label>Le message :
	<textarea placeholder="Entrez le message"></textarea></label><br/>
      <label>Pour envoyer : <input type="submit" formaction="print_vars.php" name="envoyer" value="Valider"/></label>
    </fieldset>
  </form>
  <label>Pour activer le formulaire ci-dessus :
    <input type="button"
	   onclick="fld = document.getElementById('fld');
		    fld.disabled = ! fld.disabled;"
	   value="Activer/désactiver le formulaire"/></label>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p>
</body>
</html>
voir le résultat

page HTML 5 présentant un formulaire avec complétion automatique

Écrire une page HTML 5 destiné à la saisie de champs temporels. Pour cela nous aurons recours à un formulaire qui :

Fichier à produire  :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <title>Formulaire HTML 5 à remplissage automatique</title>
</head>
<body>
 
  <h1>Choix de prénom</h1>
  <form id="send" action="#" method="get">
    <fieldset> 
      <legend>Entrez votre prénom</legend>
      <input type="text" name="le-prenom" list="prenoms" autocomplete="on" autofocus="autofocus"/>
      <datalist id="prenoms">
        <option>Gérard</option>
        <option>Alain</option>
        <option>Albert</option>
        <option>Robert</option>
        <option>Jean</option>
        <option>Zoé</option>
      </datalist>
    </fieldset>
  </form>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p>
</body>
</html>
voir le résultat

page HTML 5 présentant un formulaire de saisie de dates

Écrire une page HTML 5 destiné à la saisie de champs temporels. Pour cela nous aurons recours à un formulaire qui :

Fichier à produire  :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>Envoi de date par Formulaire HTML5</title>
</head>
<body>
   <h1>Envoi de date par Formulaire HTML5</h1>
 
  <form id="send_date_time" action="#" method="get">
    <fieldset> 
      <legend>Saisie de date complête</legend> 
      <label>identifiant : <input name="id1" type="datetime" value="1976-01-31T12:31:00Z" step="60" required="required"/></label><br />
      <label>Pour envoyer : <input type="submit" name="envoyer-datetime" value="Valider" /></label>
    </fieldset>
  </form>
 
  <form id="send_date" action="#" method="get">
    <fieldset> 
      <legend>Saisie de date</legend> 
      <label>identifiant : <input name="id2" type="date" value="1976-02-14" min="1976-01-14" max="1976-03-14"/></label><br />
      <label>Pour envoyer : <input type="submit" name="envoyer-date" value="Valider" /></label>
    </fieldset>
  </form>
 
  <form id="send_month" action="#" method="get">
    <fieldset> 
      <legend>Saisie de mois</legend> 
      <label>identifiant : <input name="id3" type="month" value="1976-02"/></label><br />
      <label>Pour envoyer : <input type="submit" name="envoyer-month" value="Valider" /></label>
    </fieldset>
  </form>
 
  <form id="send_week" action="#" method="get">
    <fieldset> 
      <legend>Saisie de semaine</legend> 
      <label>identifiant : <input name="id4" type="week" value="1976-W03" step="3"/></label><br />
      <label>Pour envoyer : <input type="submit" name="envoyer-week" value="Valider" /></label>
    </fieldset>
  </form>
 
  <form id="send_time" action="#" method="get">
  </form>
    <fieldset> 
      <legend>Saisie de temps</legend> 
      <label>identifiant : <input name="id5" type="time" value="12:31:05" min="12:00" max="14:00" form="send_time"/></label><br />
      <label>Pour envoyer : <input type="submit" name="envoyer-time" value="Valider" form="send_time"/></label>
    </fieldset>
 
  <form id="send_datetime_local" action="#" method="get">
    <fieldset> 
      <legend>Saisie de date au format local</legend> 
      <label>identifiant : <input name="id6" type="datetime-local" value="1976-02-01T12:31:05" min="1976-01-26T12:00" max="1976-02-04T14:00"/></label><br />
      <label>Pour envoyer : <input type="submit" name="envoyer-datetime-local" value="Valider" /></label>
    </fieldset>
  </form>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p>
</body>
</html>
voir le résultat

page HTML 5 présentant un formulaire de saisie de nombres

Écrire une page HTML 5 destiné à la saisie de champs temporels. Pour cela nous aurons recours à un formulaire qui :

Fichier à produire  :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Envoi de nombres par Formulaire HTML5</title>
</head>
<body>
  <h1>Envoi de nombres par Formulaire HTML5</h1>
 
  <form id="send_number" action="#" method="get" enctype="multipart/form-data">
    <fieldset> 
      <legend>Saisie de nombre</legend> 
      <label>nombre : <input name="id1" type="number" value="14.5" step="0.5" max="20"/></label><br />
      <label>range : <input name="id2" type="range" value="50" step="1" min="44" max="60"/></label><br />
      <label>Pour envoyer : <input type="submit" name="envoyer-nombres" value="Valider" /></label>
    </fieldset>
  </form>
 
    <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p>
</body>
</html>
voir le résultat

page HTML 5 présentant un formulaire de saisie de courriels, teléphones et URLs

Écrire une page HTML 5 destiné à la saisie de champs temporels. Pour cela nous aurons recours à un formulaire qui :

Fichier à produire  :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Envoi de courriels, URL et de numéro de téléphone par Formulaire HTML5</title>
</head>
<body>
  <h1>Envoi de courriels URL et de numéro de téléphone par Formulaire HTML5</h1>
 
  <form id="send_number" action="#" method="get" enctype="multipart/form-data">
    <fieldset> 
      <legend>Saisie courriel URL et téléphone</legend> 
      <label>courriel : <input name="id1" type="email" value="ami@chez-moi.com" placeholder="Entrez une adresse E-mail" pattern="^[a-e].*"/></label><br />
      <label>URL : <input name="id2" type="url" value="http://mon-site.com" placeholder="Entrez une URL HTTP" pattern="^http://.*"/></label><br />
      <label>téléphone : <input name="id3" type="tel" value="01 23 45 67 89" required="required"
        pattern="^ *[0-9]{2}([ _/-]?)[0-9]{2}\1[0-9]{2}\1[0-9]{2}\1[0-9]{2} *$"/></label><br />
      <label>Pour envoyer : <input type="submit" name="envoyer-email-tel" value="Valider"/></label>
    </fieldset>
  </form>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p>
</body>
</html>
voir le résultat

page HTML 5 présentant un formulaire de saisie de couleur et de zone de recherche

Écrire une page HTML 5 destiné à la saisie de couleurs. Pour cela nous aurons recours à un formulaire qui :

Fichier à produire  :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Envoi de couleur par Formulaire HTML5</title>
</head>
<body>
  <h1>Envoi de couleur par Formulaire HTML5</h1>
 
  <form id="send_number" action="#" method="get" enctype="multipart/form-data">
    <fieldset> 
      <legend>Saisie couleur</legend> 
      <label>couleur : <input name="id1" type="color" value="#FFCC66"/></label><br />
      <label>rechercher : <input name="id2" type="search" value="toto titi tutu"/></label><br />
      <label>Pour envoyer : <input type="submit" name="envoyer-color-search" value="Valider"/></label>
    </fieldset>
 
  </form>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p>
</body>
</html>
voir le résultat

page HTML 5 présentant un formulaire assurant la transmission de clef

Écrire une page HTML 5 destiné à la transmissin d'une clef recours à un formulaire qui :

Fichier à produire  :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Envoi de clef par Formulaire HTML5</title>
</head>
<body>
  <h1>Envoi de clef par Formulaire HTML5</h1>
 
  <form id="send_number" action="#" method="get" enctype="multipart/form-data">
    <fieldset> 
      <legend>Envoi de la clef</legend> 
      clef : <keygen name="la_clef" keytype="rsa" challenge="Bonjour"/><br />
      <label>Pour envoyer : <input type="submit" name="envoyer" value="Envoi de la clef"/></label>
    </fieldset>
 
  </form>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p>
</body>
</html>
voir le résultat

page HTML 5 présentant un formulaire de saisie avec valeur calculée

Écrire une page HTML 5 destiné à la saisie de deux nombres et présentant le résultat du produit de ces deux nombre durant la saisie.

Fichier à produire  :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
  <title>Calcul du produit de 2 nombres par "output"</title>
</head>
<body>
  <h1>calcul du produit de 2 nombres par <samp>output</samp> (HTML5)</h1>
 
  <!-- L'élément "form" ci dessous contient le code javascript -->
  <form oninput="x.value=a.value * b.value">
    <fieldset> 
      <legend>Saisie des valeurs</legend> 
      <input type="range" name="a" min="20" max="120" step="20" value="40"/> *
      <input type="number" name="b" value="31"/> =
      <output name="x" for="a b">résultat</output>
    </fieldset>
  </form>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p>
</body>
</html>
voir le résultat

formulaire avec remplissage automatique par méthode GET

Objectif : Utiliser l'objet XMLHttpRequest dans le but de proposer des choix pour le remplissage d'un champ texte.

Écrire une page HTML5 contenant :

Pour tester ce script nous aurons recours à un service accessible via un script php. Pour que le mécanisme complet puisse être opérationnel il faudra :

fichier php (coté serveur) envoi_liste_get.php à produire :

<?php
/**
  ce script est destiné à la génération d'une réponse
  lors de la réception de messages
  par envoi d'un contenu via strg
*/
 
//header('Content-type: text/xml');
$prenoms = array('Alexandre',
		 'Raphael',
		 'Arthur',
		 'Paul',
		 'Antoine',
		 'Gabriel',
		 'Thomas',
		 'Jules',
		 'Louis',
		 'Lucas',
		 'Ines',
		 'Emma',
		 'Camille',
		 'Sarah',
		 'Louise',
		 'Chloe',
		 'Clara',
		 'Lea',
		 'Marie',
		 'Alice');
if(isset($_GET['strg'])) {
  $strg = trim($_GET['strg']);
  if ($strg !== '') {
    foreach ($prenoms as $prenom) {
      if(stripos($prenom, $strg) >= 0) echo '<option>'.$prenom.'</option>';
    }
  }
  //echo '--'.$strg;
}
?>

Fichier à produire  :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Remplissage automatique d'une entrée texte (GET)</title>
 <script type="text/javascript">
   // Ce script met à jour le "datalist"
    var url = "envoi_liste_get.php";
    var requ = "strg=";
 
    function on_modif_info() {
	var status;
	try {
	  status = this.status;
	} catch (err) {
	  status = 'ERREUR : ' + err;
	}
	if (this.readyState == 4) {
	  document.getElementById('prenoms').innerHTML = this.responseText;
	}
    }
 
    function lance_requete() {
      http =  new XMLHttpRequest();
      http.onreadystatechange = on_modif_info;
      http.open('GET', url+'?'+requ+document.getElementById('le_prenom').value, true);
      http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http.send();
    }
 
    function place_event() {
      var inpt = document.getElementById('le_prenom');
      inpt.onchange = lance_requete;
    }
 
    window.onload = place_event;
 </script>
</head>
<body>
 <h1>Remplissage automatique (méthode <em>GET</em>)</h1>
 <p id="result"></p>
 <form action="#" method="get">
   <fieldset>
     <legend>Entrez un prénom</legend>
     <input type="text" name="le_prenom" list="prenoms" id="le_prenom"/>
     <!-- L'élément "datalist" avec les "options" préremplies -->
     <datalist id="prenoms">
       <option>Alain</option>
       <option>Robert</option>
       <option>Jean</option>
       <option>Zoé</option>
     </datalist>
     <input type="submit" value="envoyer"/>
   </fieldset>
 </form>
 
 <div class="validator"> 
   page validée par
   <a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.1</a> 
 </div>
</body>
</html>
voir le résultat
pages validées par Valid XHTML 1.1 CSS validé !