[생활코딩] form- 선택 | sohinggu๑°⌓°๑

HTML - form: 선택

Dropdown List

제한된 공간 안에서 여러 개의 선택지를 선택할 수 있도록 하는 기능

1. <select> : option들을 묶어 dropdown list를 만듦
2. <option> : 선택 항목

   - value 속성 :실제로 컴퓨터에 전송되는 정보

   붉은색 검은색 파란색
   
   

   <form action="http://localhost/color.php" style="padding-left: 20px;">
   	<select name="color">
      		<option value="red">붉은색</option>
           <option value="black">검은색</option>
           <option value="blue">파란색</option>
   	</select>
       <input type="submit>
   </form>

   
   

   - multiple 속성 : ctrl + 클릭으로 다중 선택 가능 (속성값이 없기 떄문에 속성이름만 적어주면 됨)

   붉은색 검은색 파란색
   
   

   <form action="http://localhost/color.php" style="padding-left: 20px;">
   	<select name="color" multiple>
      		<option value="red">붉은색</option>
           <option value="black">검은색</option>
           <option value="blue">파란색</option>
   	</select>
       <input type="submit>
   </form>

HTML - form: radio, checkbox

Radio button

사용자에게 한 개의 선택지를 선택해서 제출할 수 있도록 하는 기능 (단일 선택)

1. <input type="radio"> : 라디오 버튼 생성

       

   <input type="radio">
   <input type="radio">
   <input type="radio">



2. <input type="raio" name="color"> : 같은 name 값으로 묶인 radio 버튼 중 1개의 버튼만 선택 가능

   붉은색 :   검은색 :   파란색 :

   붉은색 : <input type="radio" name="color" value="red">
   검은색 : <input type="radio" name="color" value="black">
   파란색 : <input type="radio" name="color" value="blue">

Check Box

사용자에게 여러 개의 선택지를 선택해서 제출할 수 있도록 하는 기능 (다중 선택)

1. <input type="checkbox" name="size"> : 같은 name 값으로 묶인 checkbox를 여러개 선택 가능

   95 :   100 :   105 :

   95 : <input type="checkbox" name="size" value="95">
   100 : <input type="checkbox" name="size" value="100">
   105 : <input type="checkbox" name="size" value="105">



2. <checked> 속성 : radio버튼이나 checkbox의 기본값 설정 (기본값으로 주고 싶은 항목에 속성으로 줌)

   붉은색 :   검은색 :   파란색 :

   95 :   100 :   105 :

   붉은색 : <input type="radio" name="color" value="red">
   검은색 : <input type="radio" name="color" value="black"gt;
   파란색 : <input type="radio" name="color" value="blue" checked>
   
   95 : <input type="checkbox" name="size" value="95" checked>
   100 : <input type="checkbox" name="size" value="100" checked>
   105 : <input type="checkbox" name="size" value="105">