Forms

Using forms is a way of collecting user data. Blazor WebAssembly has a built-in <EditForm> component, you can also use HTML <form> tag.

You can download the example code used in this topic on GitHub.

Comparing between <EditForm> and <form>

EditForm is a built-in component with many pre-build functions like validation, handle submits, allow nested EditForm.

<form> is an HTML tag and have no pre-build functions.

Syntax comparison

<div>EditForm:</div>
<EditForm Model="Person">
    <InputText @bind-Value="Person.Name"></InputText>
</EditForm>

<div>HTML form:</div>
<form>
    <input type="text" @bind="Person.Name"/>
</form>

@code {
    public Person Person { get; set; } = new();
}

EditForm requires a Model parameter, whereas <form> does not.

Comparing between Blazor and HTML form controls

Form controls are the element that are used to collect user's data. Some examples of form controls are textbox, combo box, radio, checkbox and so on.

HTML form controls are <input> with different type attribute. Some of HTML form controls example are:

<input type="text" />
<input type="radio" />

Blazor form controls are built-in components that can be only used inside the EditForm component. Those components have pre-build functions. Some of Blazor form controls example are:

<InputText></InputText>
<InputDate></InputDate>

Blazor form controls are good in general, it has done a lot of work about validation, UI. On the other hands, Blazor form controls has some limitations. For example, InputText is only supporting onchange HTML event and there is no way for it to change it to another HTML event, oninput for an example.