Peut-être que comme moi, vous êtes demandé pourquoi ils n’avaient pas ajouté InputEmail et InputPassword dans les composants de formulaire pour nos applications Blazor …. Car l’utilisation de ces composants apporte une expérience utilisateur formidable et un simplicité de mise en place pour nous.
Input component | Rendered as… |
InputCheckbox | <input type= »checkbox »> |
InputDate<TValue> | <input type= »date »> |
InputFile | <input type= »file »> |
InputNumber<TValue> | <input type= »number »> |
InputRadio<TValue> | <input type= »radio »> |
InputRadioGroup<TValue> | Group of child InputRadio<TValue> |
InputSelect<TValue> | <select> |
InputText | <input> |
InputTextArea | <textarea> |
Mais c’est pas comme si InputPassword et InputEmail n’était jamais utilisé… A ça près! Et ainsi on avait tous les champs de formulaire possible. Et bien je n’ai pas honte de le dire mais jusqu’à présent je m’en suis donc passé et utilisé la balise html classique dans mes formulaires
Le mystère du « pourquoi je n’y ai jamais pensé » !?
Un bug dans la matrice. Je ne vois que ça.
Après la seule excuse que je me suis trouvé et que dans la documentation on ne parle jamais de ça.
Vous me croyerez peut être pas mais j’ai dû demander à Steve Sanderson… : « use the ‘type’ attribute : <InputText type= »password » /> » et je suis tombé.
Comparaison des champs
Bon je vais en profiter pour vous montrer une petite astuce pour vérifier la frappe des mots de passe ou emails dans un formulaire
La plupart du temps on place 2 champs emails avec l’attribut autocomplete= »off » et dans le code C# on compare les valeurs.
💡ASTUCES
Si vous souhaitez que votre utilisateur ne puisse faire de couper/copier/coller de donnée dans les champs d’un formulaire : ajouter les attributs onpaste= »return false; » onCopy= »return false » onCut= »return false »
Vous pouvez aller encore plus loin avec : onDrag= »return false » onDrop= »return false »
Data annotation pour simplifier notre vie
Le plus simple et d’utiliser l’attribut [Compare] et de laisser faire la magie du formulaire !