フォームの基本構造０５

HTML 授業



☆★データーでの確認★☆

ラベルを付ける


ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ラベルを付ける</title>
</head>
<body>


<!-- [ label ]フォームの構成部品（一行テキストボックス・チェックボックス・ラジオボタン等）と、その項目名（ラベル）を明確に関連付けるための要素。
 これによりチェックボックスやラジオボタンでは、 関連付けられたテキスト部分をクリックしてもチェックを付けることができる。  -->
<h1>ラベルを付ける</h1>
<form action="#" method="post">
<p>スマートフォン:
  <label><input type="checkbox" name="mobile" value="1" checked>iPhone</label>
  <label><input type="checkbox" name="mobile" value="1">Android</label>
  <label><input type="checkbox" name="mobile" value="1">その他</label>
</p>


<p>性別:
  <input type="radio" name="sex" value="male" id="male" checked><label for="male">男性</label>

  <input type="radio" name="sex" value="female"><label for="female">女性</label>
</p>

<p><input type="submit" value="送信"></p>


</form>

</body>
</html>


ブラウザで表示