ログインフォームのHTMLサンプルコード
以下は、ログインフォームの基本的なHTMLサンプルコードです。
<form action="/login" method="post">
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">パスワード:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="ログイン">
</form>
このコードでは、<form>要素がログインフォームを定義しています。action属性は、ログイン処理を受け取るURLを指定しています。method属性は、HTTPリクエストメソッドを指定しています。ログインフォームの場合は、一般的にPOSTメソッドを使用します。
<label>要素は、ユーザーに入力するデータの説明を提供するために使用されます。for属性は、関連付ける入力要素のIDを指定します。<input>要素は、ユーザーが入力するデータを受け取ります。type属性は、入力タイプを指定します。この例では、テキストとパスワードを受け取るためにそれぞれtype="text"とtype="password"が使用されています。id属性とname属性は、入力値を識別するために使用されます。
最後に、<input>要素がtype="submit"を持っているため、ユーザーがログインボタンをクリックすると、フォームが送信されます。
ユーザー名ではなくメールアドレスまたはIDを利用する場合
ユーザー名ではなくメールアドレスまたはIDを利用する場合は、以下のように<label>要素と<input>要素を変更する必要があります。
<form action="/login" method="post">
<label for="email_or_id">メールアドレスまたはID:</label>
<input type="text" id="email_or_id" name="email_or_id"><br><br>
<label for="password">パスワード:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="ログイン">
</form>
ここでは、<label>要素が変更され、for属性とテキストがメールアドレスまたはID:に変更されています。同様に、<input>要素のid属性とname属性がemail_or_idに変更されています。このように、ユーザー名の代わりに、メールアドレスまたはIDを受け取るようにフォームを調整することができます。