background preloader

HTML5 : datalistes et sélecteurs

HTML5 : datalistes et sélecteurs
Avec l'annonce d'HTML5, de grandes nouveautés accompagnent les formulaires. Ils peuvent enfin s'enrichir afin de s'adapter au plus près des nouveaux besoins. Ainsi l'élément <datalist> fait son entrée. Des suggestions de choix Inauguré avec la vague HTML5, <datalist> est un élément de formulaire permettant de lier une liste de choix à un élément input. Par défaut, <datalist> demeure invisible. Compatibilité navigateur de l'élément <datalist> Un navigateur ne supportant pas l'élément n'affichera aucune suggestion. Utilisation classique Dans la majorité des situations, il sera utile d'associer un champ d'entrée texte <input type="text"> à une liste de suggestions. <label for="choix_bieres">Indiquez votre bière préférée :</label><input list="bieres" type="text" id="choix_bieres"><datalist id="bieres"><option value="Meteor"><option value="Pils"><option value="Kronenbourg"><option value="Grimbergen"></datalist> Démonstration Aperçu sous Internet Explorer 10 Utilisation multiple Démonstration

Can I use... Support tables for HTML5, CSS3, etc Input HTML 4 était bien limité concernant les types de champs. HTML5 apporte énormément en terme de nouveautés. Ces innovations sont réunies sous un nom : les Web Forms (ou HTML5 Forms). Souvenez vous des éléments de saisie et de soumission de formulaire en HTML4 assez peu nombreux : <textarea> <select> (<option> et <optgroup>) <button> <input> (text, password, file, radio, checkbox, submit, image, hidden, reset,button) Grâce à l'apport de HTML5 et des Web Forms, de nouveaux éléments et types d'éléments arrivent dans nos formulaires. Les nouveaux types d'<input> Comme listés précédemment, les types de champs n'étaient pas nombreux. Au moment de mes tests, j'ai constaté que Chrome - qui prenait en charge certains types d'input de type datation dans ses versions précédentes - a revu ses compétences à la baisse dans la version 16. La plupart des nouveaux types non pris en charge par un navigateur sont traduits par un champ de type text. Les nouveaux éléments de formulaire

Aptana Meter Autre nouveauté dans le monde HTML 5, c'est la balise METER. Fini le temps où des mesures traînaient un peu partout dans les pages sans qu'on puisse deviner par le markup la signification de chacun. La nouvelle balise Meter a été introduite pour corriger la sémantique de l'information de la page lorsqu'on veut indiquer une mesure dans une plage connue. De plus, ça s'affiche joliment.Essentiellement, vous pourrez indiquer que l'espace disque est utilisé à 35% ou que vous avez obtenu un pointage de 7/10 dans votre code HTML (exemple minimaliste) : <meter>35%</meter> <meter>7/10</meter> <meter>35%</meter><meter>7/10</meter> Visuellement, ça ne sert pas à grand chose si on n'établit pas les bornes dans laquelle se fait la mesure. <meter min="0" max="10" value="2">2/10</meter> <meter min="0" max="10" value="5">5/10</meter> <meter min="0" max="10" value="8">8/10</meter> Comment ça fonctionne ? <meter value="0.5">50%</meter> <meter value="0.5">50%</meter> Tags: HTML

Notepad++ Nouveautés Le HTML5, le successeur du HTML4.01 est arrivé depuis quelques temps déjà. Il offre pas mal de nouveauté intéressante, voici un rapide aperçu du potentiel du HTML 5: Plus d'interactivité L'une des principales nouveautés de HTML 5 : l'interactivité ! Il est très courant sur le Web de rencontrer des sites web qui manipulent des données hautement interactives telles que : des vidéos, des musiques, des animations,... et bien sûr jusqu'à présent toutes ces technologies nécessitaient des langages tiers et indépendant du HTML. Et bien à partir de maintenant, le langage HTML 5 permet également au webmaster de construire des applications web plus dynamique du côté de l'interface utilisateur sans avoir la nécessité de recourir à d'autres langages : Javascript, Flash, Ajax.... Un code plus propre HTML5 permet aux développeurs un nettoyage automatique du code, ce qui permet ainsi de simplifier la structure d'une page et ainsi alléger le poids final de la page web. Un code plus facile à comprendre

100 Websites You Should Know and Use (updated!) Entertainment Meet David Peterson, who developed Dothraki for Game of Thrones There are seven different words in Dothraki for striking another person with a sword. Culture My Year of TED: How 54 talks changed a life By Kylie Dunn What do you get when you cross a 39-year-old perfectionist with 54 TED Talks and far more honesty than any person probably needs to experience?

Related: