ASP.NET Web ページ - HTML フォーム
HTML フォームは Web 開発において重要な役割を果たし、ユーザーがデータを入力してサーバーと対話できるようにします。ASP.NET Web ページでは、HTML フォームを簡単に作成および操作できます。このブログでは、ASP.NET Web ページでの HTML フォームの作成、検証、処理について詳しく紹介し、例とコードを示します。
HTMLフォームを作成する
ASP.NET Web ページでは、<form>要素。単純なフォームを作成する基本的な手順は次のとおりです。
- ページに
<form>要素。 <form>要素にテキスト ボックス、チェック ボックス、ドロップダウン リストなどのさまざまな入力フィールドを追加します。- 送信ボタンを追加します。
たとえば、簡単なログイン フォームの例を次に示します。
<form method="post" action="/Login.cshtml">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="登录">
</form>
上の例では、<form>要素。フォームはpostメソッドを/Login.cshtml。フォームにはユーザー名とパスワードの入力フィールドが含まれており<input>、nameフィールド名は要素の属性によって指定されます。
フォームの検証
ユーザーがフォームを送信する前に、フォームを検証して、入力されたデータの有効性を確認できます。ASP.NET Web ページでは、基本的なフロントエンド検証に、 、 、 などのrequiredHTML5minlengthフォーム検証属性を使用できます。maxlength
一般的に使用されるフォーム検証の例をいくつか示します。
- 必須フィールド:
<input type="text" id="name" name="name" required>
- 最小の長さ:
<input type="text" id="phone" name="phone" minlength="10">
- 最大長:
<input type="text" id="email" name="email" maxlength="50">
- 正規表現の検証:
<input type="text" id="zip" name="zip" pattern="[0-9]{5}">
フロントエンド検証は基本的な検証のみを提供し、ユーザーが入力したデータを完全に信頼できるわけではないことに注意してください。さらなる検証と処理はサーバー側で行う必要があります。
フォームデータの処理
ASP.NET Web ページでは、Requestオブジェクト。フォーム データを処理する基本的な手順は次のとおりです。
- フォームを扱うページ ( など
/Login.cshtml) では、フォーム データRequest.Formを取得するために。 - フォームフィールドの名前に基づいて、対応する値を取得します。
ログイン フォームを処理する簡単な例を次に示します。
@{
var username = Request.Form["username"];
var password = Request.Form["password"];
// 处理表单数据
// ...
}
上の例では
Request.Formを使用してユーザー名とパスワードのフィールドの値を取得し、username変数とpassword変数に保存します。検証の実行、ユーザー資格情報の検証など、実際のニーズに応じてフォーム データを処理できます。
結び目
HTML フォームは、ASP.NET Web ページの開発に不可欠です。<form>要素、フォーム検証、およびフォーム データ処理を使用すると、対話型フォームを簡単に作成し、サーバーと対話できます。データのセキュリティと有効性を確保するために、サーバー側でのさらなる検証と処理に注意してください。