label 태그
: 폼의 양식에 이름 붙이는 태그
input 태그
: 사용자로부터 정보를 입력받을 수 있게 해주는 태그
< input태그의 속성 >
- type : 입력 태그의 유형을 설정하는 속성
- name : 서버로 전달되는 이름을 설정하는 속성
- value : 입력 태그의 초기값을 설정하는 속성
< input 태그의 type 속성 종류 >
속성값 | 설명 |
text | 기본 값으로 텍스트 입력 가능 |
password | 비밀번호를 입력하는 영역. 입력된 값은 *(별) 형태로 노출. |
file | 파일을 선택할 수 있는 별도의 창 열림 |
radio | 공통된 name의 여러 버튼 중 한 가지만 선택 가능 |
checkbox | 공통된 name의 여러 버튼 중 여러가지 선택 가능 |
button | 일반적인 버튼 |
submit | 전송을 위한 버튼 |
hidden | 일반적인 사용자들에게는 노출되지 않는 영역이지만 서버에 특정값을 넘길 때 사용 |
reset | 초기화 버튼 |
image | 이미지 형태의 전송 버튼. src속성을 사용해 이미지를 적용. |
< label태그와 input태그의 작성방식 >
label을 클릭하면 input의 type에 맞게 처리된다.
▶ 명시적 작성 방식 - "label의 for속성의 값 = input의 id속성의 값"이면 연결됨
<input type="타입" id="아이디">
<label for="input의 id값(아이디)">이름</label>
▶ 암시적 작성 방식 - label 태그 안에 input 태그를 넣음으로 for속성을 명시하지 않아도 연결됨
<label>
이름
<input type"타입" id="아이디">
</label>