[HTML] label/input 태그 정리 (웹 접근성)

label 태그

label 태그는 양식 입력 창의 요소들을 위한 캡션을 나타냅니다.

코드 작성 방식에는 명시적(explicit)과 암시적(implicit)으로 분류됩니다.

label 태그를 쓰는 가장 큰 이유는 웹 접근성을 위함입니다.

 

먼저 명시적 작성 방식과 암시적 작성 방식에 대해 알아보겠습니다.

 

1. 명시적 작성 방식

명시적 작성 방식은 label 의 for 속성과 input의 id 속성을 명시함으로써 연결해주는 방식입니다.

 

2. 암시적 작성 방식

암시적 작성 방식은 label 태그 안에 input 태그를 넣음으로써 for 속성을 명시하지 않더라도 암묵적으로 연결하는 방식입니다.

 

대부분은 명시적 방식을 선호하고 있습니다.

이유는 오래된 통신 기기는 아직 암시적 방식을 지원하지 않기 때문입니다.

 

input 태그

input 태그는 사용자로부터 정보를 입력 받을 수 있게 해주는 태그입니다.

type 속성에 설정 값에 따라 다양한 입력양식을 사용할 수 있습니다.

<input type="유형" 속성="속성 값">

 

- type : 입력 태그의 유형을 설정하는 속성입니다.

- name : 서버로 전달되는 이름을 설정하는 속성입니다.

- value : 입력 태그의 초기 값을 설정하는 속성입니다.

 

type 속성 종류

1. text : 기본 텍스트를 입력하는 창을 생성해줍니다.

2. password : 비밀번호를 입력하는 창을 생성해줍니다.

3. button : 기본 버튼을 생성해줍니다.

4. radio : 라디오 버튼을 생성해줍니다.

5. checkbox : 체크박스를 생성해줍니다.

6. file : 파일 첨부 버튼을 생성해줍니다.

7. hidden : 사용자에게 입력받지 않고 기본으로 설정된 값을 서버로 전송합니다.

8. submit : 서버로 제출하는 버튼을 생성해줍니다.

9. reset : form에서 입력한 input 값들을 reset 시킵니다.

10. url : url 입력을 위한 필드를 정의합니다.

11. search : 검색 문자열 입력을 위한 텍스트 필드를 정의합니다.

12. tel : 전화번호 입력을 위한 필드를 정의합니다. (모바일 브라우저에서 키보드 배열이 변경 됨)

13. email : 메일 주소 입력을 위한 필드를 정의합니다.(모바일 브라우저에서 키보드 배열이 변경 됨)

14. time : 시간 지정을 지정하는 요소입니다. (시간은 00:00부터 23:59까지 입력하거나 스핀 박스의 화살표를 클릭해서 선택함) * 아직 모든 브라우저를 지원하지는 않습니다.

            1) min - 날짜나 시간의 최솟값을 지정합니다.

            2) max - 날짜 시간의 최댓값을 지정합니다.

            3) step - 스핀 박스의 화살표를 누를 때마다 날짜나 시간의 증가값을 지정합니다.

            4) value - 화면에 표시할 초기값을 지정합니다.