復習:フォーム #2
CoddyのHTMLジャーニー「Fundamentals」セクションの一部 — レッスン 47/60。
チャレンジ
簡単下の画像のような、シンプルな登録フォームを作成しましょう!

含める内容は以下の通りです:
- すべてをまとめるための
<form>タグ。 - ラベルとテキスト入力のある Username フィールド。ラベルには
"Username:"と表示し、for="username"を使用します。入力にはid="username"、name="username"、type="text"、およびプレースホルダー"Enter your username"を設定してください。 - ラベルとメール入力のある Email フィールド。ラベルには
"Email:"と表示し、for="email"を使用します。入力にはid="email"、name="email"、type="email"、およびプレースホルダー"Enter your email"を設定してください。 - ラベルとパスワード入力のある Password フィールド。ラベルには
"Password:"と表示し、for="userpassword"を使用します。入力にはid="userpassword"、name="userpassword"、type="password"、およびプレースホルダー"Enter your password"を設定してください。 - ユーザーがタイプを選択するためのラジオボタングループ:
"Student"または"Teacher"。ラジオボタンの上に"User Type:"と表示する段落または見出しを追加してください。"Student"のラジオボタンにはid="student"、name="usertype"、value="student"、および"Student"と表示するラベルを設定します。"Teacher"のラジオボタンにはid="teacher"、name="usertype"、value="teacher"、および"Teacher"と表示するラベルを設定します。注意:一度に1つだけ選択できるように、両方のラジオボタンに同じ name 属性("usertype")を設定する必要があります。 - ユーザーが興味のあることを選択するためのチェックボックスグループ:
"Sports"、"Music"、および"Technology"。チェックボックスの上に"Interests:"と表示する段落または見出しを追加してください。"Sports"のチェックボックスにはid="sports"、name="interests"、value="sports"、および"Sports"と表示するラベルを設定します。"Music"のチェックボックスにはid="music"、name="interests"、value="music"、および"Music"と表示するラベルを設定します。"Technology"のチェックボックスにはid="technology"、name="interests"、value="technology"、および"Technology"と表示するラベルを設定します。注意:同じグループであるため、すべてのチェックボックスに同じ name 属性("interests")を設定する必要があります。 - フォームの最後に Sign Up ボタンと Clear ボタン。Sign Up ボタンには
type="submit"を、Clear ボタンにはtype="reset"を設定してください。Sign Up ボタンには "Sign Up" というテキストを、Clear ボタンには “Clear” というテキストを表示させてください。
ユーザーフレンドリーな体験のために、適切なラベルとタイトルを含めるようにしてください!
入力には、これらの重要な属性を含めることを忘れないでください:
type、id、name、およびvalue。
自分で試してみよう
<!DOCTYPE html>
<html>
<body>
<!-- ここにコードを書いてください -->
</body>
</html>