[html 태그] input, label 태그 (속성, 특징)

웹 페이지 작업을 하면서 input태그는 뺄 수 없는 요소이다.

텍스트, 비밀번호, 체크박스, 버튼 등 여러가지 다양한 용도로 사용할 수 있다.

 

1. input 태그의 사용 (with. label)

기본적으로 input 태그는 닫기 태그가 없는 독립적인 태그이다.

<input type="타입">

html5 이전엔 input 태그 안에 닫기를 추가해줘야 했지만 이제는 생략해도 된다.

<input type="타입" />

 

그리고 input 태그는 label 태그와 주로 같이 사용이 되는데

label 태그와 input 태그를 연결 시켜준다.

(label의 for="" 와 input의 id 값)

<label for="inputName">이름 :</label>
<input type="text" id="inputName">

위의 태그와 같이 적용을 하게 되면

이름 : 영역을 클릭하게 되면 input 입력 영역이 포커스 된다.

 

그리고 웹접근성 측면으로 봤을 때도 해당 input 태그가 이름을 입력하는

input 인 것을 알려주는 역할을 할 수 있다.

 

예시)

이름 :

 

 

type이 text인 경우 외에도 radio나 checkbox인 경우의 예를 들자면

<h3>성별</h3>
<ul>
   <li>
      <label>
         <input type="radio" name="gender">
         남성
      </label>
   </li>
   <li>
      <label>
         <input type="radio" name="gender">
         여성
      </label>
   </li>
</ul>

label에 for값과 input의 id값을 사용하지 않아도

label 태그 안에 input을 넣어서 해당 input이 label 태그 안에 있는 텍스트인 각 성별에 해당하는 것을 표시할 수 있다.

 

그리고 radio나 checkbox 의 경우 input에 name 속성을 서로 같게 맞춰줘서

연관이 있는 input임을 명시해주고 사용한다.

성별

• 남성
• 여성
•  

2. input 태그 type 속성

input 태그에서 가장 중요한 것이 속성이다.

가장 중요하게 알아둬야 할 속성은 type이다.

 

해당 input 요소가 어떤 역할을 할 것인지를 결정한다.

속성 값	설명
text	기본 값으로 텍스트를 입력할 수 있다.
password	비밀번호를 입력하는 영역, 입력된 값은 *(별표) 형태로 노출된다.
file	파일을 선택할 수 있는 별도의 창을 만들 수 있다.
radio	라디오 버튼 - 공통된 name의 여러 버튼 중 한 가지를 선택할 수 있다. (단일선택)
checkbox	체크 버튼 - 공통된 name의 여러 버튼 중 여러가지를 선택할 수 있다. (다중선택)
button	일반적인 button 역할을 하는 버튼
submit	전송을 위한 버튼
hidden	일반적인 사용자들에게는 노출되지 않는 영역이지만 서버에 특정 값을 넘길 때 사용한다.
reset	초기화 버튼
image	이미지 형태의 전송 버튼 src 속성을 사용해 이미지를 적용한다. <input type="image" src="test.jpg">

*html5 이후에 추가된 type 속성

속성 값	설명
number	숫자 입력 영역
tel	전화 번호 입력 영역
url	웹 페이지에 사용되는 url 입력 영역
date	날짜 입력 창 영역 (년, 월, 일)
month	년, 월을 선택하는 영역
week	년, 주를 선택하는 영역
time	시간 입력 영역
color	색상을 선택할 수 있는 창을 띄운다.
email	email을 입력할 수 있는 영역
range	특정 범위를 마우스로 드래그앤 드롭 방식으로 입력할 수 있는 영역
search	검색어 입력 영역

html5에 추가 된 속성 값 같은 경우는

브라우저별로 적용이 안되는 경우도 있기 때문에

사용시에 크로스브라우징에 신경을 써서 작업이 필요하다.

 

 

 

---

참고

https://aboooks.tistory.com/295