webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

form label の付け方

pattern1

f:id:ohta-felica:20160719225638p:plain

  • for属性を使ってキャプションとボタンを関連させる方法。
  • inputの中の「id属性」とlabelの中のfor属性の値が対応する。

<form action="#" method="post">
<input type="radio" name="sex" value="male" id="male"><label for="male">male</label>
<input type="radio" name="sex" value="female" id="female"><label for="female">female</label>
<input type="submit" value="送信">
</form> 

pattern2

  • コントロール要素をlabelの子要素として囲む方法。

<form action="#" method="post">
<label><input type="radio" name="sex" value="male" id="male">male</label>
<input type="radio" name="sex" value="female" id="female">femaile</form>
<input type="submit" value="送信">
</form>