1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <!-- 현재 작성하고 있는 파일은 UTF-8 DOS파일입니다.-->
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
  4.   <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.   </head>
  7.   <body>
  8.     &lt;form&gt; - &lt;select&gt; &lt;option&gt; &lt;optgroup&gt; 사용법<br /><br />
  9.     <b>&lt;select&gt; 목록을 작성하는 데 사용됩니다.</b><br />
  10.     ( 속성- multiple, size, disabled, name ) <br />
  11.     ( 브라우저가 덜 지원하는 HTML5추가 속성 - autofocus, form, required )<br />
  12.     &lt;option&gt;으로 &lt;select&gt; 요소 내부 <br />
  13.     태그 목록에서 사용할 수있는 옵션을 정의합니다. <br />
  14.     &lt;select&gt; 태그는 직접 해보셔야 이해가 빠릅니다. <br />
  15.     <br />
  16.     <b>&lt;option&gt; 선택 목록에서 옵션을 정의합니다.</b><br />
  17.     ( 속성- selected, value, disabled, label ) <br />
  18.     &lt;option&gt; (옵션) 태그에 특성없이 사용할 수 있지만,<br />
  19.     당신은 일반적으로 필요값 서버로 전송되고 있는지 나타냅니다.<br />
  20.     &lt;option&gt; 태그는 직접 해보셔야 이해가 빠릅니다. <br />
  21.     <br />
  22.     <b>&lt;optgroup&gt; 목록에서 그룹 관련 옵션에 사용됩니다.</b><br />
  23.     ( 속성- disabled, label ) <br />
  24.     &lt;optgroup&gt; 당신이 옵션의 긴 목록이있는 경우, <br />
  25.     관련 옵션 그룹은 사용자의 쉽게 처리 할 수​​ 있습니다.<br />
  26.     &lt;optgroup&gt; 태그는 직접 해보셔야 이해가 빠릅니다. <br /><br />
  27.     <hr />
  28.     <div id="ex_view2">
  29.    
  30.       <style type="text/css">
  31.       <!--
  32.        .select_atte_value{ border-collapse:collapse; }
  33.        .select_atte_value th{ text-align:left; }
  34.        .select_atte_value td{ padding-left:10px; }
  35.       -->
  36.       </style>
  37.       <form name="select_type" id="select_type" method="post" >
  38.       <!-- 예제 박스에선 안됨 => form태그안에 form태그있으면 지워짐~ㅠ.ㅠ -->
  39.    <p><b>예제 - &lt;select&gt;속성 multiple </b></p>
  40.    <table border=1 class="select_atte_value">
  41.    <tr>
  42.    <th>&lt;select=></th><td>
  43.    <select name="atte_select_base">
  44.               <option value="base">기본(콤보)</option>
  45.               <option value="apple">apple</option>
  46.               <option value="orange">orange</option>
  47.               <option value="peach">peach</option>
  48.             </select></td>
  49.       </tr>
  50.    <tr>
  51.    <th>&lt;select multiple=></th><td>
  52.    <select name="atte_select_multiple" multiple>
  53.               <option value="multiple">리스트</option>
  54.               <option value="apple">apple</option>
  55.               <option value="orange">orange</option>
  56.               <option value="peach">peach</option>
  57.             </select></td>
  58.       </tr>
  59.       </table>
  60.    <p><b>예제 - &lt;select&gt;속성 size(크롬, 사파이에선 안됨) </b></p>
  61.    <table border=1 class="select_atte_value">
  62.    <tr>
  63.    <th>&lt;select size="2"=></th><td>
  64.    <select name="atte_select_size" size="2">
  65.               <option value="base">기본(콤보)</option>
  66.               <option value="apple">apple</option>
  67.               <option value="orange">orange</option>
  68.               <option value="peach">peach</option>
  69.             </select></td>
  70.       </tr>
  71.       </table>
  72.    <p><b>예제 - &lt;select&gt;속성 disabled </b></p>
  73.    <table border=1 class="select_atte_value">
  74.    <tr>
  75.    <th>&lt;select disabled=></th><td>
  76.    <select name="atte_select_disabled" disabled>
  77.               <option value="base">기본(콤보)</option>
  78.               <option value="apple">apple</option>
  79.               <option value="orange">orange</option>
  80.               <option value="peach">peach</option>
  81.             </select></td>
  82.       </tr>
  83.       </table>
  84.       <p><b>예제 - &lt;name&gt;속성(이름지정)이건 생략...무진장 썼기 때문<br /></b></p>
  85.       <br />
  86.       <hr />
  87.       <br />
  88.    <p><b>예제 - &lt;option&gt;속성 selected </b></p>
  89.    <table border=1 class="select_atte_value">
  90.    <tr>
  91.    <th>&lt;option selected=></th><td>
  92.    <select name="atte_option_selected">
  93.               <option value="base">기본(콤보)</option>
  94.               <option value="apple">apple</option>
  95.               <option selected value="orange">orange</option>
  96.               <option value="peach">peach</option>
  97.             </select></td>
  98.       </tr>
  99.       </table>
  100.    <p><b>예제 - &lt;option&gt;속성 disabled </b></p>
  101.    <table border=1 class="select_atte_value">
  102.    <tr>
  103.    <th>&lt;option disabled=></th><td>
  104.    <select name="atte_option_disabled">
  105.               <option value="base">기본(콤보)</option>
  106.               <option value="apple">apple</option>
  107.               <option value="orange">orange</option>
  108.               <option disabled value="peach">peach</option>
  109.             </select></td>
  110.       </tr>
  111.       </table>
  112.    <p><b>예제 - &lt;option&gt;속성 label </b></p>
  113.    <table border=1 class="select_atte_value">
  114.    <tr>
  115.    <th>&lt;option label="text"=></th><td>
  116.    <select name="atte_option_label">
  117.               <option value="base">기본(콤보)</option>
  118.               <option label="사과" value="apple">apple</option>
  119.               <option label="오랜지" value="orange">orange</option>
  120.               <option value="peach">peach</option>
  121.             </select></td>
  122.       </tr>
  123.       </table>
  124.       <p><b>예제 - &lt;value&gt;속성(값지정)이건 생략...무진장 썼기 때문<br /></b></p>
  125.       <br />
  126.       <hr />
  127.       <br />
  128.    <p><b>예제 - &lt;optgroup&gt;속성 disabled </b></p>
  129.    <table border=1 class="select_atte_value">
  130.    <tr>
  131.    <th>&lt;option selected=></th><td>
  132.    <select name="atte_optgroup_disabled">
  133.     <optgroup label="과일">
  134.                 <option value="mango">mango</option>
  135.                 <option value="apple">apple</option>
  136.               </optgroup>
  137.     <optgroup disabled label="꽃">
  138.                 <option value="rose">rose</option>
  139.                 <option value="cosmos">cosmos</option>
  140.               </optgroup>
  141.             </select></td>
  142.       </tr>
  143.       </table>
  144.    <p><b>예제 - &lt;optgroup&gt;속성 label </b></p>
  145.    <table border=1 class="select_atte_value">
  146.    <tr>
  147.    <th>&lt;option selected=></th><td>
  148.    <select name="atte_optgroup_label">
  149.     <optgroup label="fruit" label="과일">
  150.                 <option value="mango">mango</option>
  151.                 <option value="apple">apple</option>
  152.               </optgroup>
  153.     <optgroup label="flower" label="꽃">
  154.                 <option value="rose">rose</option>
  155.                 <option value="cosmos">cosmos</option>
  156.               </optgroup>
  157.             </select></td>
  158.       </tr>
  159.       </table>
  160.       </form>
  161.     </div>
  162.   </body>
  163. </html>

--------------------------------------------------------------------------------------------

위 소스 예제 보기


<select></select>

<option></option>

<optgroup></optgroup>


<select> 목록을 작성하는 데 사용됩니다.

속성-multiple, size, disabled, name

브라우저가 덜 지원하는 속성(HTML5추가 속성) - autofocus, form, required


<option> 선택 목록에서 옵션을 정의합니다.

속성-selected, value, disabled, label


<optgroup> 목록에서 그룹 관련 옵션에 사용됩니다.

속성-disabled, label


위 소스에서는 HTML5추가 속성은 생략했습니다.

그외 XHTML 소스의 예제는 위에서 보기로 보시고

아래 버튼 클릭하시면 설명이 나옵니다.

태그 속성 보기(접어두었습니다.)


Global Attributes 지원합니다.


:
BLOG main image

공지사항

카테고리

분류 (356)
main (1)
php5 (218)
HTML (36)
javascript (93)
IT 이론과 퍼온정보 (8)
깨작일상 (0)
곧 추가할 내용 (0)
추후 알아볼것들... (0)

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

달력

«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Total :
Today : Yesterday :