select박스, textarea

select박스, textarea

2023. 10. 3. 20:01ㆍHTML CSS

<select>,<optgroup>,<option>태그

- 여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용한다. 클릭했을 때 옵션들이 요소 아래쪽으로 펼쳐지는 목록이다.

- <select>태그 안에 <option> 태그를 넣고 각 <option>태그의 value 속성을 이용해 서버로 넘겨주는 값을 지정한다.

- <select>태그의 속성은 size와 multiple 속성이 있다.

- size는 드롭다운 메뉴의 항목 개수를 지정한다. 3이면 3개 4이면 4개 이렇게 드롭다운 메뉴가 나오는데 크롬 브라우저의 경우 size 속성에 지정한 값보다 하나 더 많은 옵션을 표시한다. 예를들어 6은 7개 9는 10개이다.

- multiple 속성은 드롭다운 메뉴에서 Ctrl키를 누른 상태에서 여러개의 옵션을 선택할 수 있다.

- <option> 태그의 속성은 value와 selected 가 있다.

- <option>태그의 value는 옵션을 선택했을 때 서버로 넘겨질 값이다.

- <option> 태그의 selected는 화면이 처음에 안올 때 선택되어 있는 옵션이다.

- <optgroup> 태그는 옵션끼리 묶을 때 사용한다. 드롭다운 목록에서 목록들을 그룹으로 나누고 label 속성을 이용해 그룹의 제목을 붙여줄 수 있다.

<h2>SELECT 태그</h2>
<label for="number">숫자</label>
<select id="number" multiple>
	<optgroup label="숫자">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3" selected>3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
	</optgroup>
    <optgroup label="영어숫자">
        <option value="one">one</option>
        <option value="two">two</option>
        <option value="three">three</option>
        <option value="four">four</option>
        <option value="five">five</option>
        <option value="six">six</option>
	</optgroup>
</select>

SELECT 태그

숫자

- <datalist> 태그를 <select> 태그 대신에 사용하면 <select> 태그와 같이 드룹다운 리스트에서 옵션을 선택할 수 있고 선택을 하면 선택한 값을 input 태그에 자동으로 값이 입력된다. 자동으로 입력이 되려면 datalist 태그의 id와 자동으로 넣어질 input 태그의 list 속성 값이 같아야 한다.

<h2>datalist 태그</h2>
<input type="text" list="number1">
<datalist size="4" id="number1" multiple>
	<option value="1">1</option>
    <option value="2">2</option>
    <option value="3" selected>3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</datalist>

datalist 태그

<textarea> 태그

- 직접 여러줄의 텍스트를 입력하고 싶을때 textarea 태그를 사용한다.

- name 속성으로 다른 폼 요소와 구분하고 텍스트 영역의 이름을 지정한다.

- cols로 textarea 가로 너비를 몇글자로 할지 지정한다.

- rows는 세로 길이를 몇 줄로 할지 지정한다. 지정한 줄보다 개수가 많아지면 스크롤 막대가 생긴다.

<textarea name="testareaName" cols="80" rows="3" />

</div>
                    
        <div class="revenue_unit_wrap">
  <div class="revenue_unit_item adsense responsive">
    <div class="revenue_unit_info">반응형</div>
    <script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async="async"></script>
    <ins class="adsbygoogle" style="display: block;" data-ad-host="ca-host-pub-9691043933427338" data-ad-client="ca-pub-1461969699320207" data-ad-format="auto"></ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
  </div>
</div>

</License>
</rdf:RDF>
-->  <div data-tistory-react-app="SupportButton"></div>
</div>

<div class="another_category another_category_color_gray">
  <h4>'<a href="/category/HTML%20CSS">HTML CSS</a>' 카테고리의 다른 글</h4>
  <table>
    <tr>
      <th><a href="/134"><button>태그, <progress> 태그</a>  <span>(0)</span></th>
      <td>2023.10.24</td>
    </tr>
    <tr>
      <th><a href="/131">input 태그 속성 정리(HTML)</a>  <span>(0)</span></th>
      <td>2023.10.03</td>
    </tr>
    <tr>
      <th><a href="/130"><input> 태그 정리(HTML)</a>  <span>(0)</span></th>
      <td>2023.10.02</td>
    </tr>
    <tr>
      <th><a href="/129">FORM 관련 태그 정리(HTML)</a>  <span>(0)</span></th>
      <td>2023.10.02</td>
    </tr>
    <tr>
      <th><a href="/128">SVG 이미지</a>  <span>(0)</span></th>
      <td>2023.10.01</td>
    </tr>
  </table>
