Signaler les champs obligatoires
▻http://romy.tetue.net/signaler-les-champs-obligatoires
Comment bien signaler les champs de saisie obligatoire ? Avec l’astérisque conventionnelle, mais attention : c’est moins simple qu’il n’y paraît ! Voyons cela pas à pas… Baliser les champs obligatoires comme tels Cela se fait très simplement avec l’attribut HTML5 dédié, required, qui s’utilise comme suit…
#required #HTML5 #a11yDesign #a11y #formulaires #forms #astérisque #tutoriel
Design Better Forms – UX Collective
▻https://uxdesign.cc/design-better-forms-96fadca0f49c
form. Be conversational. Be funny. Gradually engage. Do the unexpected. It is the role of the designer to express their company’s brand to elicit an emotional reaction. If done correctly, it will increase completion rates. Just make sure you don’t violate the rules listed above.
Voila une belle liste des erreurs que nous pousse a faire nos clients, et marketeux qui savent mieux que nous organiser une page agréable et raisonné ;-) . Perso on me les as déjà toutes faites quasiement et comme un lache de tâchon j’ai éxécuté … les ordres (appelé recommandations dans le monde du travail …)
La binarité, c’est pas mon genre | Antonin Le Mée | TEDxRennes - YouTube
▻https://youtu.be/8aM0mWvEdvo
Puisant dans son expérience auprès d’associations LGBTI (Lesbiennes Gays Bisexuelles Transgenres Intersexes) ainsi que dans sa propre vie, Antonin Le Mée explique comment la société occidentale est structurée par des cases binaires liées au sexe et au genre. Que ce soit dans les comportements attendus ou les systèmes administratifs, partout on classe en deux catégories étanches : mâle / femelle, homme / femme, monsieur / madame...
X-editable :: In-place editing with Twitter Bootstrap, #jQuery UI or pure jQuery
▻https://vitalets.github.io/x-editable
X-editable
In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
This library allows you to create editable elements on your page. It can be used with any engine (bootstrap, jquery-ui, jquery only) and includes both popup and inline modes. Please try out demo to see how it works.
#formulaires #javascript (via .Gilles)
Noms de personnes à travers le monde - W3C
►https://www.w3.org/International/questions/qa-personal-names
Document du W3C (traduit par @notabene :)), expliquant que les noms peuvent être méga différents suivant les pays et cultures (donc y compris à l’intérieur d’un même pays).
Et donc que dans les formulaires web et bases de données (profil utilisateur, annuaires, clients de commerce, etc), ça implique des choses, et notamment que sauf si on a une raison super importante de séparer en plusieurs champs, il est préférable de rester simple et d’avoir UN seul unique champ générique pour le nom.
(En ce qui me concerne, cela m’interroge pour le plugin Contacts & Organisations de SPIP, qui oblige à avoir nom et prénom dans deux champs pour les personnes physiques - spip_contacts. Le champ prénom pourrait être optionnel… je sais pas, un truc comme ça. cc @cym @marcimat @drbouvierleduc)
@fil le prestataire bancaire d’un de mes clients me précise que pour les paiements Sepa par exemple (toute l’Europe au moins), c’est apparemment obligatoire de demander nom et prénom.
Changeset 83529 – SPIP-ZONE
▻http://zone.spip.org/trac/spip-zone/changeset/83529
Une nouvelle balise qui sera peut-être utile à celleux qui veulent afficher leurs réponses enregistrées.
#VOIR_REPONSE{champ} à utiliser dans une boucle (FORMULAIRES_REPONSES).
Peut-être pas tout de suite pour #spip_blog...
Je pense que ça vaudra le coup quand la balise en question sera présente dans la doc du plugin Formidable. Ça évitera de causer du truc dans la gazette en filant un lien vers le trac de la zone (qui n’est pas ce qu’il y a de plus user friendly).
En attendant, j’ai déjà refilé l’info à pas mal de personnes sur l’irc de #spip :p
Comme souvent, cela rappelle qu’il est vraiment important de tenir la doc d’un projet à jour, sans quoi beaucoup de fonctionnalités restent connues uniquement par leurs auteurs et les quelques personnes qui n’ont que ça à faire de lire les commits de la zone (j’en fais partie ^^).
Et hop, l’ami @suske l’a collé sur le carnet de contrib :
►http://contrib.spip.net/Balises-et-boucles-avec-Formidable#balise_voir_reponse
Merci mignon :)
Yep 100% OK sur la doc manquante, d’où le work in progress sur le carnet contrib. J’espère aboutir sous quinzaine (ou mieux si des mains complémentaires s’y mettent)
WTF, forms ?
▻http://wtfforms.com
Friendlier HTML form controls with a little CSS magic. Designed for IE9+, as well as the latest Chrome, Safari, and Firefox.
#Morphing_Buttons Concept | Codrops
▻http://tympanus.net/codrops/2014/05/12/morphing-buttons-concept
Some inspiration for a morphing button concept where the action element (button) morphs into a component. The examples show different types of components, i.e. fullscreen overlay, modal window, sidebar and more.
Better #Password Masking For Sign-Up Forms | Smashing UX Design
►http://uxdesign.smashingmagazine.com/2012/10/26/password-masking-hurt-signup-form
j’aime pas les #formulaires d’#inscription web avec la double saisie de mot de passe ; cet article explique pourquoi et comment faire autrement
Il y’a vraiment des gens qui sont assez teubés pour pas arriver à faire correspondre les mots de passe ?
L’ergonomie je veux bien, mais faut peut-être arrêter un peu la branlette à un moment.
C’est pas tellement le fait d’y arriver ou pas. C’est juste chiant de taper deux fois de suite le même machin abscons.
Gestion des mots de passe : depuis un certains temps j’utilise LastPass, une sorte d’agrégateur de mots de passe
Côtés pratiques ; un seul « super » mot de passe à retenir pour accéder à tous les autres (fonction remplissage automatique des formulaires d’identification), génération automatique et aléatoire de mots de passe.
Maintenant, ayez quand même une sauvegarde « en dur » de vos mots de passe. Question sécurité et confidentialité, pas d’info sur la probité du machin si ce n’est que c’est un service étatsunien. Qui a déjà entendu parler de ce service ?
►http://www.clubic.com/telecharger-fiche416850-lastpass.html
@sombre je suis passé à Keepass (Windows) et KeepassX (linux/Mac) et j’ai un fichier qui a l’air sûr.
Je me méfie des trucs qui remplissent tout seul, je préfère aller chercher moi-même les informations.
Cross-Origin Resource Sharing
►http://www.w3.org/TR/cors
pour des #formulaires qui tournent en #ajax d’un serveur à un autre :
# Access-Control-Allow-Origin : *
ça permet à un #SPIP d’appeler des formulaires #CVT sur un autre SPIP (et ça roxe)
Ça permet ou ça permettrait ?
►http://caniuse.com/#search=cors (et l’onglet ressources)
la doc correspondante pour amazon #S3 :
►http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html
o-sam-o/jquery.select2Buttons · GitHub
►https://github.com/o-sam-o/jquery.select2Buttons
Select2Buttons is a jQuery plugin that provides an alternative to the standard html select. The plugin converts selects into a series of button like elements, and if used correctly can provide a better visual representation of the options available to a user.
Redesigning the Country Selector - Baymard Institute
►http://baymard.com/labs/country-selector
un truc sympa pour transformer un select de formulaire en input avec auto-complétion à la sélecteur générique
In-Field Labels jQuery Plugin
►http://fuelyourcoding.com/scripts/infield
This is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label.
Un plugin jquery pour obtenir le même effet que sur le formulaire de recherche de plugins.spip.net ou chrysalide.coop
#Noms de personnes à travers le monde
►http://www.w3.org/International/questions/qa-personal-names.fr.php?changelang=fr
Comment les noms de personnes diffèrent-ils à travers le monde, et quelles sont les implications de ces différences dans le design de #formulaires, #bases_de_données, #ontologies, etc. pour le #Web ?
#bdd #conception #i18n #l10n
Merci @notabene pour cette belle traduction !
Et, sur l’original en anglais, ►http://seenthis.net/messages/34988
Oh mais de rien mon bon @nhoizey !
Les subtilités des #formulaires de #login en JS
►http://pullrequest.org/2011/10/19/subtilites-du-login.html
Quoi de plus simple qu’un formulaire de login ? En HTML, certes, mais lorsque qu’on parle d’application riche en #javascript, c’est une autre histoire.
Si vous ne comprenez pas pourquoi le navigateur ne retient pas vos logins, ne propose pas le mot de passe associé, ou ne réagit pas à la touche entrée, lisez la suite !
Est-ce que cela explique la #SeenThis_bug qui fait que mon mot de passe n’est pas mémorisé par mes navigateurs (ni Firefox, ni Chrome), ce qui est une des pires agacenteries de #SeenThis.
Des formulaires bien structurés, faciles à styler - romy.tetue.net
►http://romy.tetue.net/spip.php?article523
#css #html #webdev #design #formulaires
