演習課題「ラベルを作成しよう - その1」
現在、ブラウザでは、あるデザイン事務所のプロジェクトを管理するためのページが表示されており、プロジェクト名とクライアント名の入力欄があります。
それぞれの入力欄にラベルを作成します。まずは「プロジェクト名」の例にならって、label要素のfor属性にフォームコントロールのid属性を指定する形で「クライアント名」のラベルを記述してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
演習課題「ラベルを作成しよう - その2」
現在、ブラウザでは、あるデザイン事務所のプロジェクトを管理するためのページが表示されており、プロジェクト名とクライアント名の入力欄が表示されています。
前問とは別の方法で、それぞれの入力欄にラベルを作成します。次は、同じく「プロジェクト名」の例にならって、フォームコントロールをラベル要素の子要素とする形で「クライアント名」のラベルを記述してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
＃03:ラベル(label)
このチャプターでは、ラベルについて学習します。
label要素は、フォームコントロール（input要素など）が何のための入力項目なのかを説明するテキスト（キャプション）を関連付けるために使用します。for属性にフォームコントロールのid属性値を指定することで、ラベルとコントロールを明示的に関連付けることができます。これにより、ラベルをクリックした際に、対応するフォームコントロールがアクティブになるなど、ユーザーの操作性が向上します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ラベル</title>
<meta name="viewport" content="width=device-width initial-scale=1">
<link rel="stylesheet" href="style01.css">
</head>
<body>
<form action="">
<p>
<label for="name">名前</label><br>
<input type="text" name="name" id="name">
</p>
<p><input type="submit"></p>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ラベル</title>
<meta name="viewport" content="width=device-width initial-scale=1">
<link rel="stylesheet" href="style01.css">
</head>
<body>
<form action="">
<p>
<label>名前<br>
<input type="text" name="name" id="name">
</label>
</p>
<p><input type="submit"></p>
</form>
</body>
</html>
MDN web docs - <label>: ラベル要素
https://developer.mozilla.org/ja/docs/Web/HTML/Element/label