提到表單如果沒有使用到表單元件，那還算有介紹到表單嗎？而在 Blazor 中我們又該如何來操作表單元件？今天將帶大家認識 Blazor 提供的內建表單元件。

如果不熟悉表單元件是什麼，建議先自行去看 HTML 表單元件，這邊不針對 HTML 做講解。

Blazor 提供的內建表單元件可以用來接收及驗證使用者輸入，且當輸入變更和提交表單等事件發生時，也會觸發驗證，可以說是相當好用，在簡單情境下幾乎直接使用就好。

元件 呈現為 可使用
InputText <input> v
InputNumber<TValue> <input type="number"> v
InputCheckbox <input type="checkbox"> v
InputDate<TValue> <input type="date"> v
InputTextArea <textarea> v
InputSelect<TValue> <select> v
InputRadio <input type="radio"> x
InputRadioGroup <input type="radio"> x
InputFile <input type="file"> x

這邊列的可使用是指本系列文的版本有提供，不可使用的元件將在 .Net 5 及後續版本中提供，這邊僅提及不介紹。

而以上元件都是繼承於 InputBase<TValue> 的實作，下面將介紹可使用元件的個別用途，與元件自有的額外屬性，而基類將會在客製化元件時再詳細說明。

  • InputText - 字串輸入元件。

  • InputNumber\<TValue\> - 數字輸入元件，使用時綁定的屬性一定要為數字型別 Int32, Int64, Single, Double 與 Decimal 型別，否則將會在執行時期錯誤。
    除此之外也提供 ParsingErrorMessage 來設置轉換失敗的錯誤訊息，因為 input type="number" 本來就會限制按鍵行為，所以可以想成是屬性值超過型別範圍的錯誤訊息。

  • InputCheckbox - 布林輸入元件，也就是核取方塊。

  • InputDate\<TValue\> - 日期輸入元件，使用時綁定的屬性一定要為日期型別 DateTime 或者 DateTimeOffset，否則一樣會抱錯。也提供 ParsingErrorMessage 屬性。

  • InputTextArea - 字串多行輸入元件。

以上的元件使用方式都差不多，就以 InputNumber 為範例：

1
<InputNumber @bind-Value="user.Age" ParsingErrorMessage="該數字超過系統限制！" />

透過 @bind-Value 來綁定對象，也就是資料繫結，將會在 資料繫結與事件處理 時再詳細說明。

  • InputSelect<TValue> - 下拉式選單元件，需搭配 option 標籤來表示選項，所以使用方法就有別於上面了，以下範例是針對 Enum 內容來產生下拉式選單：
1
2
3
4
5
6
<InputSelect @bind-Value="user.UserType">
  @foreach (var value in Enum.GetValues(typeof(UserType)))
  {
    <option>@value</option>
  }
</InputSelect>

除此之外，也提供 ChildContent 來設定要被渲染的子元素，在 Blazor 中大多元件如果有跟子元件互動，基本都會提供 ChildContent 屬性來設定，而 ChildContext 將會在 樣板化元件 時再詳細說明。

以上就是內建表單元件的基本介紹，若想看使用範例，可以直接參考昨天的範例程式碼。

感謝大家的閱讀，我們明天見。

參考資料
內建表單元件