background preloader

HTML5 : L'élément <datalist>

HTML5 : L'élément <datalist>
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. Il est voué à fournir des fonctionnalités d'auto-complétion ou d'auto-suggestion, dans un formulaire classique ou un champ de recherche, voire à d'autres éléments d'entrée, tels que les nouveaux types <input type="range">. 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. Démonstration Aperçu sous Internet Explorer 10 Utilisation multiple Démonstration Alternative vers <select>

http://www.alsacreations.com/article/lire/1334-html5-element-datalist.html

HTML5 : structure globale du document Pour débuter sereinement avec une nouvelle intégration HTML5 et comprendre ses implications, nous allons commencer par le début : la structure globale d'un document. La conception d'une page web en suivant la philosophie du standard HTML5 spécifié par le W3C (ou du standard vivant tel que désigné par le WhatWG) répond à quelques réflexes de base. La structure d'un document (l'imbrication des balises à la racine) est simplfiiée pour répondre aux attentes pragmatiques des intégrateurs et webdesigners. Un document HTML5 minimal Sans surprise, les bases d'un code HTML5 ressemblent beaucoup à celles rédigées à l'aide des précédentes versions HTML 4 et XHTML 1.x. Rétro-compatibilité oblige.

Les 5 mythes et vérités de HTML5 Les mythes Avec HTML5, mon site sera plus beau HTML5 dispose certainement d'un beau logo orange rayonnant inauguré par le W3C pour en faire la promotion, cependant il fonctionne toujours en osmose avec CSS pour régir l'apparence, la présentation, la disposition du contenu. Apprendre le html, javascript, php... Si vous souhaitez débuter et faire vos premiers pas dans la création de site, ou apprendre plus encore et améliorer vos bases en HTML ou en Javascript, apprendre à ouvrir des pop-ups, créer un livre d'Or ou tout simplement trouver des smileys, Honolulu vous propose tout cela et plus encore... Il suffit de parcourir le site, de flâner à travers les liens, en vous aidant au besoin du moteur de recherche ! Les membres du forum d'aide en html et javascript répondent à vos questions ou problèmes d'écriture de codes et vous conseillent dans la création de vos premières pages... Des logiciels, applications, gifs sont disponibles dans la zone de téléchargement...

HTML5 : Les éléments <details> et <summary> Parmi les nouveautés de HTML5 faisant écho à des applications existantes sur le web, les éléments <details> et <summary> ont le rôle de baliser un complément d'information. Un résumé et des détails Élément <details> Cet élément permet de baliser un contenu quelconque (texte, image, listes, tableaux, formulaires, etc) ayant pour rôle d'apporter une information ou des détails supplémentaires. HTML5 : Éléments <figure> et <figcaption> L'élément <figure> ne devrait pas vous être inconnu puisque son rôle est pareil à celui qu'il joue dans les supports papiers tels que les livres ou magazines afin d'illustrer et de légender des photos, des diagrammes, ou encore des schémas. Illustration légendée Inaugurés avec HTML5, les éléments <figure> et <figcaption> fonctionnent de concert pour associer une légende à une illustration ou un autre élément média. <figure> <img src="image.jpg" alt="" /> <figcaption>Légende associée</figcaption></figure> Élément <figure> <figure> est une unité de contenu, c'est-à-dire que cet élément sert de conteneur dans lequel s'insèrent divers éléments comme des images, des schémas, des vidéos, des tableaux ou encore des blocs de code.

Encoder son site intégralement en UTF-8 Il existe deux méthodes en PHP permettant d'afficher du texte en UTF-8. Après avoir bien sûr encodé correctement tous les fichiers selon la manière décrite juste au-dessus. L'une est radicale au niveau du fichier, l'autre se fait au cas par cas, sur chaque texte à afficher. La méthode radicale consiste à mettre en première ligne de chaque fichier, un header qui va préciser au serveur de renvoyer de l'UTF-8 : HTML5 : Nouveaux éléments de section, article, header, footer, aside, nav Les éléments de section HTML5, une nouvelle façon de penser Les éléments de section (section, article, nav, aside, header, footer) segmentent des portions du document ou de l'application web, qui possèdent une valeur sémantique particulière ; contrairement à des éléments génériques comme span ou div qui ont un rôle totalement neutre, et ne servent qu'à regrouper d'autres éléments HTML pour leur affecter un style CSS commun, voire pour interagir avec eux via le DOM... Il ne s'agit donc pas de nouveaux éléments avec des noms génériques : c'est bien plus que ça ! HTML5 inclut la majorité des éléments HTML4 pour assurer une rétro-compatibilité avec les navigateurs. Au-delà de ce critère, les groupes de travail qui ont élaboré HTML5 ont su analyser les usages courants et s'adapter aux tendances du web avec (entre autres) les nouvelles façons de trier l'information sur une page web. Liste récapitulative des éléments de section HTML5

Un chat en HTML5 avec les websockets Tous les navigateurs modernes proposent un support du websocket de manière native ou via un plugin. Voici la liste des navigateurs : Chrome : support natif ; Safari : support natif ; Firefox : support natif ; Opéra : support natif mais nécessite de l'activer ; Internet Explorer : utilisation d'un prototype des websockets : websockets prototype pour IE 9. Pour Firefox Pour activer les websockets dans Firefox s'ils ne le sont pas (comme dans la version 4 par exemple), il suffit de se rendre dans la barre d'adresse et taper la commande suivante : Une page de confirmation apparaît, continuez.

Related: