[HTML]18_<input type="checkbox">

2u·2023년 3월 15일
0

HTML

목록 보기
14/22
post-thumbnail

1. 체크박스(checkbox) 생성하기

<form action='a.jsp'>
  성별<br>
  <input type='checkbox' name='gender' value='female'> 여성
  <input type='checkbox' name='gender' value='male'> 남성<br>
  좋아하는 과일<br>
  <input type='checkbox' name='fruits' value='apple' checked>사과
  <input type='checkbox' name='fruits' value='banana'>바나나
  <input type='checkbox' name='fruits' value='orange'>오렌지<br>
  <input type='submit'>
</form>
성별
여성 남성
좋아하는 과일
사과 바나나 오렌지

01) type='checkbox'

: 'checkbox'로 지정

02) name='gender' / 'fruits'

: 체크박스의 이름으로 같은 분류의 체크박스는 같은 이름으로 지정해 준다.

03) value='고유의 값'

: 선택 항목들이 가지는 고유의 값이다.
: 여기서 지정한 값들이 '제출(submit)' 버튼을 누르면 서버로 전송된다.

클라이언트 쪾에서는 이 값이 보이지 않는다. 서버 쪽에서 이 값은 체크박스의 name과 함께 전달되는 데이터에 부여되는 값이다.

04) 화면에 보여줄 선택박스 설명

: <input> 태그 바깥에는 체크박스를 설명해줄 단어를 적는다.
ex)여성, 남성, 사과, 바나나, 오렌지...
: 이 값들은 사용자에게 체크박스를 선택할 수 있도록 설명을 제공할 뿐, 이 값들이 서버로 전송되지는 않는다.
-> 서버에 전성되는 값은 'value' 속성에 적힌 값이다.

05) checked

: 사과항목에 'checked'라는 속성이 하나 더 적혀 있는데, 해당 속성을 적어주면 화면에 처음 로딩될 때, 해당 항목은 기본으로 선택이 된 채로 보여진다.

2. 체크박스 응용하기

3. 체크박스 응용하기(HTML/CSS/JS)

0개의 댓글