html 선택박스, 콤보 셀렉트 selected 속성

by

선택박스는 select(셀렉트) 태그를 사용하며 option 속성으로 정의하여 value 특정값으로 이름을 지정하며 지정하지 않는경우에 박스안에 텍스트 값으로 사용하게 됩니다.

select 셀렉트 선택박스에서는 여러가지 속성을 추가할수가 있으며 multiple 속성을 추가하면 다중선택이 가능합니다. 아래예제를 살펴보도록 하겠습니다.

선택박스 만들기

form action 속성으로 선택박스를 전송할 서버 주소를 지정하고 select name 이름, option value 를 선택하여 선택박스로 사용할 텍스트를 지정할수가 있으며 input type=”submit” 로 전송을 버튼을 추가합니다.

 <html>
    <head> 
    </head>
    <body>
      <form action="http://전송할 서버주소/.php">
	  <h1> 선택박스 </h1>
	  <select name="selectionbox">
        <option value="box01">=== 선택 ===</option> 
		<option value="box02">한국어</option>
		<option value="box03">영어</option>
		<option value="box04">일본어</option>
		<option value="box05">중국어</option>
	   </select>	  
	   <input type="submit">
        
    </body>
 </html>

다중선택박스 만들기

select 셀렉스 태그에 multiple 속성을 추가하게 되면 다중선택박스를 만들수가 있지만 다중선택을 하기 위해서는 shift 키를 동시에 누르고 선택이 가능하므로 여기서는 잘 사용하지 않습니다.

<html>
    <head>        
    </head>
    <body>
      <form action="http://전송할 서버주소/.php">
	  <h1> 선택박스 </h1>
	  <select name="selectionbox" multiple>        
		<option value="box02">한국어</option>
		<option value="box03">영어</option>
		<option value="box04">일본어</option>
		<option value="box05">중국어</option>
	   </select>	  
	   <input type="submit">
        
    </body>
</html>

라디오박스 만들기.

radio(라디오박스)는 input type=”radio” 태그를 사용하며 name=”이름” 이 같은 경우에 하나만 선택이 가능하며 name 이 다른경우 다중선택도 가능합니다.

<html>
    <head>       
    </head>
    <body>
        <form action="http://localhost/order.php">
            <p>
                <h1>라이오 박스 선택 </h1>
                1번 선택 : <input type="radio" name="box" value="01">
                2번 선택 : <input type="radio" name="box" value="02">
                3번 선택 : <input type="radio" name="box" value="03">
            </p>         
            <input type="submit">
        </form>
    </body>
</<html>

체크박스 다중선택만들기

체크박스는 input type=”checkbox” 태그를 사용하며 name 을 동일하게 입력하여도 다중선택이 가능합니다.

<html>
    <head>       
    </head>
    <body>
        <form action="http://localhost/order.php">
            <p>
                <h1>체크 박스 선택 </h1>
                1번 선택 : <input type="checkbox" name="box" value="01">
                2번 선택 : <input type="checkbox" name="box" value="02">
                3번 선택 : <input type="checkbox" name="box" value="03" checked>
	    4번 선택 : <input type="checkbox" name="box" value="03">
            </p>         
            <input type="submit">
        </form>
    </body>
</html>

▤ 목차 목차 보이기

Leave a Comment