Menu
Coddy logo textTech

復習:フォーム #2

CoddyのHTMLジャーニー「Fundamentals」セクションの一部 — レッスン 47/60。

challenge icon

チャレンジ

簡単

下の画像のような、シンプルな登録フォームを作成しましょう!

含める内容は以下の通りです:

  1. すべてをまとめるための <form> タグ。
  2. ラベルとテキスト入力のある Username フィールド。ラベルには "Username:" と表示し、for="username" を使用します。入力には id="username"name="username"type="text"、およびプレースホルダー "Enter your username" を設定してください。
  3. ラベルとメール入力のある Email フィールド。ラベルには "Email:" と表示し、for="email" を使用します。入力には id="email"name="email"type="email"、およびプレースホルダー "Enter your email" を設定してください。
  4. ラベルとパスワード入力のある Password フィールド。ラベルには "Password:" と表示し、for="userpassword" を使用します。入力には id="userpassword"name="userpassword"type="password"、およびプレースホルダー "Enter your password" を設定してください。
  5. ユーザーがタイプを選択するためのラジオボタングループ:"Student" または "Teacher"。ラジオボタンの上に "User Type:" と表示する段落または見出しを追加してください。"Student" のラジオボタンには id="student"name="usertype"value="student"、および "Student" と表示するラベルを設定します。"Teacher" のラジオボタンには id="teacher"name="usertype"value="teacher"、および "Teacher" と表示するラベルを設定します。注意:一度に1つだけ選択できるように、両方のラジオボタンに同じ name 属性("usertype")を設定する必要があります。
  6. ユーザーが興味のあることを選択するためのチェックボックスグループ:"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")を設定する必要があります。
  7. フォームの最後に Sign Up ボタンと Clear ボタン。Sign Up ボタンには type="submit" を、Clear ボタンには type="reset" を設定してください。Sign Up ボタンには "Sign Up" というテキストを、Clear ボタンには “Clear” というテキストを表示させてください。

ユーザーフレンドリーな体験のために、適切なラベルとタイトルを含めるようにしてください!

入力には、これらの重要な属性を含めることを忘れないでください:typeidname、および value

自分で試してみよう

<!DOCTYPE html>
<html>
    <body>
        <!-- ここにコードを書いてください -->
    </body>
</html>

Fundamentalsのすべてのレッスン