[HTML] form 사용하기

💡 정보를 입력받기 위해 사용되는 요소들을 알아보자

<form>

앞으로 만들 페이지에서는 <form> 태그를 사용하지는 않을거지만, 앞으로 사용할 태그들의 부모 요소로 알아두어야 한다.

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

속성	역할	값
id	고유값 (이전의 name을 대체)
method	입력된 정보들의 전달 방식	get, post
action	정보들을 처리할 서버 상의 프로그램 지정	텍스트
autocomplete	이전 입력 내역 있을 시 자동완성	on, off

○ 폼 요소

<label>

각 입력 양식의 이름(레이블)을 표시한다

입력 양식의 클릭 영역을 확장해 준다 : 레이블을 클릭하여도 클릭을 인식할 수 있게 되어있다.

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

<input>

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

• <input type="text"> : 일반 텍스트 입력

• <input type="password"> : 패스워드 입력 (••• 등으로 표시)

• <input type="tel"> : 전화번호 입력 (모바일 등에서 전화번포 키패드 표시)

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

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

속성	역할	값
max/min	최대/최소 입력값	number
step	입력 가능한 값의 간격 (1: 0, 1, 2..)	number

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

속성	역할	값
checked	미리 체크해놓음	boolean

• <input type=”radio”> : 하나만 선택

속성	역할	값
checked	미리 체크해놓음	boolean
name	같은 name에 속해 있는 것들 중 하나만 선택 가능	text

• <input type=”file”> : 파일 첨부

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

<select>와 <option>

• <select> : 선택지, <option>을 묶어놓는 역할

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

• <option> : 선택 항목, <select> 자식태그로 들어감

속성	역할	값	비고
value	서버로 전송될 값	text
selected	미리 선택해놓음	boolean	select당 하나의 option에만 가능

<textarea>

여러 줄의 텍스트를 입력할 수 있는 영역

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

<button>

속성	역할	값	비고
type	버튼의 역할	submit, button..	form 태그를 사용하지 않으면 button으로 설정하면 된다.
disabled	비활성화	boolean