폼 태그

form

• 정보 제출에 사용되는 문서 구획
• 내부 입력 양식들의 부모, 컨테이너 역할
• 입력된 정보들을 어떻게 서버에 전달할지 설정
• 내부에 폼 관련 태그가 아닌 요소도 포함 가능
  
  

폼 요소

<label>

각 입력 양식의 레이블을 표시

속성	역할	값
for	어떤 입력 양식의 레이블인지 지정	해당 입력 양식 요소의 id값

<input>

공통 속성	역할	값	비고
id	고유값, label과 연결	텍스트
autocomplete	자동완성	boolean
autofocus	페이지로 들어올 때 커서가 위치	boolean	페이지에서 하나만 사용되어야 함
disabled	수정 불가, 값이 전송되지 않음	boolean
name	서버로 전송될 항목명	텍스트
readonly	수정 불가, 입력된 값은 전송됨	boolean

<input type="text"> : 일반 텍스트 입력
<input type="password"> : 패스워드 입력 (••• 등으로 표시)
<input type="tel"> : 전화번호 입력 (모바일 등에서 전화번호 키패드 띄워줌)

속성	역할	값
placeholder	입력값이 공백일 시 보여질 텍스트	텍스트
maxlength	최대 글자 수	숫자

<input type="number"> : 숫자값 입력

속성	역할	값
max	최대 입력값	숫자
min	최소 입력값	숫자
step	입력 가능한 값의 간격 (2: 0, 2, 4, 8)	숫자

<input type="checkbox"> : 체크박스

속성	역할	값
checked	체크로 초기화 여부	boolean

<input type="radio"> : 라디오(택일)

속성	역할	값
checked	체크로 초기화 여부	boolean
name	속한 선택지의 구분자	텍스트

<input type="file"> : 파일 첨부

속성	역할	값
multiple	여러 파일 가능 여부	boolean

<select>와 <option>

select 안에 option이 중첩되어 사용된다.

<select> : 선택지

속성	역할	값
id	고유값, label과 연결	텍스트
name	서버로 전송될 항목명	텍스트

<option> : 선택 항목

속성	역할	값	비고
value	서버로 전송될 값	텍스트
selected	선택 여부	boolean	<select>당 하나의 <option>에만 가능

<textarea>

여러 줄의 텍스트를 입력할 수 있는 태그

속성	역할	값
placeholder	입력값이 공백일 시 보여질 텍스트	텍스트
maxlength	최대 글자 수	숫자
rows	보이는 줄의 수	숫자

<button>

속성	역할	값
type	버튼의 역할	submit, reset, button
disabled	비활성화	boolean

⚡ 주의❗ 제출용 버튼이 아닐 시 type을 'button'으로 지정할 것