</div>

</div>

<div class="article_content">

<div class="area_related">
              <h3 class="title_related">관련글</h3>
              <ul class="list_related">
                
                  <li class="item_related">
                    <a href="/134?category=1182989" class="link_related">
                      <span class="thumnail item-thumbnail" style="background-image:url('')"></span>
                      <div class="box_content">
                        <strong><button>태그, <progress> 태그</strong>
                        <span class="info">2023.10.24</span>
                      </div>
                    </a>
                  </li>
                
                  <li class="item_related">
                    <a href="/131?category=1182989" class="link_related">
                      <span class="thumnail item-thumbnail" style="background-image:url('')"></span>
                      <div class="box_content">
                        <strong>input 태그 속성 정리(HTML)</strong>
                        <span class="info">2023.10.03</span>
                      </div>
                    </a>
                  </li>
                
                  <li class="item_related">
                    <a href="/130?category=1182989" class="link_related">
                      <span class="thumnail item-thumbnail" style="background-image:url('')"></span>
                      <div class="box_content">
                        <strong><input> 태그 정리(HTML)</strong>
                        <span class="info">2023.10.02</span>
                      </div>
                    </a>
                  </li>
                
                  <li class="item_related">
                    <a href="/129?category=1182989" class="link_related">
                      <span class="thumnail item-thumbnail" style="background-image:url('')"></span>
                      <div class="box_content">
                        <strong>FORM 관련 태그 정리(HTML)</strong>
                        <span class="info">2023.10.02</span>
                      </div>
                    </a>
                  </li>
                
              </ul>
            </div>

</div>

</main>

</div>

<footer id="footer">
      <div class="inner_footer">
        
          <a href="https://www.tistory.com/" class="link_footer">티스토리</a>
        
        
        
        
      </div>
      <div>
        <address>© 2018 TISTORY. All rights reserved.</address>
      </div>

</footer>

</div>
    
  
<div class="#menubar menu_toolbar ">
  <h2 class="screen_out">티스토리툴바</h2>
</div>
<div class="#menubar menu_toolbar "></div>
<div class="layer_tooltip">
  <div class="inner_layer_tooltip">
    <p class="desc_g"></p>
  </div>
</div>
<iframe id="editEntry" style="position:absolute;width:1px;height:1px;left:-100px;top:-100px" src="//just-do-it-man.tistory.com/api"></iframe>

<script>                    (function () { 
                        var blogTitle = 'DogFootMan';
                        
                        (function () {
    function isShortContents () {
        return window.getSelection().toString().length < 30;
    }
    function isCommentLink (elementID) {
        return elementID === 'commentLinkClipboardInput'
    }

function copyWithSource (event) {
        if (isShortContents() || isCommentLink(event.target.id)) {
            return;
        }
        var range = window.getSelection().getRangeAt(0);
        var contents = range.cloneContents();
        var temp = document.createElement('div');

temp.appendChild(contents);

var url = document.location.href;
        var decodedUrl = decodeURI(url);
        var postfix = ' [' + blogTitle + ':티스토리]';

event.clipboardData.setData('text/plain', temp.innerText + '\n출처: ' + decodedUrl + postfix);
        event.clipboardData.setData('text/html', '<pre data-ke-type="codeblock">' + temp.innerHTML + '</pre>' + '출처: <a href="' + url + '">' + decodedUrl + '</a>' + postfix);
        event.preventDefault();
    }

document.addEventListener('copy', copyWithSource);
})()

})()</script>

<script src="//search1.daumcdn.net/search/statics/common/js/g/search_dragselection.min.js"></script>

<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/styles/atom-one-light.min.css" rel="stylesheet"/><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/delphi.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/php.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/python.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/r.min.js" defer></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/ruby.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/scala.min.js" defer></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/shell.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/sql.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/swift.min.js" defer></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/typescript.min.js" defer></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/vbnet.min.js" defer></script>
  <script>hljs.initHighlightingOnLoad();</script>

<div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-ca4388dc0a651c2b3f7e5d621b4f57e49eb8bea8/static/script/common.js"></script>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-ca4388dc0a651c2b3f7e5d621b4f57e49eb8bea8/static/script/shortcut.js"></script>
<script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script>
<script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script>

</body>
<script>
  $('.article_view').find('table').each(function (idx, el) {
    $(el).wrap('<div class="table-overflow">')
  })
</script>

</html>

DogFootMan

DogFootMan

태그

최근글

댓글

공지사항

아카이브

SELECT 태그

datalist 태그