4. Jquery Mobile 기초 – Form
(1) Form 요소
(가) Number Type : 숫자 자판 적용
<input id=”age” type=”number” name=”age” min=”1″ max=”150″ value=”20″ />
(나) E-Mail : 영문 자판 적용
<input id=”email” type=”email” name=”email” value=”” />
(다) url: 영문 자판 적용
<input id=”homepage” type=”url” name=”homepage” value=”” />
(라) tel: 숫자 자판 적용
<input id=”tel” type=”tel” name=”tel” value=””/>
(마) password:
– <input id=”password” type=”password” name=”password”/>
(바) amount: HTML의 Range Tag 도 동일하게 적용시킨다.
– <input id=”amount” type=”range” name=”amount”
min=”0″ max=”100″ value=”50″
data-theme=”e” data-track-theme=”b”/>
(사) SELECT TAG
– data-native-menu=”false” : 데이터 선택 메뉴의 UI 를 OS 에 상관없이 통일할 ㅅ
<div data-role=”fieldcontain”>
<label for=”phoneKind”>Select:</label>
<select id=”phoneKind” name=”phoneKind” data-native-menu=”false”>
<option value=”아이폰4″>아이폰4</option>
<option value=”아이폰4S”>아이폰4S</option>
<option value=”갤럭시S” selected>갤럭시S</option>
<option value=”갤럭시S2″>갤럭시S2</option>
</select>
</div>
(사) FieldConatiner
[예제] <div data-role=”fieldcontain”> 을 사용하게 되면 좁은 화면에서는
Label의 위치를 자동으로 조정하여 준다.
<div data-role=”content”>
<form id=”joinForm” method=”post” action=”#”>
<div data-role=”fieldcontain”>
<label for=”name”>Name:</label>
<input id=”name” type=”text” name=”name”/>
</div>
<div data-role=”fieldcontain”>
<label for=”password”>Password:</label>
<input id=”password” type=”password” name=”password”/>
</div>
<div data-role=”fieldcontain”>
<label for=”comment”>Comment:</label>
<textarea id=”comment” name=”comment” ></textarea>
</div>
</form>
</div>
(아) CHECKBOX
– controlgroup 으로 데이터를 감싸고 정렬을 조정하여 UI 를 선택적으로 적용 가능
– data-type=”horizontal” 을 사용하면 버튼 형태로 수평으로 표현이 된다.
<div data-role=”fieldcontain”>
<fieldset data-role=”controlgroup” data-type=”horizontal”>
<legend>Hobby:</legend>
<input id=”hobby1″ type=”checkbox” name=”hobby”/>
<label for=”hobby1″>축구</label>
<input id=”hobby2″ type=”checkbox” name=”hobby” checked/>
<label for=”hobby2″>농구</label>
<input id=”hobby3″ type=”checkbox” name=”hobby”/>
<label for=”hobby3″>야구</label>
</fieldset>
</div>
(차) RADIO
– controlgroup 으로 데이터를 감싸고 정렬을 조정하여 UI 를 선택적으로 적용 가능
– data-type=”horizontal” 을 사용하면 버튼 형태로 수평으로 표현이 된다.
<div data-role=”fieldcontain”>
<fieldset data-role=”controlgroup” data-type=”horizontal”>
<legend>Job:</legend>
<input id=”radio1″ type=”radio” name=”job” />
<label for=”radio1″>개발자</label>
<input id=”radio2″ type=”radio” name=”job” checked=”checked”/>
<label for=”radio2″>디자이너</label>
</fieldset>
</div>
(카) SLIDER
– data-role=”slider” 를 적용한다.
– DATA 구성은 2개의 데이터셋을 갖는 SELECT 를 사용한다.
<select id=”flipToggle” name=”flipToggle” data-role=”slider” data-track-theme=”e”>
<option value=”off”>Off</option>
<option value=”on” selected>On</option>
</select>