Form Controls

Using form controls is a visual way to collect data of the users. For example, you want to collect a person's data like name, date of birth, etc... Your form should have a textbox to collect the name, a date selector to collect the date of birth and a button for the user to submit the form.

There are 2 types of form controls. Blazor form controls and HTML form controls. This guide will give you an idea to choose an approach.

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

Blazor form controls

Blazor has a lot of built-in form controls for you to use. All of Blazor controls are required to use within an EditForm. A Blazor form control binds its value with a property by @bind-Value, that means whenever a form control changes, the property is updated as well. Blazor form control only support onchange event. The following code is an example of a basic form with Blazor form controls:

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

<div>Person name: @Person.Name</div>

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

HTML form controls

Blazor also support HTML form controls. The HTML form controls can be used with or without EditForm. An HTML form control binds its value with a property by @bind, you can also specify the update event for the HTML form control by @bind:event. The following code is an example of a basic form with HTML form controls:

<EditForm Model="Person">
    <label>Name:
        <input type="text" @bind="Person.Name" @bind:event="oninput"/>
    </label>

</EditForm>

<div>Person name: @Person.Name</div>

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