jquery mobile 강좌 17 [ From 요소 / select / multiple select / Text input / Textarea / number / tel / 만들기 ] (3)

2016. 3. 24. 11:37language/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 의 사용법은 기존처럼 사용하시면 됩니다.