チェックボックス-check box







 ①チェックボックス - check box  ☆ソース <input type="checkbox" name="check" id="check1" class="custom" /> <label for="check1">この規約に同意します</label>     labelのforとinputのidを一致させます(ここではcheck1)。

  デモ


 ②複数チェックボックス - check box group  ☆ソース <fieldset data-role="controlgroup"> <legend>好きなプログラミング言語は?(複数回答可):</legend> <input type="checkbox" name="checkbox1" id="checkbox1" class="custom" /> <label for="checkbox1">Java</label> <input type="checkbox" name="checkbox2" id="checkbox2" class="custom" /> <label for="checkbox2">C</label> <input type="checkbox" name="checkbox3" id="checkbox3" class="custom" /> <label for="checkbox3">HTML</label> <input type="checkbox" name="checkbox4" id="checkbox4" class="custom" /> <label for="checkbox4">Brainfuck</label> </fieldset>   デモ
好きなプログラミング言語は?(複数回答可):


 ③横方向複数チェックボックス - check box group horizontal  ☆ソース <fieldset data-role="controlgroup" data-type="horizontal"> <legend>好きなプログラミング言語は?(複数回答可):</legend> <input type="checkbox" name="checkbox1" id="checkbox1" class="custom" /> <label for="checkbox1">C#</label> <input type="checkbox" name="checkbox2" id="checkbox2" class="custom" /> <label for="checkbox2">Objective C</label> <input type="checkbox" name="checkbox3" id="checkbox3" class="custom" /> <label for="checkbox3">Java Script</label> <input type="checkbox" name="checkbox4" id="checkbox4" class="custom" /> <label for="checkbox4">WhiteSpace</label> </fieldset>   デモ
好きなプログラミング言語は?(複数回答可):