Nouveaux éléments de formulaire en HTML

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é de « saisie semi-automatique » sur les éléments <input>. Les utilisateurs verront une liste déroulante d'options prédéfinies lorsqu'ils commencent à saisir des données.

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

Support navigateur actuel (2024)

Chrome : ✅ Version 20+
Firefox : ✅ Version 4+
Safari : ✅ Version 12.1+
Edge : ✅ Version 12+
Support global : 96% des navigateurs

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

Exemple :     📋 Copier le code

<form action="">
  <label for="browser-choice">Choisissez un navigateur :</label>
  <input list="browsers" id="browser-choice" name="browser" placeholder="Commencez à taper...">
  
  <datalist id="browsers">
    <option value="Chrome"></option>
    <option value="Firefox"></option>
    <option value="Safari"></option>
    <option value="Edge"></option>
    <option value="Opera"></option>
  </datalist>
  
  <br><br>
  <input type="submit" value="Envoyer">
</form>

HTML5 <output> élément

L'élément <output> représente le résultat d'un calcul ou d'une action utilisateur (comme celui effectué par un script JavaScript).

Cet élément est sémantiquement approprié pour afficher des résultats de calculs, des totaux, ou tout autre contenu généré dynamiquement.

Support navigateur actuel (2024)

Chrome : ✅ Version 10+
Firefox : ✅ Version 4+
Safari : ✅ Version 7+
Edge : ✅ Version 12+
Support global : 97% des navigateurs

Exemple : Calculatrice simple avec <output>

Exemple :     📋 Copier le code

<form>
  <label for="number1">Premier nombre :</label>
  <input type="number" id="number1" name="a" value="0" min="0" max="100">
  
  <br><br>
  
  <label for="number2">Deuxième nombre :</label>
  <input type="number" id="number2" name="b" value="0" min="0" max="100">
  
  <br><br>
  
  <strong>Résultat : </strong>
  <output name="result" for="number1 number2" id="calc-output">0</output>
</form>

Exemple avancé avec slider :

Exemple :     📋 Copier le code

<form>
  <label for="slider">Valeur 1 :</label>
  <input type="range" id="slider" name="a" value="50" min="0" max="100">
  <span id="slider-value">50</span>
  
  <br><br>
  
  <label for="number-input">Valeur 2 :</label>
  <input type="number" id="number-input" name="b" value="25" min="0" max="100">
  
  <br><br>
  
  <strong>Addition : </strong>
  <output name="sum" for="slider number-input">75</output>
  
  <br>
  
  <strong>Multiplication : </strong>
  <output name="product" for="slider number-input">1250</output>
</form>

HTML5 Éléments de formulaire supportés en 2024

Autres éléments de formulaire HTML5 toujours d'actualité :

Bonnes pratiques 2024

• Accessibilité : Toujours utiliser des <label> avec vos inputs
• Validation : Combiner validation HTML5 et JavaScript côté client
• Sécurité : Toujours valider les données côté serveur
• Performance : Utiliser les types d'input appropriés (email, tel, url, etc.)
• Expérience utilisateur : Fournir des messages d'erreur clairs