Form 요소 정리

Form 태그

Form 태그는 웹 페이지에서 입력양식을 의미합니다.

텍스트 필드나 체크박스나 라디오 버튼에 입력된 정보를 백엔드 서버에 보낼 때 사용합니다.

자세한 내용은 백엔드 공부를 진행 할 때에 하는게 좋습니다.

fieldset,legend

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

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

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

legend는 fieldset의 자식으로 무조건 최상단에 위치합니다.

Input 태그

실제로 사용자가 양식을 입력하기 위한 태그는 Input과 같은 태그들이 사용됩니다.

Input 태그의 type 속성을 통해 종류를 나타내고 name 속성을 통해 데이터의 이름을 나타냅니다.

name은 라디오 버튼과 체크박스를 그룹화 시켜주는 속성입니다.

name에 같은 이름을 가지고 있는 버튼과 박스는 같은 그룹이 됩니다.

그리고 value 속성을 통해 기본값(기본으로 상자에 적혀있는 값)을 지정합니다.

type

• text : 일반 문자. placeholder를 사용할 수 있습니다. placeholder는 안내텍스트 입니다.
• password : 비밀번호. 이 곳에 적은 입력 값은 노출되지 않습니다.
• button : 버튼
• submit : 양식 제출용 버튼
• reset : 양식 초기화용 버튼
• radio : 한개만 선택할 수 있는 컴포넌트
• checkbox : 여러개를 선택할 수 있는 컴포넌트
• file : 파일 업로드
• image : 이미지를 삽입 할 수 있는 버튼. 기능은 button과 동일함. src와 alt 속성이 반드시 필요합니다.
• hidden : 사용자에게 보이지 않는 숨은 요소

이 외에도 다양한 속성 값이 존재하지만 자주 사용하는 위주로 정리 했습니다.

브라우저에 따라서 모습이 조금씩 다를 수 있지만 기능은 모두 같습니다.

Textarea

한 줄만 입력 할 수 있는 text와 다르게 여러 줄을 입력 할 수 있습니다.

row, cols 등을 통해서 줄 수와 글자 수를 조절 할 수 있습니다.

• cols : 한 줄에 들어가는 글자 수 입니다. 다만 평균적인 크기의 글자 수를 의미하므로 크기가 크면 부족 할 수 있습니다.
• rows : 세로 줄 수 입니다.

Select,Option

Select 태그는 선택 목록 상자 또는 콤보 박스라고 부릅니다.

드롭 다운 리스틀 만들 때에 사용합니다. 리스트 요소는 Option을 통해서 만듭니다.

Button

버튼을 만들 때에 사용하며 submit,reset,button의 3가지 타입이 있습니다

기능은 모두 input의 것과 동일하며 다만 빈 태그가 아니고 내용을 집어 넣을 수 있습니다.

Label

label은 form요소의 이름과 form요소를 명시적으로 연결시켜주기 위해 사용합니다.

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

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

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

사용성,접근성 측면에서 중요한 역할을 하니 반드시 적어주는 것이 좋습니다.