Form Controls and Create Basic Form in Blazor Component

In this article, you will get answers to the following questions.

• What is Form Control?
• Can I use HTML Form Control in Blazor?
• How many types of Form Controls are supported in Blazor?
• How many Form Controls are in HTML?
• Is Blazor having built-in Form Controls?
• How many built-in Form Controls / InputComponents are in Blazor?
• Sample Blazor Form using HTML Form Controls.
• Sample Blazor Form using the built-in from InputComponents.

Before proceeding to this article, kindly refer to my previous articles.

1. Part 1. Overview of Blazor
   https://www.c-sharpcorner.com/article/overview-of-blazor2/
2. Part 2. Overview and Project Understanding of Blazor Server App.
   https://www.c-sharpcorner.com/article/understanding-of-blazor-server-app-project-structure/
3. Part 3. Blazor Component: Creation, Lifecycle, Nesting, & UI Integration
   https://www.c-sharpcorner.com/article/blazor-component-creation-lifecycle-nesting-ui-integration/

What is Form Control?

The form is the heart of the application. We are using Form to receive the input, send data to the server, and process the data. In all languages or frameworks, there are form controls. Form control is the base and mechanism to accept the input from the user.

Example

• Text-Box
• RadioButton
• etc….

Can I use HTML Form Control in Blazor?

Yes, you can use all the HTML form controls in Blazor Form.

How many types of Form Controls are supported in Blazor?

You can use the following two types of Form Controls.

1. HTML Form Controls
2. Blazor Input Components base Form Controls.

How many Form Controls are in HTML?

Following is the list of some Form Controls in HTML.

Form Control	Description
<input />	Input tag to accept the input from the user. Input tag having TYPE attribute. Type attribute decide the way of rendering on the User Interface (UI). Following is TYPE attribute values: Button, Checkbox, Color, Date, File (File Upload), Hidden, Password, Radio, submit, etc.
<label> </label>	Label tag used for caption, title for a form element.
<button></button>	The button tag has three different behaviors on the basis of the TYPE attribute: 1. button 2. reset 3. submit
<select> </select> <option></option> <optgroup></optgroup>	Three tags are used for the dropdown list.
<textarea></textarea>	To accept the user input in a multiline textbox.

Is Blazor having inbuilt Form Controls?

Yes, Blazor has its own inbuilt Form Controls.

How many built-in Form Controls / Input Components are in Blazor?

There are various types of built-in Input Component(Form Control) to receive and validate user input.

Input Component	Description
InputText	Component render as <input type=”text” />
InputTextArea	Component render as <textarea>
InputDate <TValue>	Component render as <input type=” date” />
InputNumber <TValue>	Component render as<input type=” number” />
InputFile	Component render as <input type=” file” />
InputCheckbox	Component render as <input type=” checkbox” />
InputRadio<TValue>	Component render as <input type=” radio” />
InputRadioGroup<TValue>	Group of child <InputRadio>
InputSelect<TValue>	Component render as <Select>

For more details, please visit the following link.

https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/input-components?view=aspnetcore-8.0

Before starting work on the Blazor Component.

Note. For how to create a Blazor project refer to an article link given below.

https://www.c-sharpcorner.com/article/understanding-of-blazor-server-app-project-structure/

Sample Blazor Form using HTML Form Controls.

Right-click on the PAGES folder

1. Click on ADD to get the options.

2. Select RAZOR COMPONENT.

1. Select RAZOR COMPONENT
2. Name the file: SampleHtmlForm.razor
3. Click on the ADD button to create a razor component.

SampleHtmlForm.razor

Default Code

<h3>SampleHtmlForm</h3>

@code {

}

Update SampleHtmlForm.razor file with the following code.

@* Routing declaration of razor component *@

@page "/htmlform"

<h3>Sample HTML Form</h3>

<form>
    <div class="row">
        <div class="col">
            <label for="Fullname" class="control-label">Fullname</label>
            <input form="Fullname" class="form-control" @bind="_frnd.Fullname" />
        </div>
        <div class="col">
            <label for="IsMarried" class="control-label">Are you married?</label>
            <select @bind="_frnd.IsMarried" class="form-control">
                <option value="">-Select-</option>
                <option value="Yes">Yes</option>
                <option value="No">No</option>
            </select>
        </div>
    </div>
    
    <div class="row">
        <div class="col">
            <label for="Mobile" class="control-label">Mobile</label>
            <input form="Designation" class="form-control" @bind="_frnd.Mobile" />
        </div>
        <div class="col">
            <label for="City" class="control-label">City</label>
            <input form="City" class="form-control" @bind="_frnd.City" />
        </div>
    </div>

    <div class="row">
        <div class="col">
            <input type="button" class="btn btn-primary" @onclick="@CreateFriend" value="Create"/>
            <input type="button" class="btn btn-danger" @onclick="@Cancel" value="Cancel"/>
        </div>
    </div>
</form>

@code {
    Friend _frnd = new Friend();

    protected async void CreateFriend()
    {
        // Your implementation here
    }

    protected void Cancel()
    {
        // Your implementation here
    }

    public class Friend
    {
        public string Fullname { get; set; }
        public string IsMarried { get; set; }
        public string Mobile { get; set; }
        public string City { get; set; }
    }
}

Output

Full-Form View

Sample Blazor Form using the built-in from InputComponents.

Right-click on the PAGES folder

1. Click on ADD to get the options.

2. Select RAZOR COMPONENT.

1. Select RAZOR COMPONENT.
2. Name the file, SampleBlazorForm.razor.
3. Click on the ADD button to create a razor component.

 Default Code

<h3>SampleBlazorForm</h3>

@code {

}

Update SampleBlazorForm.razor file with the following code.

@* Routing declaration *@

@page "/blazorform"

<h3>Sample Blazor Form</h3>

<EditForm Model="@_enq">
    <div class="row">
        <div class="col">
            <label for="Fullname" class="control-label">Fullname</label>
            <InputText class="form-control" @bind-Value="_enq.Fullname" />
        </div>

        <div class="col">
            <label for="EmailID" class="control-label">Email ID</label>
            <InputText class="form-control" @bind-Value="_enq.EmailID" />
        </div>
    </div>

    <div class="row">
        <div class="col">
            <label for="Mobile" class="control-label">Mobile</label>
            <InputText class="form-control" @bind-Value="_enq.Mobile" />
        </div>

        <div class="col">
            <label for="City" class="control-label">City</label>
            <InputText class="form-control" @bind-Value="_enq.City" />
        </div>
    </div>

    <div class="row">
        <div class="col">
            <input type="button" class="btn btn-primary" value="Create" />
            <input type="button" class="btn btn-danger" value="Cancel" />
        </div>
    </div>
</EditForm>

@code {
    public Enquiry _enq { get; set; }

    public SampleBlazorForm()
    {
        _enq = new Enquiry();
    }

    public class Enquiry
    {
        public string Fullname { get; set; } = string.Empty;
        public string EmailID { get; set; } = string.Empty;
        public string Mobile { get; set; } = string.Empty;
        public string City { get; set; } = string.Empty;
    }
}

Full-Form View

Thank you for reading. In the next article, you will learn about Create, Retrieve, Update, and Delete activities.