더보기

<input type="radio" /> - 여러가지 항목 중 한 개만 선택할 수 있는 버튼

<form action=" " method="GET"> 
  
  <input type="radio" name="user-sex" id="male" />
  <label for="male"> 남자 </label>
  
  <input type="radio" name="user-sex" id="male" />
  <label for="female"> 여자 </label>
  
  <button type="submit"> submit </button>
  
</form>

🚨 Syntax alert 🚨 

필수 attribute

name="user-sex" : 같은 값을 적어서 radio 그룹을 묶어준다

value="male" : 다른 값을 적어서 제출 시 서버에서 구분하기 위해 작성해야 한다

 

 

<input type="checkbox" /> - 여러가지 항목을 선택할 수 있는 버튼

<h1> 취미 </h1>

<form action=" " method="POST">

  <input type="checkbox" name="hobby" value="design" id="design" />
  <label for="design"> 디자인 </label>
  
  <input type="checkbox" name="hobby" value="photograph" id="photograph" />
  <label for="photograph"> 사진촬영 </label>
  
  <input type="checkbox" name="hobby" value="video-editing" id="video-editing" />
  <label for="video-editing"> 영상편집 </label>
  
  <button type="submit"> submit </button>
  
</form>

🚨 Syntax alert 🚨 

필수 attribute

name="hobby" : 같은 값을 적어서 checkbox 그룹을 묶어준다

value="design" : 다른 값을 적어서 제출 시 서버에서 구분하기 위해 작성해야 한다

 

더보기

프론트엔드 지망생이 강의를 들으며 공부용으로 작성된 포스트이기 때문에 내용이 빈약할 수 있습니다 :)

잘못된 정보가 있으면 댓글 남겨주시면 감사하겠습니다.

+ Recent posts