고정 헤더 영역
상세 컨텐츠
본문
* 사용자에게 선택 입력 받기
<열다섯번째 예제>
<?xml version="1.0" encoding="ks_c_5601-1987"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN" "http://www.phone.com/dtd/wml11.dtd">
<wml>
<card>
<do type="accept">
<go href="#main1" />
</do>
<p>좋아하는스포츠?
<select name="sports">
<option value="야구">야구</option>
<option value="축구">축구</option>
<option value="농구">농구</option>
</select>
</p>
</card>
<card id="main1">
<p>
당신이 좋아하는 스포츠는 $(sports)입니다.
</p>
</card>
</wml>
이번장에서는 전에 살펴 보았었던 <select> , <option>에 대해 더 자세히 알아보겠습니다.
저번에는 <select>해서 <option onpice="#main1"> 이런식으로 이동하는 것만 배웠었지요?
이번엔 변수를 사용합니다. 또한 여러가지 옵션도 사용하구요..
우선 먼저 나오는 <do> 는 넘어갑니다..다들 아시는 부분일테니..
그 밑에 select가 나옵니다. select에 name이란 속성이 사용되었습니다.
이 속성은 name에 지정된 변수로 사용자가 선택한 값을 저장하겠음을 알리는 구문입니다.
그 다음에 option태그로 사용자에게 몇개의 보기를 보여줍니다.
option에 쓰인 value라는 속성은 선택시 select name에서 지정한 변수에 들어갈 값입니다.
즉 위에서 만약 야구를 선택하였다면 sports라는 변수에 야구 라는 값이 들어가는 것이지요..
<option>과 </option> 사이의 내용은 사용자에게 보여질 내용입니다.
만약 <option value="축구">야구</option> 이라고 해놓게 되면
사용자는 핸드폰상에서 야구라고 보이는 항목을 선택하여도
sports라는 변수에는 축구라는 값이 들어가는 것입니다.
위 열두번째 예제의 실행화면은 그림1과 같습니다.
그럼 그림2는 무엇인가?
위의 예제에서 select 부분을 <select multiple="true" name="sports"> 라고 바꿔봅시다.
multiple이라는 속성이 true이면 사용자는 다중 선택이 가능해집니다.(기본값은 false임)
즉 그림 2와 우측 하단에 Pick이라는 버튼이 하나 생기며
항목에서 Pick을 할경우 그림 2의 야구처럼 번호 옆에 별이 생기며 선택이 됩니다.
이렇게 해서 다수의 선택을 받을 수 있게 되는 것입니다.
자, 하나의 예제를 더 봅시다.
<열여섯번째 예제>
<?xml version="1.0" encoding="ks_c_5601-1987"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN" "http://www.phone.com/dtd/wml11.dtd">
<wml>
<card>
<do type="accept">
<go href="#main1" />
</do>
<p>좋아하는스포츠?
<select name="sports" iname="num" ivalue="2">
<option value="야구">야구</option>
<option value="축구">축구</option>
<option value="농구">농구</option>
</select>
</p>
</card>
<card id="main1">
<p>
당신은 $(num)번 $(sports)를 선택하셨습니다.
</p>
</card>
</wml>
자, 몇가지 속성을 다 살펴봅시다.
select에 iname과 ivalue라는 속성이 추가되었습니다.
iname="변수명" 이 속성을 사용하면 여기서 지정한 변수명에
사용자가 선택한 메뉴의 인덱스 번호 (즉 1,2,3 이렇게 쓰여진 선택항목번호)가 저장이 됩니다.
위의 예제를 실행시켜 그림 3과 같은 화면이 나왔을때 2번 축구를 선택하였다면
sports라는 변수에는 축구라는 값이 저장되고 동시에
num이라는 값에는 2 라는 값이 저장되는 것입니다. 간단하지요?
마지막으로 ivalue라는 속성은 선택 커서의 default 위치를 지정해줍니다.
즉, 위에서 ivalue="2" 라고 해주었으므로 열여섯번째 예제를 실행시키면
그림 3과같이 선택커서가 2번 축구에 놓여져 있는 것입니다..^^
<열다섯번째 예제>
<?xml version="1.0" encoding="ks_c_5601-1987"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN" "http://www.phone.com/dtd/wml11.dtd">
<wml>
<card>
<do type="accept">
<go href="#main1" />
</do>
<p>좋아하는스포츠?
<select name="sports">
<option value="야구">야구</option>
<option value="축구">축구</option>
<option value="농구">농구</option>
</select>
</p>
</card>
<card id="main1">
<p>
당신이 좋아하는 스포츠는 $(sports)입니다.
</p>
</card>
</wml>
이번장에서는 전에 살펴 보았었던 <select> , <option>에 대해 더 자세히 알아보겠습니다.
저번에는 <select>해서 <option onpice="#main1"> 이런식으로 이동하는 것만 배웠었지요?
이번엔 변수를 사용합니다. 또한 여러가지 옵션도 사용하구요..
우선 먼저 나오는 <do> 는 넘어갑니다..다들 아시는 부분일테니..
그 밑에 select가 나옵니다. select에 name이란 속성이 사용되었습니다.
이 속성은 name에 지정된 변수로 사용자가 선택한 값을 저장하겠음을 알리는 구문입니다.
그 다음에 option태그로 사용자에게 몇개의 보기를 보여줍니다.
option에 쓰인 value라는 속성은 선택시 select name에서 지정한 변수에 들어갈 값입니다.
즉 위에서 만약 야구를 선택하였다면 sports라는 변수에 야구 라는 값이 들어가는 것이지요..
<option>과 </option> 사이의 내용은 사용자에게 보여질 내용입니다.
만약 <option value="축구">야구</option> 이라고 해놓게 되면
사용자는 핸드폰상에서 야구라고 보이는 항목을 선택하여도
sports라는 변수에는 축구라는 값이 들어가는 것입니다.
위 열두번째 예제의 실행화면은 그림1과 같습니다.
그럼 그림2는 무엇인가?
위의 예제에서 select 부분을 <select multiple="true" name="sports"> 라고 바꿔봅시다.
multiple이라는 속성이 true이면 사용자는 다중 선택이 가능해집니다.(기본값은 false임)
즉 그림 2와 우측 하단에 Pick이라는 버튼이 하나 생기며
항목에서 Pick을 할경우 그림 2의 야구처럼 번호 옆에 별이 생기며 선택이 됩니다.
이렇게 해서 다수의 선택을 받을 수 있게 되는 것입니다.
자, 하나의 예제를 더 봅시다.
<열여섯번째 예제>
<?xml version="1.0" encoding="ks_c_5601-1987"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN" "http://www.phone.com/dtd/wml11.dtd">
<wml>
<card>
<do type="accept">
<go href="#main1" />
</do>
<p>좋아하는스포츠?
<select name="sports" iname="num" ivalue="2">
<option value="야구">야구</option>
<option value="축구">축구</option>
<option value="농구">농구</option>
</select>
</p>
</card>
<card id="main1">
<p>
당신은 $(num)번 $(sports)를 선택하셨습니다.
</p>
</card>
</wml>
자, 몇가지 속성을 다 살펴봅시다.
select에 iname과 ivalue라는 속성이 추가되었습니다.
iname="변수명" 이 속성을 사용하면 여기서 지정한 변수명에
사용자가 선택한 메뉴의 인덱스 번호 (즉 1,2,3 이렇게 쓰여진 선택항목번호)가 저장이 됩니다.
위의 예제를 실행시켜 그림 3과 같은 화면이 나왔을때 2번 축구를 선택하였다면
sports라는 변수에는 축구라는 값이 저장되고 동시에
num이라는 값에는 2 라는 값이 저장되는 것입니다. 간단하지요?
마지막으로 ivalue라는 속성은 선택 커서의 default 위치를 지정해줍니다.
즉, 위에서 ivalue="2" 라고 해주었으므로 열여섯번째 예제를 실행시키면
그림 3과같이 선택커서가 2번 축구에 놓여져 있는 것입니다..^^
