background preloader

Formulaires HTML5 : nouveaux types de champs

Formulaires HTML5 : nouveaux types de champs
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 Related:  HTML/CSSHTML CSS

HTML5 : Le pense bête des balises disponibles HTML5 est certainement l’une des technologies web les plus prometteuses de ses prochaines années. Il est donc nécessaire de regarder dans sa direction et de commencer à expérimenter certaines choses. Aujourd’hui, nous vous proposons une cheatsheet intéressante qui reprend l’ensemble des nouvelles balises disponibles en HTML5 qui pourront vous être nécessaires lors de la construction de votre application web : Nous ne commenterons pas l’infographie mais nous espérons qu’elle vous aidera dans votre vie quotidienne de développeur web, qu’elle soit utilisée uniquement pour vous rappeler ce qui existe ou comme première prise d’informations et aiguiller votre recherche sur ce développement d’avenir. N’hésitez pas à partager vos créations ! Via

HTML5 Introduction Formulaires HTML5 : placeholder, required, pattern et validation HTML5 introduit de nombreuses nouveautés pour les formulaires pour améliorer l'aide à la saisie et les contrôles disponibles pour l'utilisateur. Plusieurs attributs simples à mettre en place améliorent la prise en charge des formulaires, tout en se passant de JavaScript. placeholder est un attribut qui permet de renseigner un texte indicatif par défaut dans un champ de formulaire. C'est une valeur qui s'efface dès que l'utilisateur active le champ de formulaire (ou commence à écrire dedans si vous êtes sous Webkit). Mise en place Ce comportement a très longtemps été mis en place grâce à JavaScript et des techniques dans ce genre : Avec l'arrivée de HTML5, la syntaxe se simplifie pour donner : La présence d'un placeholder ne vous dispense pas de renseigner un label pertinent. Démonstration Éléments compatibles L'attribut placeholder peut être placé sur les éléments : <input> : de type text, search, password, url, tel, email <textarea> Compatibilité de l'attribut placeholder Styler le placeholder

Cycle2 Overview Cycle2 is a versatile slideshow plugin for jQuery built around ease-of-use. It supports a declarative initialization style that allows full customization without any scripting. Simply include the plugin, declare your markup, and Cycle2 does the rest. Highlights: Supports all browsers Declarative: no scripting needed! How it Works It's very simple really, even your grandmother could use it. Include jQuery and the Cycle2 plugin on your page. Need more details? What's that you say? Responsive Donations Donations are a great way to say "Thank you, malsup". Go ahead, click the button!

Les 30 sélecteurs CSS à connaître absolument tomsyweb.com Buy this domain The owner of tomsyweb.com is offering it for sale for an asking price of 345 GBP! Related Searches This page provided to the domain owner free by Sedo's Domain Parking. Disclaimer: Domain owner and Sedo maintain no relationship with third party advertisers. LibreOffice developer shows prototype Android and HTML5 ports The Document Foundation (TDF) announced plans last year to create mobile and cloud versions of LibreOffice. A preliminary iOS porting effort that was undertaken earlier in 2011 demonstrated the viability of the project and showed that the open source office suite could have a future beyond the desktop. In a presentation this week at the FOSDEM conference, SUSE developer Michael Meeks shed some light on the current status of the porting project. The presentation slides, which he published on his blog, offer insight into some of the underlying technical details and the rationale for some of the high-level design decisions. Reusing code The LibreOffice developers aim to maximize the amount of code that is shared between the desktop, mobile, and cloud variants of the office suite. Due to the inherent complexity and sophistication of an office suite, writing a separate version for each environment or rewriting from scratch in a form that is more conducive to portability would be impractical.

30 Brilliant examples of JavaScript Use JavaScript is something I have been planning to start learning properly for the last few months.To really motivate me, I thought it would be a good idea to look into some interesting uses of the language. I thought I’d share these interesting uses with you in this post. Though none of these examples are really JavaScript only, most put HTML and CSS, to be more exact HTML5, and possibly a few different languages and APIs. JavaScript is proving itself as an extremely powerful language with browser games, developers are able to make games using JavaScript that are on par with flash games. Quake II GWT Port HTML5 Chess Game Akihabara CapMan Akiba Hero Minesweeper UI is probably what JavaScript is best known for, whether is adding Animation to a site, or Form Validation Gmail Everytime you check your inbox using the refresh button, you’re saving time not needing to fully reload the whole site. Google Homepage Sexy sliding JavaScript side bar menu using mootools Sliding Boxes and Captions with jQuery

