2016. 3. 24. 11:37ㆍlanguage/jquery mobile
form 요소 세번째 시간입니다.
select 와 input, textarea 태그처럼 문자 데이터를 입력받는 form 요소에 대해서 공부해보겠습니다.
select
단어 그대로 무엇인가를 선택할 경우 사용하는 태그입니다.
|
1
2
3
4
5
6
7 |
<label class="select" for="select-choice-1">Select, native menu</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select> |
cs |
기본적인 select 를 만드는 방법입니다.
width가 화면의 가로 영역을 100% 차지하는 크기로 만들어 집니다.
select를 작게 만들수도 있고 width도 화면 가로(너비)의 100%를 차지하지 않도록 만들 수 있습니다.
|
1
2
3
4
5
6
7 |
<label class="select" for="select-choice-mini">Mini select, inline</label>
<select name="select-choice-mini" id="select-choice-mini" data-inline="true" data-mini="true">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select> |
cs |
2번 라인 : data-inline="true" 속성이 있는데 이 속성은 width의 크기를 option text에 맞추어 줍니다. data-mini 속성은 이 전 강좌에서도 많이 등장했기 때문에 생략하겠습니다.
select 의 option 을 dialog 형태로 바꿀 수도 있습니다.
|
1
2
3
4
5
6
7
8 |
<label class="select" for="select-choice-a">Custom select menu:</label>
<select name="select-choice-a" id="select-choice-a" data-native-menu="false">
<option>Custom menu example</option>
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select> |
cs |
2번 라인 : data-native-menu="false" 속성 하나면 간단하게 바꿀 수 있습니다.
select 의 option 을 다중으로 선택할 수 도 있습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
<label class="select" for="select-choice-8">Multi-select with optgroups, custom icon and position:</label>
<select name="select-choice-8" id="select-choice-8" multiple="multiple" data-icon="grid" data-iconpos="left" data-native-menu="false">
<option>Choose a few options:</option>
<optgroup label="USPS">
<option value="standard" selected="">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</optgroup>
<optgroup label="FedEx">
<option value="firstOvernight">First Overnight</option>
<option value="expressSaver">Express Saver</option>
<option value="ground">Ground</option>
</optgroup>
</select> |
cs |
2번 라인 : multiple="multiple" 속성을 주게 되면 다중으로 선택 가능합니다.data-icon="grid" 속성으로 아이콘을 추가할 수도 있고 data-iconpos="left" 속성을 이용하여 아이콘의 위치도 변경 가능합니다.
Text input
input 태그의 text 는 사용자로부터 문자 데이터를 입력받는 가장 기본적인 form 요소입니다.
|
1
2 |
<label for="text-basic">Text input:</label>
<input name="text-basic" id="text-basic" type="text" value=""> |
cs |
input 태그에 type="text" 속성을 주어 기존방식 그대로 사용 가능합니다.
Textarea
줄바꿈이 가능한 문자 데이터를 입력받는 form 요소 입니다.
|
1
2 |
<label for="textarea">Textarea:</label>
<textarea name="textarea" id="textarea" rows="8" cols="40"></textarea> |
cs |
검색 아이콘이 있는 Text input 을 만들 수도 있습니다.
|
1
2 |
<label for="search">Search Input:</label>
<input name="password" id="search" type="search" placeholder="Placeholder text..." value=""> |
cs |
2번 라인 : type="search" 속성을 주어 만들 수 있습니다. placeholder 속성은 hint text 입니다.
그 밖에도 jquery mobile 에서 제공하는 type을 사용하여
숫자, 데이터, 전화번호 입력 Text input 을 만들 수 있습니다.
이 속성들은 모바일 디바이스의 키패드를 자동으로 선택하도록 합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12 |
<label for="number-pattern">Number + [0-9]* pattern:</label>
<input name="number" id="number-pattern" type="number" pattern="[0-9]*" value="">
<br/>
<br/>
<label for="date">Date:</label>
<input name="date" id="date" type="date" value="">
<br/>
<br/>
<label for="tel">Tel:</label>
<input name="tel" id="tel" type="tel" value=""> |
cs |
PC의 IE 에서는 동작하지 않으니 주의하시기 바랍니다. Chrome에서는 일부 동작합니다. 이미지는 크롬에서 실행시킨 이미지 입니다.
ps. 기타 input file, input password 의 사용법은 기존처럼 사용하시면 됩니다.