Creating a data entry form

In the previous chapters of this book, we used the standard HTML form element to collect user input. However, the Blazor WebAssembly framework provides an enhanced version of the standard HTML form element called the EditForm component.

The EditForm component not only manages forms but also coordinates both validation and submission events. The following code shows a simple EditForm element:

<EditForm Model="expense" OnValidSubmit="@HandleValidSubmit">
    Vendor <InputText @bind-Value="expense.Vendor"
                      placeholder="Enter Vendor"/>
    <button type="submit">
        Save
    </button>
</EditForm>
@code {
    private Expense expense = new();
}

This is the HTML that is rendered by the proceeding EditForm component:

<form>
    Vendor <input placeholder="Enter Vendor" 
                  class="valid" _bl_2="...