23. checkbox, radio 버튼 양식

Index

21. range 양식, slider

22. select 양식

23. checkbox, radio 버튼 양식

24. flip toggle 양식

25. mobileinit 이벤트

 

 

체크박스와 라디오버튼은 사용자의 선택을 입력받는 양식이다. jQuery Mobile은 두 양식 모두 <fieldset data-role="controlgroup">태그로 감싸서 그룹화 시킨다.

 

<fieldset data-role="controlgroup" data-type="horizontal | vertical">

    <legend>그룹제목 :</legend>

 

    //체크박스 또는 라디오버튼 목록

 

</fieldset>

 

 

체크박스

체크박스(checkbox)는 다중 선택이 가능하다.

 

<div data-role="fieldcontain">

    <fieldset data-role="controlgroup" data-type="horizontal">

        <legend>스마트폰 :</legend>

        <input id="phone1" type="checkbox" name="phone1" />

        <label for="phone1">갤럭시폰</label>

        <input id="phone2" type="checkbox" name="phone1" />

        <label for="phone2">아이폰</label>

        <input id="phone3" type="checkbox" name="phone1" />

        <label for="phone3">넥서스폰</label>

    </fieldset>

</div>

 

<div data-role="fieldcontain">

    <fieldset data-role="controlgroup">

        <legend>스마트폰 :</legend>

        <input id="phone1" type="checkbox" name="phone2" />

        <label for="phone1">갤럭시폰</label>

        <input id="phone2" type="checkbox" name="phone2" />

        <label for="phone2">아이폰</label>

        <input id="phone3" type="checkbox" name="phone2" />

        <label for="phone3">넥서스폰</label>

    </fieldset>

</div>

 

 

 

라디오버튼

라디오버튼(radio button)은 단일 선택이 가능하다. 

 

<div data-role="fieldcontain">

    <fieldset data-role="controlgroup" data-type="horizontal">

        <legend>스마트폰 :</legend>

        <input id="phone1" type="checkbox" name="phone1" />

        <label for="phone1">갤럭시폰</label>

        <input id="phone2" type="checkbox" name="phone1" />

        <label for="phone2">아이폰</label>

        <input id="phone3" type="checkbox" name="phone1" />

        <label for="phone3">넥서스폰</label>

    </fieldset>

</div>

 

<div data-role="fieldcontain">

    <fieldset data-role="controlgroup">

        <legend>스마트폰 :</legend>

        <input id="phone1" type="checkbox" name="phone2" />

        <label for="phone1">갤럭시폰</label>

        <input id="phone2" type="checkbox" name="phone2" />

        <label for="phone2">아이폰</label>

        <input id="phone3" type="checkbox" name="phone2" />

        <label for="phone3">넥서스폰</label>

    </fieldset>

</div>

 

 

 

<input type="checkbox | radio"> 에 사용할 수 있는 data-* 속성

data-* 속성	설명	값
data-theme	체크박스 테마	swatch letter (a-z)

 

 

 

[영어회화] I agree. 동의합니다