How to create a Basic form in Blazor web app — Part 2

Welcome to part 2 of my creating a basic blazor form tutorial.

At the end of the first tutorial we created a razor component called “Register”, created a model class named “Person.cs” that will be used to aid with binding data from the form to a class and its properties, in addition, we made the form look somewhat presentable using Bootstrap’s excellent classes.

In this tutorial we will implement data binding on the form in addition to validation.

InputText Component

So carrying on from where we were inside of our EditForm component, the EditForm component generates a html form to display on the page this means that we can use html elements such as input and select in between this component. However, we know that Blazor already offers an EditForm component for form functionality, Blazor also offers components that replicate various other html elements such as InputDate, InputCheckbox and fortunately for us InputText which offer additional capabilities too. So for this tutorial we will be altering our existing code to implement 3 instances of InputText.

Now open the “Register” component and replace the “input” with the type of email with the below line.

<InputText type="email" @bind-Value="person.Email"…