html 폼 요소의 종류 <label>, <fieldset>, <legend>, <form> 예시

• label

<label for="name">이름</label>: <input type="text" id="name"><br>
<label for="nickname">이름</label>: <input type="text" id="nickname"><br>
<label for="address">이름</label>: <input type="text" id="address"><br>

form 요소의 id 속성값과 <label>의 for 속성값을 같게 적어주어야 합니다.

<label>을 사용하면 이를 클릭했을 경우 해당 form 요소를 클릭한 것처럼 동작합니다.

또한, 스크린 리더기를 통해 듣게 되면 해당 form 요소에 접근 시 <label>을 함께 읽어주게 됩니다.

<label>은 사용성, 접근성적인 측면으로 중요한 역할을 하므로 반드시 써주는 것이 좋습니다.

 

 

See the Pen Untitled by HelloHailie (@hellohailie) on CodePen.

 

화면상 변화는 없지만 실제로 이 아이디와 이 입력 요소는 연결이 된 상태다. 그래서 id: 부분을 눌러도 커서가 공간에 깜빡인다!

 

 

 

• fieldset & legend

 

 

<fieldset>, <legend>는 form 요소를 구조화 하기 위해 필요한 태그입니다.

• <fieldset> : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용
• <legend> : 폼 요소의 제목으로 <fieldset> 내부에 작성

<fieldset>은 보통 form의 성격에 따라 구분합니다.

<legend>는 <fieldset>의 자식으로 반드시 최상단에 위치해야 합니다.

 

필수 입력 부분과 선택 입력 부분을 만들때 쓴다. 

 

<fieldset>
    <legend>기본 정보</legend>
    ... 폼 요소들 ...
</fieldset>
<fieldset>
    <legend>부가 정보</legend>
    ... 폼 요소들 ...
</fieldset>

 

 

• form

form 요소들을 감싸는 태그로 데이터를 묶어서 실제 서버로 전송해주는 역할을 하는 태그입니다.

만약 <fieldset>으로 구조화되어있다면 <fieldset>도 함께 감싸는 역할을 합니다.

 

<form>에는 대표적인 2가지 속성이 있습니다.

• action: 데이터를 처리하기 위한 서버의 주소
• method: 데이터를 전송하는 방식을 지정

method 속성값에는 get/post 2가지 방식이 존재합니다.

get 방식은 데이터가 전송될 때 주소창에 파라미터 형태로 붙어 데이터가 노출됩니다. 그래서 민감한 정보 다루는 포맷에서는 쓰면 안된다. 

반면, post 방식은 데이터가 전송될 때 데이터가 노출되지 않습니다. 그래서 회원가입, 로그인 정보 제출할 때 Post 쓴다.