Visual Studio Code form에 대해서 - 2

Option 태그와 input 태그의 사용

만약 사는 지역과 성별, 먹고 싶은 음식을 고를 페이지를 만들어보자면

 

사는 지역에는 각 도시들의 이름이 있어야 하고,

남, 여 중에 한 개만 선택되어야 하며

먹고 싶은 음식은 여러 개 선택해도 돼야 할 것이다.

사는지역:
    <select name="city" id="">
      <option value="">선택해주세요</option>
      <option value="">인천</option>
      <option value="">서울</option>
      <option value="">제주</option>
    </select>

select name에 city를 입력하게되면 city값에 유저가 선택하는 값이 저장된다.

물론 form태그를 써야한다.

이름이 city이고 , id는 선택된 값이 들어간다.

기본은 선택해 주세요 이고 선택한다면 인천 , 서울 , 제주 목록이 나온다.

 성별:<br />
    남: <input type="radio" name="gender" value="male" /> 
    여: <input type="radio" name="gender" value="female" />

br은 줄 바꿈이다.

가짓수 중에 한 가지만 선택할 수 있다면 radio를 사용할 수 있다.

하지만 주의점이 만약 name이 다르다면 동시에 선택되기 때문에 필수로 name값을 같게 해줘야 한다.

선택한다면 gender라는 이름에 선택된 value값이 들어가게 되는 것이다.

그리고 value값은 항상 달라야 한다.

    먹고 싶은음식: <br />
    <input type="checkbox" name="food" value="chicken" />치킨
    <input type="checkbox" name="food" value="pizza" />피자
    <input type="checkbox" name="food" value="sam" />삼겹살

checkbox는 복수로 선택이 가능하므로 여러 개를 선택할 수 있다.

 

radio와 checkbox의 차이점은 복수로 선택이 가능한지 불가능한지의 차이라고 볼 수 있다.