フォームの基本 ― 入力を集めて送信する

導入

まずは特別な部品を使わず、ここまでの@bindと@onclickだけでフォームを作ってみましょう。複数の入力を変数に集め、「送信」ボタンで受け取って結果を表示する——フォームの本質はこれだけです。

説明

各入力を@bindで変数に結び、送信ボタンの@onclickでまとめて処理します。

<h3>お問い合わせフォーム</h3>

<div>
    <label>お名前</label>
    <input @bind="name" placeholder="山田 太郎" />
</div>
<div>
    <label>メッセージ</label>
    <textarea @bind="message" placeholder="ご用件をどうぞ"></textarea>
</div>
<button @onclick="Submit">送信</button>

@if (sent)
{
    <p>✅ @name さん、送信を受け付けました！</p>
    <p>内容: @message</p>
}

@code {
    private string name = "";
    private string message = "";
    private bool sent = false;

    private void Submit()
    {
        sent = true;   // 送信済みフラグを立てると、下の @if が表示される
    }
}

• 各入力を@bindで変数に結ぶ（テキストは<input>、複数行は<textarea>）
• 「送信」の@onclickで、集めた値を使って処理する（ここではフラグを立てて結果表示）
• @if (sent)で、送信後だけ結果を出す

やってみよう

名前とメッセージを入力して「送信」を押すと、下に確認メッセージが出ます。入力を空のまま送信するとどうなるかも見てみましょう（今は空でも送れてしまいます——次のレッスンで「検証」を足します）。

演習

送信後にもう一度書けるよう、「リセット」ボタンを足してください（nameとmessageを空に、sentをfalseに戻す）。

次回: Blazor専用のフォーム部品EditFormを使い、検証と連携させます。