[HTML] <form> 태그, <input> 태그

---

<form> 폼 태그

 

속성명	속성값	설명
name	-	폼을 구별할 때 사용되는 이름
method	get 방식 (default) post 방식 (추천)	폼안에 있는 데이터를 서버에 어떤 유형으로 전달할지 지정
action	-	폼안에 있는 데이터를 받는 서버 페이지

 

● get, post 방식의 차이

	get	post
데이터 위치	헤더(request header) - 길이의 제한이 있음 - 쿼리스트링을 통해 전송 ex) http://localhost:9797/test/guestbook/register.jsp ?id=user&pw=1111 1) ? 뒤에 키=값 형태 2) '&' 로 여러개 전송가능	바디(request body) - 길이의 제한이 없음 - form-data를 통해 숨겨서 전송 ex) http://localhost:9797/test/guestbook/register.jsp
주소 노출	O  - 보안에 취약	X - 주소에 노출이 안되는것 뿐, 암호화 하진 않음 - 중요정보는 암호화 해야함
캐싱 여부	O	X

 

---

폼 관련 태그 → <input> 태그

 

● 체크박스나 라디오버튼 선택하기 쉽게하는 <label> 태그

<!-- 텍스트 클릭해도 체크안됨, 체크박스를 직접 클릭해야함 -->
<ul>
	<li><input type="checkbox" value="grm">문법</li>
	<li><input type="checkbox" value="wr">작문</li>
	<li><input type="checkbox" value="rd">독해</li>
</ul>

<!-- 텍스트를 클릭해도 체크박스 체크됨 -->   
<ul>
	<li>
		<label><input type="checkbox" value="grm">문법</label>
	</li>
	<li>
		<label><input type="checkbox" value="wr">작문</label>
	</li>
	<li>
		<label><input type="checkbox" value="rd">독해</label>
	</li>
</ul>

 

● 사용자 입력을 위한 <input> 태그의 type 속성

text	한 줄 짜리 텍스트 입력 상자
checkbox	여러 항목에서 2개이상 선택 가능한 체크박스 (name 속성 값은 같아야 함)
radio	여러 항목에서 1개만 선택 가능한 라디오버튼 (name 속성 값은 같아야 함)
password	비밀번호 입력 필드 (masking 처리)
email	메일 주소 입력 필드
tel	전화번호 입력 필드
file	파일첨부 버튼 (multiple="multiple" → 다중 파일첨부 가능)
hidden	사용자에게 보이진 않지만 서버로 넘겨지는 값 (그래도 개인정보나 중요정보는 암호화 해야함)
submit	서버에 전송 버튼
button	버튼
image	submit 버튼 대신 사용할 이미지를 넣음
reset	리셋 버튼
url	url 주소입력 필드
datetime datetime-local date month week time	국제표준시간 (연월일시분초) 사용자가 있는 지역기준 시간 (연월일시분초) 사용자가 있는 지역기준 날짜 (연월일) 사용자가 있는 지역기준 날짜 (연월) 사용자가 있는 지역기준 날짜 (연주) 사용자가 있는 지역기준 시간 (시분초)
number range	숫자를 조절할 수 있는 스핀박스(화살표)를 넣음 숫자를 조절할 수 있는 슬라이드바를 넣음
search	검색상자
color	색상 표

 

● 사용자 입력을 위한 <input> 태그 속성

autofocus	페이지 로딩 후 원하는 요소에 커서 표시
placeholder	입력란에 안내 내용을 표시함, 값을 입력하면 내용이 사라짐
readonly	입력은 못하고 읽기만 가능
required	필수 필드 지정 (스크립트에서 직접 값 확인 할 필요가 없어짐)