スキルテスト: フォームとボタン
このスキルテストの目的は、 HTML のフォームとボタンを扱う方法を理解しているかどうかを評価することです。
メモ: 手助けが必要な場合は、スキルテスト使用ガイドをお読みください。また、コミュニケーションチャネルのいずれかを使用して、私たちに連絡することもできます。
フォームとボタン 1
この課題では、ユーザー ID とパスワードを入力するための 2 つの <input> 要素と、送信ボタンを作成するよう求められます。これは、ゆっくりと丁寧に学習を始めるのに最適な課題です。
この課題を完了するには、次のようにしてください。
- ユーザー ID およびパスワード用の適切な入力欄を作成します。
- また、それらをテキストラベルと意味的に関連付ける必要があります。
- 残りのリストアイテム内に、「ログイン」というボタンテキストを持つ送信ボタンを作成します。
html
<form>
<ul>
<li>ユーザー ID</li>
<li>パスワード</li>
<li></li>
</ul>
</form>
ここをクリックすると、模範解答を表示します。
完了した HTML は、次のようになるはずです。
html
<form>
<ul>
<li>
<label for="uid">ユーザー ID</label>
<input type="text" id="uid" name="uid" />
</li>
<li>
<label for="pwd">パスワード</label>
<input type="password" id="pwd" name="pwd" />
</li>
<li>
<button>ログイン</button>
</li>
</ul>
</form>
フォームとボタン 2
次の課題では、指定されたテキストラベルから、チェックボックスとラジオボタンの動作するセットを作成する必要があります。
この課題を完了するには、次のようにしてください。
- 最初の
<fieldset>のコンテンツをラジオボタンセットに変更します。一度に選択できるポニーキャラクターは 1 つだけにしてください。 - ページが読み込まれたときに、最初のラジオボタンが選択されるようにします。
- 2 つ目の
<fieldset>のコンテンツをチェックボックスセットに変更します。 - 自分自身でホットドッグの選択肢をいくつか追加します。
html
<form>
<fieldset>
<legend>好きなポニーはどれ？</legend>
<ul>
<li>
<label for="pinkie">Pinkie Pie</label>
</li>
<li>
<label for="rainbow">Rainbow Dash</label>
</li>
<li>
<label for="twilight">Twilight Sparkle</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>ホットドッグの構成</legend>
<ul>
<li>
<label for="vegan">ビーガン</label>
</li>
<li>
<label for="onions">玉ねぎ</label>
</li>
</ul>
</fieldset>
<button>送信</button>
</form>
ここをクリックすると、模範解答を表示します。
完了した HTML は、次のようになるはずです。
html
<form>
<fieldset>
<legend>好きなポニーはどれ？</legend>
<ul>
<li>
<label for="pinkie">Pinkie Pie</label>
<input type="radio" id="pinkie" name="pony" value="pinkie" checked />
</li>
<li>
<label for="rainbow">Rainbow Dash</label>
<input type="radio" id="rainbow" name="pony" value="rainbow" />
</li>
<li>
<label for="twilight">Twilight Sparkle</label>
<input type="radio" id="twilight" name="pony" value="twilight" />
</li>
</ul>
</fieldset>
<fieldset>
<legend>ホットドッグの構成</legend>
<ul>
<li>
<label for="vegan">ビーガン</label>
<input type="checkbox" id="vegan" name="hotdog" value="vegan" />
</li>
<li>
<label for="onions">玉ねぎ</label>
<input type="checkbox" id="onions" name="hotdog" value="onions" />
</li>
<li>
<label for="mustard">マスタード</label>
<input type="checkbox" id="mustard" name="hotdog" value="mustard" />
</li>
<li>
<label for="ketchup">ケチャップ</label>
<input type="checkbox" id="ketchup" name="hotdog" value="ketchup" />
</li>
</ul>
</fieldset>
<button>送信</button>
</form>
フォームとボタン 3
この課題では、より詳細な入力型について学びます。ユーザーが詳細情報を更新するために、適切な入力を作成してください。
- メールアドレス
- ウェブサイト
- 電話番号
- 好きな色
html
<form>
<h2>設定を編集</h2>
<ul>
<li>
<label for="email">メールアドレス</label>
</li>
<li>
<label for="website">ウェブサイト</label>
</li>
<li>
<label for="phone">電話番号</label>
</li>
<li>
<label for="fave-color">好きな色</label>
</li>
<li>
<button>構成を更新</button>
</li>
</ul>
</form>
ここをクリックすると、模範解答を表示します。
完了した HTML は、次のようになるはずです。
html
<form>
<h2>設定を編集</h2>
<ul>
<li>
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" />
</li>
<li>
<label for="website">ウェブサイト</label>
<input type="url" id="website" name="website" />
</li>
<li>
<label for="phone">電話番号</label>
<input type="tel" id="phone" name="phone" />
</li>
<li>
<label for="fave-color">好きな色</label>
<input type="color" id="fave-color" name="fave-color" />
</li>
<li>
<button>構成を更新</button>
</li>
</ul>
</form>
フォームとボタン 4
これで、ユーザーが指定された選択肢からお気に入りの料理を選択できるドロップダウン選択メニューを実装する準備が整いました。
この課題を完了するには、次のようにしてください。
- 基本的な選択ボックス構造を作成します。
- 指定された "food" ラベルと意味的に関連付けます。
- リスト内で、選択肢を "mains" と "snacks" の 2 つのサブグループに分割します。
html
<form>
<ul>
<li>
<label for="food">好きな食べ物を選択してください</label>
サラダ カレー ピザ ファヒータ ビスケット クリスプ フルーツ ブレッドスティック
</li>
<li>
<button>選択を送信</button>
</li>
</ul>
</form>
ここをクリックすると、模範解答を表示します。
完了した HTML は、次のようになるはずです。
html
<form>
<ul>
<li>
<label for="food">好きな食べ物を選択してください</label>
<select name="food" id="food">
<optgroup label="mains">
<option>サラダ</option>
<option>カレー</option>
<option>ピザ</option>
<option>ファヒータ</option>
</optgroup>
<optgroup label="snacks">
<option>ビスケット</option>
<option>クリスプ</option>
<option>フルーツ</option>
<option>ブレッドスティック</option>
</optgroup>
</select>
</li>
<li>
<button>選択を送信</button>
</li>
</ul>
</form>
フォームとボタン 5
この課題では、指定されたフォームの機能を構造化してください。
この課題を完了するには、次のようにしてください。
- 最初の 2 つと 2 つ目のフォームフィールドを 2 つの別個のコンテナーに分け、それぞれのコンテナーに説明的な見出しを付けます（最初の 2 つには「個人情報」、次の 2 つには「コメント情報」を使用）。
- それぞれのテキストラベルに、そのフォームフィールドと意味的に関連付けられる適切な要素をマークアップします。
- ラベルとフィールドのペアを区切るために、適切な構造要素のセットを追加します。
html
<form>
氏名:
<input type="text" id="name" name="name" />
年齢:
<input type="number" id="age" name="age" />
コメント:
<input type="text" id="comment" name="comment" />
メールアドレス:
<input type="email" id="email" name="email" />
</form>
ここをクリックすると、模範解答を表示します。
完了した HTML は、次のようになるはずです。
html
<form>
<fieldset>
<legend>個人情報</legend>
<ul>
<li>
<label for="name">氏名:</label>
<input type="text" id="name" name="name" />
</li>
<li>
<label for="age">年齢:</label>
<input type="number" id="age" name="age" />
</li>
</ul>
</fieldset>
<fieldset>
<legend>コメント情報</legend>
<ul>
<li>
<label for="comment">コメント:</label>
<input type="text" id="comment" name="comment" />
</li>
<li>
<label for="email">メールアドレス（返信が必要な場合）:</label>
<input type="email" id="email" name="email" />
</li>
</ul>
</fieldset>
</form>
フォームとボタン 6
この課題では、単純なサポート依頼フォームを用意しています。このフォームに、いくつかの検証機能を追加してください。この課題では、「HTML のフォームとボタン」の記事では説明していない知識が必要なので、他の資料で調べておく必要があります。
この課題を完了するには、次のようにしてください。
- フォームを送信する前に、すべての入力フィールドを必須入力にする。
- "Email address" および "Phone number" フィールドの型を変更して、要求されるデータに適した、より詳細な検証をブラウザーに適用するようにします。
- "User name" フィールドの必須文字数を 5 文字から 20 文字、 "Phone number" フィールドの最大文字数を 15 文字、 "Comment" フィールドの最大文字数を 200 文字に設定します。
フォームを送信してみてください。上記の制約が満たされるまで送信は拒否され、適切なエラーメッセージが表示されます。
html
<form>
<h2>サポート依頼を入力してください</h2>
<ul>
<li>
<label for="uname">ユーザー名:</label>
<input type="text" name="uname" id="uname" />
</li>
<li>
<label for="email">メールアドレス:</label>
<input type="text" name="email" id="email" />
</li>
<li>
<label for="phone">電話番号:</label>
<input type="text" name="phone" id="phone" />
</li>
<li>
<label for="comment">コメント:</label>
<textarea name="comment" id="comment"> </textarea>
</li>
<li>
<button>コメントを送信</button>
</li>
</ul>
</form>
クリックすると解答を表示
完了した HTML は、次のようになるはずです。
html
<form>
<h2>Enter your support query</h2>
<ul>
<li>
<label for="uname">ユーザー名:</label>
<input
type="text"
name="uname"
id="uname"
required
minlength="5"
maxlength="20" />
</li>
<li>
<label for="email">メールアドレス:</label>
<input type="email" name="email" id="email" required />
</li>
<li>
<label for="phone">電話番号:</label>
<input type="tel" name="phone" id="phone" required maxlength="15" />
</li>
<li>
<label for="comment">コメント:</label>
<textarea name="comment" id="comment" required maxlength="200"></textarea>
</li>
<li>
<button>コメントを送信</button>
</li>
</ul>
</form>