jQuery Mobile 4

jQuery Mobile 입력 양식

jQuery Mobile은 모바일 환경에 맞는 입력 양식을 제공합니다. 입력 양식의 사용 방법을 분류하면 네가지 정도로 나눌 수 있습니다.
가장 간단한 형태는 type 속성으로 text와 password를 갖는 input 태그입니다. 별도의 지정 없이도 모바일에 맞는 입력 양식으로 변화하지만, data-role 속성이 fieldcontain인 div 태그로 감싸면 입력 양식의 형태를 자동으로 잡아줍니다.
fieldcontain을 사용하면 입력 양식 사이에 줄이 쳐지며 형태를 잡습니다.

기본 입력 양식

							<div data-role="content">
								<div data-role="fieldcontain">
									<label for="textinput">Text Input</label>
									<input type="text" name="textinput" id="textinput" />
								</div>
								<div data-role="fieldcontain">
									<label for="passwordinput">Password Input</label>
									<input type="text" name="passwordinput" id="passwordinput" />
								</div>
							</div>					
						


체크 입력 양식

두 번째 형태는 type속성이 radio나 checkbox 인 경우인데요. fieldset 태그의 data-role 속성을 controlgroup으로 입력하고 label 태그의 for 속성을 정확하게 입력해야 예쁜 형태를 형성합니다.

							<div data-role="content">
								<div data-role="fieldcontain">
									<fieldset data-role="controlgroup">
										<legend>Radio</legend>
										<label for="radioinput_1">Radio Input</label>
										<input type="radio" name="radioinput_1" id="radioinput_1" />
										<label for="radioinput_2">Radio Input</label>
										<input type="radio" name="radioinput_2" id="radioinput_2" />
									</fieldset>
								</div>
								<div data-role="fieldcontain">
									<fieldset data-role="controlgroup">
										<legend>Check</legend>
										<label for="checkboxinput_1">Check Input</label>
										<input type="checkbox" name="checkboxinput_1" id="checkboxinput_1" />
										<label for="checkboxinput_2">Check Input</label>
										<input type="checkbox" name="checkboxinput_2" id="checkboxinput_2" />
									</fieldset>
								</div>
							</div>		
						


select 태그와 textarea 태그

세 번째 형태는 input 태그는 아니지만 입력 양식에 속하는 태그입니다. select 태그는 내부에 data-role 속성을 slider로 입력하고, 내부에 2개의 option 태그를 넣으면 자동으로 아이폰의 on & off 버튼과 같은 형태로 변경됩니다.
select 태그는 기본적으로 모바일 장치의 기본 선택 형태를 이용합니다. 물론, 이 기본 속성을 막고 개발자가 직접 만들 수도 있습니다.

							<div data-role="content">
								<div data-role="fieldcontain">
									<label for="select">Select Input</label>
									<select id="select">
										<option>서울</option>
										<option>부산</option>
										<option>대구</option>
										<option>대전</option>
									</select>
								</div>
								<div data-role="fieldcontain">
									<label for="slider">Select Slider</label>
									<select id="slider" name="slider" data-role="slider">
										<option value="off">Off</option>
										<option value="on">On</option>
									</select>
								</div>
								<div data-role="fieldcontain">
									<label for="textarea">Textarea Input</label>
									<textarea id="textarea"></textarea>
								</div>
							</div>
						


HTML5 입력양식 태그

마지막으로 HTML5의 input 태그입니다. type 속성에 range나 search를 입력하면 그에 맞는 형태로 변화합니다.
search 태그는 입력 앞에 돋보기가 생성되는 것 이외에도 글자를 입력하면 자동으로 지우기 버튼이 생성됩니다.

							<div data-role="content">
								<div data-role="fieldcontain">
									<label for="slider">Input Slider</label>
									<input type="range" min="" max="100" name="slider" id="slider" />
								</div>
								<div data-role="fieldcontain">
									<label for="search">Select Slider</label>
									<input type="search" name="search" id="search" />	
								</div>
							</div>