Front End/HTML + CSS + JavaScript

HTML drop down 드랍다운 선택 select 태그

LoGinShin 2023. 6. 16. 02:46
반응형

drop down이라고 불리는 이 기능은 여러 가지 선택지 중 하나를 선택하게 하는 dropdown List 제한된 공강에서 여러개를 선택하게 하는 기능으로 select와 option으로 이루어져 있습니다.

 

<html>
    <body>
            <select name = number>
                <option value="1">일</option> 
                <option value="2">이</option>  
                <option value="3">삼</option>
            </select>
    </body>
</html>

위에 코드를 입력하면 밑에처럼 보입니다.

선택하면 밑으로 펼쳐지죠.

사용자에게는 일,이,삼 으로 보이지만 실제로 넘어가는 데이터와 다루는 데이터는 1,2,3 인것이죠 (value가 넘어갑니다)

 

 

 

 

 

 

 

multiple 속성

 

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="http://localhost/color.php">
          <h2>숫자</h2>
            <select name = number>
                <option value="1">일</option> 
                <option value="2">이</option>  
                <option value="3">삼</option>
            </select>
            <h2>색깔</h2>
            <select name="color" multiple>
                <option value="black">검정</option>
                <option value="orenge">주황</option>
                <option value="white">흰</option>
            </select>

            <br><br><br>
            &nbsp;&nbsp;&nbsp;
            
            <input type="submit">
        </form>
    </body>
</html>

<select name = "color" multiple>

multiple 속성이 붙으면 사용자가

ctrl키를 누르고 선택 항목에서 다중 선택을 할 수 있습니다.

 

 

 

 

생활코딩님에게 배운 바로는

백엔드 개발자가 여기 url로 정보 보낼 수 있게 해 주세요~라고 하면

 

<form action="(url)">

 

<input type="submit">

 

</form>

 

 

으로 <form>태그 안에 있는 사용자가 기입한 정보를 해당 서버로 보낼 수 있게 된다고 합니다.

 

 

정보를 기입하고 submit버튼을 누르면 지정한 url로 사용자가 선택한 데이터가 넘어가게 됩니다.

 

각 태그의 name속성 이후 사용자가 선택한 정보가 url로 표시됩니다..

728x90
반응형