HTML5 met à disposition un type de champ tel conçu pour être utilisé en relation avec les numéros de téléphone.
Votre numéro de téléphone : <input type="tel" name="telefon">
Sur les smartphones et tablettes, en cliquant sur le champ, le clavier numérique s'ouvre pour saisir le numéro de téléphone.
Champs pour adresses Internet avec url
Les champs de type url sont destinés à la saisie d'adresses Internet.
<input type="url" />
Les champs d'URL sont automatiquement validés. Les navigateurs doivent vérifier que l'URL saisie est effectivement correcte sur le plan syntaxique.
Champ de sortie avec output
Avec le champ output, on peut afficher du contenu. Cela peut être intéressant, par exemple, en relation avec JavaScript. Ainsi, ce champ peut être utilisé pour afficher des variables. De même, le champ peut également servir à afficher des valeurs calculées. Le champ est exclusivement destiné à la sortie de données. Les saisies des utilisateurs ne sont donc pas possibles.
Un exemple :
<script>
/* <![CDATA[ */
function ausgabe(){
wort1="Bonjour,"
wort2="monde!"
document.forms[0][0].value=wort1+wort2
}
/* ]]> */
</script>Dans cet exemple, deux variables ont été déclarées. Les contenus de ces variables doivent être affichés dans le champ output.
<body onload="ausgabe()">
<form action="auswertung.php" method="get" name="form">
<output name="feld" />
</form>
</body>
Les navigateurs comme Opera affichent la valeur souhaitée. En revanche, les navigateurs qui ne comprennent pas output n'affichent rien.output possède trois attributs.
• form – Le formulaire dans lequel l'élément output est contenu.
• for – Établit le lien avec les champs ou valeurs auxquels le champ de sortie se réfère. Les valeurs et champs doivent être séparés par des espaces.
• name – Si un nom est donné, le contenu du champ est transmis lors de l'envoi du formulaire.
• value – Spécifie la valeur du champ.output convient également aux calculs mathématiques. Par exemple, on pourrait demander des valeurs via des champs Prompt et ensuite les multiplier entre elles.
<!DOCTYPE html>
<html >
<head>
<title>output</title>
<script>
/* <![CDATA[ */
function multi(){
a=parseInt(prompt("Chiffre 1.",0));
b=parseInt(prompt("Chiffre 2.",0));
document.forms["form"]["result"].value=a*b;
}
/* ]]> */
</script>
</head>
<body onload="multi()">
<form action="#" method="get" name="form">
<label>Le résultat de la multiplication :</label>
<output name="result" />
</output>
</form>
</body>
</html>Lorsque la page est ouverte, une fenêtre prompt s'ouvre pour demander la première valeur.
En confirmant l'entrée avec OK, une deuxième fenêtre s'ouvre. (Si on clique sur Annuler dans l'une des deux fenêtres, le résultat sera NaN, c'est-à-dire Pas un nombre).
Si la deuxième fenêtre est également confirmée avec OK, le script transmet le résultat de la multiplication en tant que valeur au champ output.
Barres de progression avec progress
Une barre de progression peut être mise en place avec l'élément progress. Cela peut être intéressant notamment pour le téléchargement de fichiers..gif "HTML & CSS pour débutants (Partie 16) : Formulaires (4)")
Google interprète déjà cet élément. D'autres navigateurs qui ne connaissent pas l'élément affichent son contenu.
Un exemple :
Le téléchargement est en cours...
<progress value="250" max="1000">
<span id="downloadProgress">25</span>%
</progress>
L'élément progress possède deux attributs:
• max – Définit le nombre total d'étapes nécessaires.
• value – Indique le nombre d'étapes déjà terminées.
L'élément progress devient vraiment intéressant lorsqu'il est combiné avec JavaScript. La façon dont une combinaison de progress et de JavaScript peut être utilisée est mieux illustrée par un exemple.
Cet exemple suppose un formulaire devant être complété en plusieurs étapes. Les informations suivantes sont demandées successivement :
• Prénom
• Nom
• Rue
• Code postal
• Ville
On pourrait bien sûr interroger ces quelques valeurs sur une seule page. Mais que se passe-t-il lorsque de nombreuses informations doivent être collectées auprès de l'utilisateur ? Dans ce cas, des formulaires complexes donnent plutôt un aspect intimidant. Il est donc préférable de diviser les formulaires sur plusieurs pages.
Supposons que vous accédez au formulaire.
Ici, on vous demandera votre prénom. La barre d'état en dessous du champ a été réalisée à l'aide de l'élément progress.
<fieldset id="schritt1" style="display: none;"> <p>Prénom : <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Étape 1 / 5</progress></p> <p><input type="button" value="Suivant" onclick="naechserSchritt(2)"></p> </fieldset>
Ce qui importe dans cette syntaxe est plusieurs choses. Les différents éléments fieldset sont tout d'abord rendus invisibles. Car même si cela ne semble pas évident à première vue, le formulaire ne consiste en fait qu'en une seule page. Les champs individuels ont été insérés dans des éléments fieldset distincts. Et ces éléments fieldset (ainsi que leur contenu) ne sont pas visibles.
Pour que les éléments initialement cachés deviennent visibles après avoir cliqué sur les boutons Suivant correspondants, une fonction JavaScript de type switch est utilisée. Comment elle est conçue sera montré plus loin dans ce tutoriel.
Mais revenons d'abord au formulaire. En cliquant sur les boutons Suivant, vous serez guidé à travers le formulaire. Les éléments progress indiquent votre progression.
D'ailleurs, ce n'est pas très grave si un navigateur ne prend pas en charge l'élément progress. Car ces navigateurs afficheront simplement le contenu de cet élément.
<progress max="5" value="1">Étape 1 / 5</progress>
Plutôt que l'affichage de progression, un texte du type Étape 2 / 5 sera vu à la place.
Le formulaire se présente comme suit :
<form method="post" action="#"> <fieldset id="schritt1" style="display: none;"> <p>Prénom : <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Étape 1 / 5</progress></p> <p><input type="button" value="Suivant" onclick="naechsterSchritt(2)"></p> </fieldset> <fieldset id="schritt2" style="display: none;"> <p>Nom : <input type="text" name="nname" size="30"></p> <p><progress max="5" value="2">Étape 2 / 5</progress></p> <p><input type="button" value="Suivant" onclick="naechsterSchritt(3)"></p> </fieldset> <fieldset id="schritt3" style="display: none;"> <p>Rue : <input type="text" name="strasse" size="30"></p> <p><progress max="5" value="3">Étape 3 / 5</progress></p> <p><input type="button" value="Suivant" onclick="naechsterSchritt(4)"></p> </fieldset> <fieldset id="schritt4" style="display: none;"> <p>Code postal : <input type="text" name="plz" size="30"></p> <p><progress max="5" value="4">Étape 4 / 5</progress></p> <p><input type="button" value="Suivant" onclick="naechsterSchritt(5)"></p> </fieldset> <fieldset id="schritt5" style="display: none;"> <p>Ville : <input type="text" name="ort" size="30"></p> <p><progress max="5" value="5">Étape 5 / 5</progress></p> <input type="submit" value="Fin"> </fieldset> </form>
Ici, trois choses sont essentielles :
• Chaque élément fieldset est assigné une ID.
• Tous les éléments fieldset sont définis sur display: none.
• Les boutons se voient attribuer la fonction naechsterSchritt(n).
La fonction naechsterSchritt(n) prend la forme suivante :
<script>
/* <![CDATA[ */
function naechsterSchritt(n) {
switch(n) {
case 1:
document.getElementById('schritt1').style.display = "block";
break;
case 2:
document.getElementById('schritt1').style.display = "none";
document.getElementById('schritt2').style.display = "block";
break;
case 3:
document.getElementById('schritt2').style.display = "none";
document.getElementById('schritt3').style.display = "block";
break;
case 4:
document.getElementById('schritt3').style.display = "none";
document.getElementById('schritt4').style.display = "block";
break;
case 5:
document.getElementById('schritt4').style.display = "none";
document.getElementById('schritt5').style.display = "block";
break
default: break;
}
}
naechsterSchritt(1);
/* ]]> */
</script>
Cette fonction affiche l'élément fieldset actuel et masque les autres éléments fieldset. Assurez-vous de placer la fonction après la définition des champs. Placez-la donc de préférence après la fermeture de </form>.
