1. 제이쿼리 모바일 폼UI를 이용하기 위해서는 감싸는 영역에
data-role="fieldcontain"을 지정해야 한다
<div data-role="content">
<div
data-role="fieldcontain">
//한줄 텍스트
: 기본 브라우저 UI 사용할 경우 data-role="none"
<label for=""></label>
<input
type="text/password/email/url/tel/number" id="">
//검색영역
<label for="search"></label>
<input
type="search" id="search">
//두줄이상 텍스트
<label for="contact"></label>
<
textarea id="contact"></textarea>
//슬라이더
<label for="year">
</label>
<input
type="range" name="year" id="year" value="1980"
min="1900" max="2013" />
//두개중 하나 선택 슬립 스위치
<label for="gender">성별</label>
<select name="gender" id="gender"
data-role="slider">
<option value="남자">남자</option>
<option value="여자">여자</option>
</select>
//라디오버튼: 디폴트는 세로...
<
fieldset data-role="controlgroup" data-type="horizontal">
<legend>구입횟수</legend>
<input
type="radio" name="number" id="n1" value="1번" checked="checked" />
<label for="n1">1번</label>
<input type="radio" name="number" id="n2" value="2번" />
<label for="n2">2번</label>
<input type="radio" name="number" id="n3" value="3번" />
<label for="n3">3번</label>
<input type="radio" name="number" id="n4" value="4번" />
<label for="n4">4번 이상</label>
</fieldset>
//체크박스
<
fieldset data-role="controlgroup">
<legend>주제별 문의</legend>
<input
type="checkbox" name="type1" id="type1" value="HP 신규작성">
<label for="type1">HP 신규작성</label>
<input type="checkbox" name="type2" id="type2" value="HP 리뉴얼">
<label for="type2">HP 리뉴얼</label>
<input type="checkbox" name="type3" id="type3" value="시스템 개발">
<label for="type3">시스템 개발</label>
<input type="checkbox" name="type4" id="type4" value="컨설팅">
<label for="type4">컨설팅</label>
</fieldset>
//셀렉트메뉴
: 팝업으로뜨게 할 경우 data-native-menu="false"
: 복수 지정 가능 multiple="multiple"
<label for="number">구입횟수</label>
<
select name="number" id="number"
multiple="multiple" data-native-menu="false">
<option value="">선택하세요.</option>
<option value="n1">1번</option>
<option value="n2">2번</option>
<option value="n3">3번</option>
<option value="n4">4번 이상</option>
</select>
//버튼영역
: 버튼크기를 문자에 맞추기 data-inline="true"
<input
type="button" value="취소" data-theme=""
data-icon="delete">
<input
type="submit" value="전송" data-theme=""
data-icon="arrow-r">
</div>
</div>
참고:
http://view.jquerymobile.com/1.3.2/dist/demos/widgets/forms/