form 태그 표준화 마크업, 접근성 높이기

어제 들은 html 웹표준 수업 정리 흑흑흑흑흑

이제 수업 한 달 들은 왕초보이기 때문에 오류가 있을 수 있으며,

오류가 있다면 댓글로 친절히 남겨주세요 ㅇ_< ㅋㅋㅋㅋㅋ

이 글은 수업을 듣고 나서 스스로 정리를 하기 위해 쓰는 거랍니다!

 

 

우리가 웹을 만들면 기본적으로 사용자에게 정보를 제공하는 역할을 하는데,

사용자로부터 정보를 받는 역할을 할 때도 있당!

그것이 바로 회원가입이나 설문조사 같은 것.

이렇게 사용자로부터 정보를 수집할 때 쓰는 태그가 바로 <form></form>인 것이다.

 

예를 들어 회원가입 페이지를 만든다고 할 때

아이디나 아이디 중복확인, 비밀번호, 연락처, 생년월일, 이메일 주소 등을 받으려면

<form></form> 태그 안에 작성하면 되는 것.

 

참고로 <form> 태그를 입력할 땐

<form name="폼 태그 이름" action="데이터를 처리할 페이지" method="데이터 전송 방식">

이렇게 name, action, method를 같이 입력해주는 것이 좋다.

 

 

<form> 안에 태그를 입력할 땐

<input type>을 사용한다.

type의 속성값은 아래와 같다.

 

1. text
2. password
3. checkbox
4. radio
5. file
6. image
7. hidden

 

<input type="text" name="" id="" />

이런 식으로 입력한다.

 

 

반면에 아래 세 가지는 <input>을 사용하지 않고 사용한다.

 

1. submit
2. reset
3. button 

 

<button type="submit"></button>

이런 식으로!

 

 

그리고 <form></form> 태그를 작성할 땐 반드시

name과 id가 필요한데 그것은 <label> 태그를 사용하기 위해서다.

리더기를 통해 웹을 접하는 사람들까지 편하게 이용할 수 있도록

접근성을 높이려면 <label> 태그가 꼭 필요하다. 

 

따라서~ 표준화 마크업을 할 땐 

<input> 요소들은 <label>과 함께 사용하고,

<input> 요소들은 <fieldset>이나 <div> 안에 작성해준다!

 

관련 태그(속성)는 다음과 같다.
1. fieldset: 양식의 소그룹 (테이블에서 tr 같은 역할을 하는 것 / td는 인풋태그)
2. legend: fieldset의 제목
3. label: 필드와 텍스트의 그룹
4. for: 연결하고자 하는 필드의 id값 작성 !!!

 

 

label을 입력하는 방법은 두 가지인데,

1. <label for="id값">설명</label>

또는 

2. <label></label>로 전체 묶어버리기(?) 

이거 선생님이 설명해줬던 거 같은데 기억 잘 안난다.. ^^ 

 

<fieldset>으로 전체를 묶고 

<legend>로 필드셋에 대한 제목을 입력해준다(dl로 생각하면 dt에 해당하는 부분이다).

그런 다음 <input type>에 있는 id를 라벨로 묶어서 <label for="uid">아이디</label> 입력해주면 된다.

 

아니면 두 번째처럼 <input type>을 

<label></label>로 묶어버릴 수 있다.

그런데 의문이 생기는 게 그럼 저 라벨은 리더기가 어떻게 읽어주지 ?_? ㅋㅋㅋㅋㅋㅋ

아시는 분 댓글 요망

 

 

상단의 아이디와 비밀번호는 <label>로 묶은 것

하단의 전화번호와 이메일은 그냥 <fieldset>과 <legend>로만 묶어준 것

 

 

웹에서 보면 <label>을 해준 것과 안 해준 것 사이의 차이는 없지만 리더기로 읽을 때 차이가 생긴다. 

또한, 아이디와 비밀번호 글씨를 마우스로 누르면 바로 입력이 가능하지만

전화번호와 이메일은 마우스로 누르면 드래그만 될 뿐이다. 헉헉.

 

 

그리고 성별처럼 둘 중 하나만 체크해야 하는(기타도 넣고 싶었는데 기타의 value를 뭐라고

하는 게 좋을 지 모르겠어서 못 넣었.. 웅엥..) input type은 name 속성값을 똑같이 주면 된다!!

 

 

또한, label 태그도 하면서 사용자가 간단하게 입력할 수 있도록 해주는 것도

웹 접근성을 높일 수 있는 방법이다...