- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!-- 현재 작성하고 있는 파일은 UTF-8 DOS파일입니다.-->
- <html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- </head>
- <body>
- <form> - <select> <option> <optgroup> 사용법<br /><br />
- <b><select> 목록을 작성하는 데 사용됩니다.</b><br />
- ( 속성- multiple, size, disabled, name ) <br />
- ( 브라우저가 덜 지원하는 HTML5추가 속성 - autofocus, form, required )<br />
- <option>으로 <select> 요소 내부 <br />
- 태그 목록에서 사용할 수있는 옵션을 정의합니다. <br />
- <select> 태그는 직접 해보셔야 이해가 빠릅니다. <br />
- <br />
- <b><option> 선택 목록에서 옵션을 정의합니다.</b><br />
- ( 속성- selected, value, disabled, label ) <br />
- <option> (옵션) 태그에 특성없이 사용할 수 있지만,<br />
- 당신은 일반적으로 필요값 서버로 전송되고 있는지 나타냅니다.<br />
- <option> 태그는 직접 해보셔야 이해가 빠릅니다. <br />
- <br />
- <b><optgroup> 목록에서 그룹 관련 옵션에 사용됩니다.</b><br />
- ( 속성- disabled, label ) <br />
- <optgroup> 당신이 옵션의 긴 목록이있는 경우, <br />
- 관련 옵션 그룹은 사용자의 쉽게 처리 할 수 있습니다.<br />
- <optgroup> 태그는 직접 해보셔야 이해가 빠릅니다. <br /><br />
- <hr />
- <div id="ex_view2">
- <style type="text/css">
- <!--
- .select_atte_value{ border-collapse:collapse; }
- .select_atte_value th{ text-align:left; }
- .select_atte_value td{ padding-left:10px; }
- -->
- </style>
- <form name="select_type" id="select_type" method="post" >
- <!-- 예제 박스에선 안됨 => form태그안에 form태그있으면 지워짐~ㅠ.ㅠ -->
- <p><b>예제 - <select>속성 multiple </b></p>
- <table border=1 class="select_atte_value">
- <tr>
- <th><select=></th><td>
- <select name="atte_select_base">
- <option value="base">기본(콤보)</option>
- <option value="apple">apple</option>
- <option value="orange">orange</option>
- <option value="peach">peach</option>
- </select></td>
- </tr>
- <tr>
- <th><select multiple=></th><td>
- <select name="atte_select_multiple" multiple>
- <option value="multiple">리스트</option>
- <option value="apple">apple</option>
- <option value="orange">orange</option>
- <option value="peach">peach</option>
- </select></td>
- </tr>
- </table>
- <p><b>예제 - <select>속성 size(크롬, 사파이에선 안됨) </b></p>
- <table border=1 class="select_atte_value">
- <tr>
- <th><select size="2"=></th><td>
- <select name="atte_select_size" size="2">
- <option value="base">기본(콤보)</option>
- <option value="apple">apple</option>
- <option value="orange">orange</option>
- <option value="peach">peach</option>
- </select></td>
- </tr>
- </table>
- <p><b>예제 - <select>속성 disabled </b></p>
- <table border=1 class="select_atte_value">
- <tr>
- <th><select disabled=></th><td>
- <select name="atte_select_disabled" disabled>
- <option value="base">기본(콤보)</option>
- <option value="apple">apple</option>
- <option value="orange">orange</option>
- <option value="peach">peach</option>
- </select></td>
- </tr>
- </table>
- <p><b>예제 - <name>속성(이름지정)이건 생략...무진장 썼기 때문<br /></b></p>
- <br />
- <hr />
- <br />
- <p><b>예제 - <option>속성 selected </b></p>
- <table border=1 class="select_atte_value">
- <tr>
- <th><option selected=></th><td>
- <select name="atte_option_selected">
- <option value="base">기본(콤보)</option>
- <option value="apple">apple</option>
- <option selected value="orange">orange</option>
- <option value="peach">peach</option>
- </select></td>
- </tr>
- </table>
- <p><b>예제 - <option>속성 disabled </b></p>
- <table border=1 class="select_atte_value">
- <tr>
- <th><option disabled=></th><td>
- <select name="atte_option_disabled">
- <option value="base">기본(콤보)</option>
- <option value="apple">apple</option>
- <option value="orange">orange</option>
- <option disabled value="peach">peach</option>
- </select></td>
- </tr>
- </table>
- <p><b>예제 - <option>속성 label </b></p>
- <table border=1 class="select_atte_value">
- <tr>
- <th><option label="text"=></th><td>
- <select name="atte_option_label">
- <option value="base">기본(콤보)</option>
- <option label="사과" value="apple">apple</option>
- <option label="오랜지" value="orange">orange</option>
- <option value="peach">peach</option>
- </select></td>
- </tr>
- </table>
- <p><b>예제 - <value>속성(값지정)이건 생략...무진장 썼기 때문<br /></b></p>
- <br />
- <hr />
- <br />
- <p><b>예제 - <optgroup>속성 disabled </b></p>
- <table border=1 class="select_atte_value">
- <tr>
- <th><option selected=></th><td>
- <select name="atte_optgroup_disabled">
- <optgroup label="과일">
- <option value="mango">mango</option>
- <option value="apple">apple</option>
- </optgroup>
- <optgroup disabled label="꽃">
- <option value="rose">rose</option>
- <option value="cosmos">cosmos</option>
- </optgroup>
- </select></td>
- </tr>
- </table>
- <p><b>예제 - <optgroup>속성 label </b></p>
- <table border=1 class="select_atte_value">
- <tr>
- <th><option selected=></th><td>
- <select name="atte_optgroup_label">
- <optgroup label="fruit" label="과일">
- <option value="mango">mango</option>
- <option value="apple">apple</option>
- </optgroup>
- <optgroup label="flower" label="꽃">
- <option value="rose">rose</option>
- <option value="cosmos">cosmos</option>
- </optgroup>
- </select></td>
- </tr>
- </table>
- </form>
- </div>
- </body>
- </html>
--------------------------------------------------------------------------------------------
위 소스 예제 보기
<select> 목록을 작성하는 데 사용됩니다.
속성-multiple, size, disabled, name
브라우저가 덜 지원하는 속성(HTML5추가 속성) - autofocus, form, required
<option> 선택 목록에서 옵션을 정의합니다.
속성-selected, value, disabled, label
<optgroup> 목록에서 그룹 관련 옵션에 사용됩니다.
속성-disabled, label
위 소스에서는 HTML5추가 속성은 생략했습니다.
그외 XHTML 소스의 예제는 위에서 보기로 보시고
아래 버튼 클릭하시면 설명이 나옵니다.
태그 속성 보기(접어두었습니다.)
Global Attributes 지원합니다.
Global Event Attributes 지원합니다.
출처&인용 : http://www.w3schools.com/tags/tag_select.asp
'HTML > xhtml문법' 카테고리의 다른 글
<form>-<fieldset></fieldset> <legend></legend> 관련 요소 주위에 상자 그림 (0) | 2014.01.24 |
---|---|
<button></button> 클릭 할 수 있는 버튼 생성 (0) | 2014.01.24 |
<textarea></textarea> 여러 줄 텍스트 입력 (0) | 2014.01.22 |
<form>-<input>, <input /> <label></label> 입력 필드 지정 (0) | 2014.01.22 |
<form></form> 폼 양식 속성 설명 (0) | 2014.01.22 |