Nouveaux éléments de formulaire en HTML

HTML5 a introduit les nouveaux éléments de formulaire suivant :

  • <datalist>
  • <keygen>
  • <output>
Remarque : Les principaux navigateurs n’ont pas tous pris en charge tous les nouveaux éléments de formulaire. Toutefois, vous pouvez commencer déjà à les utiliser ; Si elles ne sont pas pris en charge, ils se comporteront comme des champs de texte ordinaire.

HTML5 les nouveaux éléments de formulaire

HTML5 cours tutorial

HTML5 l’élément de formulaire <datalist>

L'élément <datalist> spécifie une liste d'options prédéfinies pour un élément <input>.

L'élément <datalist> est utilisé pour fournir une fonctionnalité « Saisie semi-automatique » sur les éléments <input>. Les  utilisateurs verront une liste déroulante d'options prédéfinie s’ils saisissent des données.

Utilisez attribut list de l'élément <input> pour le lier avec un élément <datalist>.

Opera Safari Chrome Firefox Internet Explorer

Exemple Un élément <input> avec des valeurs prédéfinies dans une <datalist> :

Sélectionner le code

<form action="">
<input list="browsers"><datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
 <br />  <input type="submit"></form>
            

HTML5 <keygen> élément

L'élément <keygen> vise à fournir un moyen sécurisé pour authentifier les utilisateurs.

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

Lorsque le formulaire est envoyé, les deux clés sont générées, une privée et une publique.

La clé privée est stockée localement, et la clé publique est envoyée au serveur. La clé publique pourrait être utilisée pour générer un certificat client pour l'authentification de l'utilisateur dans l'avenir.

Opera Safari Chrome Firefox Internet Explorer

Exemple Un formulaire avec un champ keygen :

Sélectionner le code

  <form action="#" method="get">
  Username: <input type="text" name="usr_name">
  Encryption: <keygen name="security">
  <input type="submit">
  </form>
            

HTML5 <output> élément

L'élément <output> représente le résultat d'un calcul (tel qu'un effectuée par un script).

Opera Safari Chrome Firefox Internet Explorer

Exemple Effectuer un calcul et afficher le résultat dans un élément <output> :

Sélectionner le code

  <form
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" name="a" value="0"> +
  <input type="number" name="b" value="0"> =
  <output name="x" for="a b"></output>
  </form>
            

HTML5 Nouveaux éléments de formulaire

Balise

Description

<datalist>

Spécifie une liste d'options prédéfinies pour un élément de <input>

<keygen>

Spécifie un champ Générateur de paire de clés dans un formulaire

<output>

Représente le résultat d'un calcul

Par carabde 10 juin 2014

chapitre précédent

sommaire

chapitre suivant