L'élément <mark> pour attirer l'attention Sortez votre feutre jaune Nouveau venu en HTML5, l'élément <mark> est un surligneur de texte. Il marque un , que l'on souhaite mettre en valeur d'une façon particulière, pour attirer l'attention. Son style par défaut est celui d'un texte surligné en jaune (dans les navigateurs qui le reconnaissent). Pour les anciens navigateurs qui ne comprendraient pas ce style par défaut, il suffit de l'ajouter à votre feuille CSS, voire de le personnaliser en choisissant d'autres couleurs. Usages Que peut-on imaginer comme usages pratiques à cette balise ? Démonstration de l'élément mark Marquer les mots trouvés dans des résultats de recherche Par exemple sur la page de résultats, les passages surlignés seront ceux qui correspondent exactement aux termes recherchés. <p>5 résultats pour le mot "HTML"</p><ul><li>... Marquer une portion de texte Marquer une portion de code source Un passage spécifique peut être surligné pour s'y référer ultérieurement. Marquer le jour actif d'un calendrier Prise en charge

Backbone.js Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. The project is hosted on GitHub, and the annotated source code is available, as well as an online test suite, an example application, a list of tutorials and a long list of real-world projects that use Backbone. Backbone is available for use under the MIT software license. You can report bugs and discuss features on the GitHub issues page, on Freenode IRC in the #documentcloud channel, post questions to the Google Group, add pages to the wiki or send tweets to @documentcloud. Backbone is an open-source component of DocumentCloud. Downloads & Dependencies (Right-click, and use "Save As") Backbone's only hard dependency is Underscore.js ( >= 1.5.0). Introduction Many of the examples that follow are runnable. Upgrading to 1.1

Différence entre pseudo-élément et pseudo-classe Différence entre pseudo-élément et pseudo-classe Cet article a 2 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 10 167 fois. Petit sujet de vocabulaire aujourd’hui pour soulever un problème de différenciation entre la pseudo-classe et le pseudo-élément en CSS. Nous allons voir comment les distinguer sur la forme et sur le fond, pour cela essayons déjà de regrouper sur cette pages les pseudo-classes et pseudo-éléments existant (ça évolue, ils ne seront peut-être pas tous), vous verrez peut-être automatiquement comment les différencier. Les pseudo-classes en CSS2.1 Il en existe des très connues, et des un peu moins, voici celles que j’ai pu relever : :link : cible les liens non visités ;:hover : cible un élément pointé visuellement (survolé) grâce à une souris par exemple ;:active : cible un élément activé par l’utilisateur, par exemple au moment du clic sur le bouton gauche de la souris. Je ne parle ici que de sélecteur CSS2.1. CSS3 à la rescousse !

HTML5 Boilerplate - A rock-solid default template for HTML5 awesome. Afficher une liste HTML sous forme de tableau par CSS Comment modifier l’affichage de vos listes HTML pour les rendre un peu plus sexy en modifiant uniquement ses feuilles de styles CSS ? Les listes, vous le savez, sont très efficaces pour hiérarchiser les données. Elles optimisent votre référencement en simplifiant le code HTML superflu. Elles permettent d’augmenter le ratio contenu par rapport au code. Cas HTML / CSS pratiques Liste HTML basique Voyons quelques exemples de modifications basiques en CSS en prenant comme point de départ une liste de jours (type orderer list <ol>) contenant une liste d’horaires sur le modèle suivant : Ce qui nous donne un affichage du type : Liste HTML améliorée par CSS On peut rendre cette liste un peu plus sympa en utilisant une feuille de style « Planning.css ». On peut créer ainsi une feuille de style très simple pour colorer et mettre en forme notre exemple. On obtient alors une liste mise en forme comme sur cette copie d’écran : Liste HTML sous forme de tableau Liste HTML et CSS 3 Conclusion

Related:  Projet Pearltree