Les formulaires web ont souvent une mauvaise e-réputation auprès des designers web. Pourtant, ils sont incontournables dès que l’on veut recueillir des données sur les utilisateurs ou les faire interagir avec une application en ligne. Pour rendre la création des formulaires HTML moins laborieuse, voici une série de liens pour mieux comprendre l’accessibilité des formulaires, avoir des exemples pour l’inspiration, générer des formulaires en ligne. Pour finir, je vous ai ajouté une liste de plugin jQuery pour rendre vos formulaires un peu plus «sexy» :-)
Généralités sur les formulaires
- Formulaire accessible – Article didactique tout droit sorti du puit de science d’Openweb. Voir aussi Validation avancée des formulaires.
- New form features in HTML5 – Les nouvelles fonctionnalités et attributs des éléments de formulaires HTML5 par Opera.
- Prettier Accessible Forms– Fabriquer des formulaires compatibles tous navigateurs, à la fois beaux et accessibles ! Traduction française : De jolis formulaires accessibles par Romy Tetue.
Exemples de formulaires
- Wufoo Examples – Des exemples de formulaires pour tout types d’utilisation.
- Bootstrap Forms – Encore des exemples d’éléments de formulaires avec les styles associés. Via @cognard
- Formulaire (Pastbin) – Exemples de balises et attributs des formulaires HTML5 via @tr13ze
- Contact form HTML5 — Un formulaire de contact simple et efficace à la mode HTML5, par @tr13ze
- Have a Field Day with HTML5 Forms – Tutoriel pas à pas pour styler un formulaire HTML5 qui pourra servir de base pour vos travaux.
Générateurs de formulaires en ligne
- SOC formulaires – Création de formulaires HTML avec générateur de script PHP et MySQL by @Nico3333fr via @HTeuMeuLeu
- reFormedapp – Encore de la création de formulaire via une interface plutôt sympathique. Via @Guillaume_DEB
- Wufoo – Cette application en ligne vous aide à créer des formulaires accompagnés automatiquement des scripts de backend pour la base de données.
Une touche de jQuery
- jQuery Masked Input — Masque de saisie pour les champs input
- jQuery Placeholder — L’attribut de formulaire HTML5 «placeholder» pour les navigateurs anciens
- «input type = password» — Affichage des mots de passe à la demande avec jQuery
- Fancy Sliding Form — Affichez vos formulaires sous forme de Slideshow
- jQuery Form Plugin — Mettez de l’Ajax dans vos formulaires HTML
- Webform to wizard –Transformez les formulaires en «assistant»
- Uniform — Des styles de formulaires « sexy » avec jQuery
- jqTransform — Stylez vos formulaires avec jQuery et CSS
- jQuery UI Selectmenu — des menus « select » personnalisés à la sauce ARIA
N’hésitez pas à partager vos ressources préférées dans les commentaires :-)
Articles sur le même sujet
PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car Il n'y pas d'amour, il n'y a que des preuves d'amour
(Jean Cocteau) ;) Merci d'avance.
Afin de satisfaire le plus grand nombre, j'ai ajouté
un bouton Flattr parce que vous le valez bien ;)
[...] background-position: 50% 0px ; background-color:#222222; background-repeat : no-repeat; } css.4design.tl – Today, 3:12 [...]
[...] } #themeHeader #titleAndDescription * { color: black; } css.4design.tl – Today, 6:38 [...]
[...] http://css.4design.tl/ressources-formulaires-html [...]
[...] 19 ressources pour la création de formulaires HTML [...]
[...] 19 ressources pour la création de formulaires HTML Non classé Loading google.load('search', '1', {language : 'fr', style : google.loader.themes.MINIMALIST}); google.setOnLoadCallback(function() { var customSearchOptions = {}; var customSearchControl = new google.search.CustomSearchControl( '010884923560199236739:lj_8hirmngk', customSearchOptions); customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET); var options = new google.search.DrawOptions(); options.setAutoComplete(true); customSearchControl.draw('cse', options); }, true); Actualités par thème [...]
alors là je dit bravo et merci d’avoir regroupé tout ces liens pour les formulaires, cette page est bookmarkée de-suite pour moi !
petite remarque supplémentaire : le site http://js.4design.tl/jquery-masked-input-masque-saisie-input-1422 est particulièrement bien fait et les explication claires!
Merci beaucoup pour ces explications et les liens. :-)
[...] 20 ressources pour la création de formulaires HTML [...]
[...] 20 ressources pour la création de formulaires HTML [...]
Bonjour, J’adore votre site, vos mots d’humour…. Je cherchais simplement un script pour insérer dans mon formulaire de commentaire un message du style : » Me prévenir par un email du prochain commentaire sur cet article. » mais pour l’instant je n’ai pas encore trouvé. Mais je persiste…. je finirai bien par trouver ici ou ailleurs :) En tous cas j’aime beaucoup votre site, le design la couleur… tout !
Excellente continuation et peut-être à bientôt car je fouine toujours pour trouver de nouvelles astuces et codes :)
[...] 20 ressources pour la création de formulaires HTML [...]