41Mag - Les nouveaux éléments de formulaire en HTML5

Les nouveaux éléments de formulaire en HTML5

Le HTML5 apporte 3 nouveaux éléments pour les formulaires : les balises <datalist>, <keygen> et <output>.

Bien que  les principaux navigateurs ne supportent pas encore tous les nouveaux éléments de formulaire, vous pouvez déjà commencer à les utiliser. Si ils ne sont pas pris en charge, ils vont se comporter comme des champs de texte ordinaire.

BaliseDescription
<datalist> Spécifie une liste de pré-définis des options pour un élément <input>
<keygen> Indique un champ générateur de clés dans un formulaire
<output> Représente le résultat d’une opération ou de calcul

I. La balise <datalist> en HTML5

1
2
3
4
5
6
7
8
9
<input list="navigateur" />
 
<datalist id="navigateur">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

L’élément <datalist> spécifie une liste pré-définis d’options pour un élément <input>.

L’élément <datalist> est utilisé pour fournir une « saisie semi-automatique » sur les éléments <input>. Utilisé l’attribut id de la balise <input> et l’attribut list de la balise <datalist> pour les relier ensemble.

II. La balise <keygen> en HTML5

1
2
3
4
5
<form action="demo_keygen.php" method="get">
  Username: <input type="text" name="nom_utilisateur" />
  Encryption: <keygen name="security" />
  <input type="submit" />
</form>

Le but de l’élément <keygen> est de fournir un moyen sécurisé pour authentifier les utilisateurs.

La balise <keygen> spécifie un champ générateur de clés dans un formulaire.

Lorsque le formulaire est soumis, deux clés sont générées, l’une publique et l’autre privée.

La clé privée est stockée localement, et la clé publique est envoyée au serveur. La clé publique peut être utilisé pour générer un certificat de client pour authentifier l’utilisateur dans le futur.

III. La balise <output> en HTML5

1
2
3
4
5
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" name="a" value="50" />100
  +<input type="number" name="b" value="50" />
  =<output name="x" for="a b"></output>
</form>

L’élément <output> représente le résultat d’un calcul (réalisé par un script par exemple).

[cadreHTML5]

Article du même thême : .

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.