본문 바로가기

Development/HTML & CSS & Javascript

[HTML] input 태그, label 태그

 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>