웹페이지에서 사용자에게 option을 준 후 선택하게 하는 경우가 있다.

여기서는 1. dropdown 리스트 2. radio 3. checkbox 세 종류를 살펴볼 것이다.

참고로 단일 선택은 세 가지 모두 이용해도 상관없지만 다중선택을 할 시에는 checkbox를 이용하는 것이 편리하다.

1. dropown 리스트

저렇게 화살표를 누르면 목록이 나열되어 하나를 선택 후 제출 할 수 있는 것을 말한다. 여기서는 input 태그가 아닌 select>option태그를 이용한다.

<form action="https://localhost.color.php">
 <h1>색상</h1>
  <select name="color">
   <option value="red">붉은색</option>
   <option value="black">검은색</option>
   <option value="blue">파란색</option>
  </select>
  <input type="submit">
</form>

1. select에서 name은 이전에 봤던것과 같이 데이터를 보내는데에(참조) 이용한다.
2. <option></option>태그 가운데에 선택값을 넣는다.
3. 속성 value는 컴퓨터가 알기 쉬운 값으로 선택한다.
4. <select><option></option></select>후에 submit 버튼을 만든다.

참고로 select값에 multiple 속성만 추가하면 다중선택도 가능하지만 Ctrl키를 누른 상태로 제출해야해서 사용을 하진 않는다.

2. Radio 타입

Radio는 동그란 버튼으로 둘 중 한개만 선택 가능하게 하는 input type이다.

<form action="https~">
 <h1> 색상 </h1>
 <p>
  붉은색 : <input type="radio" name="color" value="red" checked>
  검은색 : <input type="radio" name="color" value="black">
 </p>
 <input type="submit">
</form>
  

1. 속성 type은 radio로 한다.
2. 옵션 중 하나를 선택하면 한개가 되지 않도록(단일선택만 가능하도록) 속성 name에 같은 값을 주어 묶는다.
3. value는 역시 컴퓨터가 알기 쉽도록
4. 속성에 checked를 추가하면 해당옵션이 웹페이지를 시작할때 기본으로 선택되어 있다.

3. Checkbox 타입

비교를 위해 라디오타입과 체크박스를 같이 캡쳐했다. 밑에가 체크박스인데 여기선 다중선택이 가능하다.

<form action="주소">
 <h1> 사이즈(다중선택) </h1>
 <p>
  95 : <input type="checkbox" name="size" value="95" checked>
  100 : <input type="checkbox" name="size" value="100">
  105 : <input type="checkbox" name="size" value="105">
 </p>
 <input type="submit">
</form>

1. 속성 type은 checkbox로 한다.
2. 다중선택이 가능하도록 속성 name에 같은 값을 주어 묶는다.
3. value는 역시 컴퓨터가 알기 쉽도록
4. 속성에 checked를 추가하면 해당옵션이 웹페이지를 시작할때 기본으로 선택되어 있다.