[모바일WEB-APP] Jquery-Mobile기초 – Form 양식

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>

Leave a Reply

Your email address will not be published. Required fields are marked *