oujood.com

Nouveaux éléments de formulaire en HTML

HTML5 a introduit de nouveaux éléments de formulaire comme : datalist keygen et output

chercher |

HTML5 les nouveaux éléments de formulaire

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> :

Exemple :       Copier 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 :

Exemple :       Copier 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> :

Exemple :       Copier 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


Voir aussi nos tutoriel :

Affiche les informations d'une variable">var_dump

 Affiche les informations d'une variable

Balise command

Définit un bouton de commande que l'utilisateur peut appeler

Caracteres speciaux en js

Caractères spéciaux en javascript :