Maybe like me, you wondered why they didn’t add InputEmail and InputPassword in the form components for our Blazor applications …. Because using these components provides a great user experience and ease of implementation for us.
| 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> |
But it’s not like InputPassword and InputEmail are never used… That’s about it! And so we had all possible form fields. Well, I’m not ashamed to say it, but so far I’ve done without and used the classic html tag in my forms
The mystery of “why I never thought of it”!?
A bug in the matrix. That’s all I can think of.
After that, the only excuse I found was that the documentation never mentions this.
You may not believe me but I had to ask Steve Sanderson… “use the ‘type’ attribute: ” and I fell.
Field comparison
Well I’ll take this opportunity to show you a little trick to check the typing of passwords or emails in a form
Most of the time we place 2 email fields with the attribute autocomplete=”off” and in the C# code we compare the values.
💡ASTUCES
If you don’t want your user to be able to cut/copy/paste data in the fields of a form: add the attributes onpaste=”return false;” onCopy=”return false” onCut=”return false”
You can go even further with: onDrag=”return false” onDrop=”return false”
Data annotation to simplify our lives
The easiest way is to use the [Compare] attribute and let the form work its magic! : [Compare(nameof(Email), ErrorMessage = “emails do not match”)]
<code></code>
