HTML/CSS - Form

Form이란?

• <form> 태그는 사용자로부터 입력을 받는 요소들을 감싸는 태그
• 텍스트 입력, 버튼, 체크박스, 라디오 버튼 등 다양한 입력 요소를 포함
• 데이터를 서버로 전송할 수도 있고, JavaScript를 이용해서 처리 가능

form 태그 기본 구조

input

• <input> 태그는 사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 정의할 때 사용

• <input> 요소는 사용자가 데이터를 입력할 수 있는 입력 필드를 선언하기 위해 <form> 요소 내부에서 사용 이러한 입력 필드는 <input> 요소의 type 속성값을 달리함으로써 여러 가지 모양으로 나타낼 수 있음

• <input> 요소는 빈 태그(empty tag)이며, 속성만을 포함하고 있음.

• <label> 요소를 사용하면 <input> 요소의 라벨(label)을 정의할 수도 있음.

Input의 type 속성 값(사용한 것들)

Type	설명
text	일반 텍스트 입력(한 줄)
password	패스워드 입력(입력 내용 안 보임)
search	검색 입력 필드 (X 버튼 제공)
email	e-mail 입력 필드(이메일 형식 체크 미작성시 알림 발생)
tel	전화번호 입력 (모바일에서 숫자 키패드)
checkbox	다중 선택 가능 체크박스
radio	하나만 선택 가능한 라디오 버튼
submit	폼 제출
reset	폼 입력값 초기화

text,password,tel,email

회원가입에서 가장 많이 볼 수 있는 type (가장 익숙한 type)

그 외 태그

• <label> :
  - 입력 필드와 연결해 사용자가 쉽게 이해하도록 도움
  - 클릭 영역을 확장하여 UX 향상
  - 스크린 리더가 label을 읽어줘서 시각장애인도 폼을 쉽게 사용할 수 있음.
  -<label for = ""> : 라벨과 결합될 요소의 id 속성값
  

• <fieldset> :
  - 폼 요소들을 그룹화하는 역할을 함.
  - radio, checkbox 같이 관련된 입력 필드들을 묶어줄 때 유용함.
  - 스크린 리더가 폼을 읽을 때 그룹을 인식할 수 있어 웹 접근성이 향상됨.

• <legend> :
  - <fieldset> 안에 제목(라벨) 역할을 함.
  - 그룹의 의미를 명확하게 설명하여 사용자가 쉽게 이해할 수 있도록 도와줌.
  - 스크린 리더가 가장 먼저 읽는 부분이라 중요한 역할을 함.

checkbox,radio

checkbox

• value : 클라이언트 측에서는 표시되지 않지만 서버에서 제출된 데이터에 제공

radio

• value :
  - 라디오 버튼의 값을 포함하는 문자열
  - 값은 사용자 에이전트 에 의해 사용자에게 표시 x
  - 그룹에서 선택된 라디오 버튼을 식별하는 데 사용

• checked :radio 버튼이 그룹에서 기본적으로 선택된 버튼임을 나타내는 속성

submit, reset

submit :<input> 또는 <button> 태그로 생성하며 click이벤트가 발생하면 서버에 양식을 제출
reset : <input> 또는 <button> 태그로 생성하여 click 이벤트가 발생하면 내용 초기화

input

• <input type="submit" value="제출">
  : input의 type을 submit으로 설정, input의 value를 value=""로 지정
• <input type="reset" value="reset">
  : input의 type을 reset으로 설정, form 안에 내용 제거

button

• <button type="submit">제출</button> : 기본 type이 submit이기 때문에 설정할 필요는 없지만 확실한 정보 제공을 위해 type="submit" 설정

• <button type="reset">reset</button> : button의 type을 reset으로 설정, form 안에 내용 제거

select

• 드롭다운(선택 목록)을 만들 때 사용하는 HTML 태그
• 사용자가 미리 정의된 여러 옵션 중에서 하나(또는 여러 개)를 선택할 수 있게 해줌.

• option 속성을 사용하여 선택목록을 생성 value 값이 서버로 제출

textarea

• <label for="message">내용<span aria-hidden="true">*</span>을 준 이유 : 필수 항목을 나타내기 위해 "내용"은 추가하되, *을 스크린 리더가 읽지않도록 추가

• placeholder="" : 사용하기 전 힌트를 주기 위해 사용, 내용 입력시 텍스트는 사라짐
  -cols: textarea의 가로 크기 설정
  -rows: textarea의 세로 크기 설정