Le formulaire parfait

Code

HTML attribute

• Autocomplete - https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
• Datalist - https://developer.mozilla.org/fr/docs/Web/HTML/Element/datalist
• Input type - https://www.smashingmagazine.com/2019/01/html5-input-types/

CSS

• Form or fieldset :
  • Focus within
• Placeholder :
  • Placeholder-shown
• Input :
  • focus
  • optionnal
  • required
  • disabled
  • valid
  • invalid
• Input[number] :
  • in-range
  • out-of-range

Surcouche JS - Librairies

Validation

• Hyperform - https://hyperform.js.org
• BunnyJS - https://bunnyjs.com/

Persist

• Garlic - http://garlicjs.org/
• HTML Form Persistence - https://github.com/FThompson/FormPersistence.js

Paiement

• PaymentInfo - http://zdfs.github.io/toscani/paymentInfo/index.html
• Cleave - https://nosir.github.io/cleave.js/

Placeholder

• Dynamic Placeholders - https://codepen.io/joelewis/pen/ePOrmV

Mask

• Cleave - https://nosir.github.io/cleave.js/
• Text Mask - https://text-mask.github.io/text-mask/

Storage

• Form storage - https://appleple.github.io/form-storage/

Password Strength

• Nothing yet

Inline validation

• https://github.com/justmarkup/demos/blob/gh-pages/enhance-login-form/v6/script.js

Progress bar completion

• Fort.js - https://github.com/idriskhenchil/Fort.js

Address GeoComplete

• Algolia Search - https://community.algolia.com/places/
• Address Complete - https://github.com/theKashey/address-complete
• Google Place complete - https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete

Autocompletion

• Awesomplete - https://leaverou.github.io/awesomplete/
• Autocomplete Dropdowns with the Datalist Element - https://blog.teamtreehouse.com/creating-autocomplete-dropdowns-datalist-element

Limit Textarea fill

• Count - https://sacha.me/Countable/

Articles

Accessiblity

• https://webaim.org/techniques/forms/
• https://stegosource.com/how-to-build-html-forms-right-accessibility/
• https://austingil.com/build-html-forms-right-user-experience/
• https://www.bram.us/2020/11/04/preventing-double-form-submissions/
• https://austingil.com/how-to-build-html-forms-right-semantics/
• https://www.bram.us/2020/11/04/preventing-double-form-submissions/

UX

• https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-1/
• https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-2/
• https://uxplanet.org/the-18-must-do-principles-in-the-form-design-fe89d0127c92
• https://uxplanet.org/10-rules-for-efficient-form-design-e13dc1fb0e03
• https://austingil.com/how-to-build-html-forms-right-accessibility/

Date

• https://medium.com/samsung-internet-dev/making-input-type-date-complicated-a544fd27c45a
• http://uxmovement.com/forms/bad-practices-on-birthdate-form-fields/

Zipcode

• https://css-tricks.com/html-for-zip-codes/

Focus-within

• https://dev.to/vtrpldn/grab-your-user-s-attention-with-the-focus-within-css-selector-4d4

Validation

• https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire
• https://css-tricks.com/form-validation-part-1-constraint-validation-html/
• https://medium.com/the-ui-files/form-validation-with-javascript-4fcf4dd32846

Password Strength

• https://github.com/dropbox/zxcvbn
• https://css-tricks.com/password-strength-meter/

Cheat sheet

• https://www.cxpartners.co.uk/our-thinking/form_design_guidelines_crib_sheet_free/

Textarea

• https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/

Books

• “Form Design Patterns” by Adam Silver - https://formdesignpatterns.com/
• “Web Form Design” by Luke Wroblewski - https://www.lukew.com/resources/web_form_design.asp