HTML(5) form

form

사용자에게 입력받은 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획.

 

꼭 form 태그로 묶어 줘야되나?

별도로 제출할 필요가 없다면 사용하지 않아도 됨.

 

 

method

양식을 제출할 때 사용할 HTTP 메소드

 

Post : 양식 데이터를 요청 본문으로 전송. 브라우저에 캐시되지않고 히스토리에도 남지 않음.

Post 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송.

데이터의 길이제한이 없고, GET 방식보다 보안성이 높음.

enctype 속성. method의 속성이 post인 경우, enctype은 양식 제출시 데이터의 MIME유형을 나타낸다.

 

Get : 양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송.

Get 방식의 HTTP 요청은 브라우저에 의해 캐시되어 저장. 쿼리 문자열에 포함되어 전송.

길이의 제한이 있음. (URL 길이제한은 브라우저마다 다름)

보안성 취약점이 존재하므로, 중요한 데이터는 Post 방식을 사용하여 요청

 

 

action

양식 데이터를 처리할 프로그램의 URI를 적음.

데이터를 어디로 보낼것인지 지정. 반드시 유효한 URL.

지정하지 않으면 데이터를 form이 있는 페이지의 URL로 보냄.

 

 

autocomplete

입력요소가 자동완성된 값을 기본값으로 가질 수 있는지 나타냄.

이전에 해당 양식의 입력된 값이 있을 경우 (브라우저에 기록이 남아있을 경우 나타남)

---

label

사용자 인터페이스의 항목을 나타냄.

input과 함께 사용. label을 클릭해서 input에 포커스를 이동시키거나 활성화 시킬 수 있음.

 

for-id 를 이용해 연결

<label for="user-id">아이디</label>
<input id="user-id" type="text">

 

label 안에 input 중첩하여 연결

<label>
	아이디
	<input type="text">
</label>

label 안에 a 또는 button과 같은 인터랙티브 요소 배치 X

label 안에 제목 요소 배치 X

form에 제목이 필요할 경우 fieldset과 legend 사용하기.

---

button

사용자가 클릭할수 있는 요소.

form 내부뿐만 아니라 버튼이 필요한 곳이라면 어디든 배치.

 

 

button의 type

button : 기본 행동이 없음. JavaScript와 연결해서 사용

submit : 서버로 양식 데이터를 제출.

reset : 초기값으로 되돌림.

---

input

 

공통속성

type : input 양식 컨트롤의 유형 (button, text, email, file...)

name : input 양식 컨트롤의 이름

value : input 양식 컨트롤의 값

autocomplete : on/off 양식 자동완성 기능에 대한 힌트 (check, radio 제외)

placeholder : 양식 컨트롤이 비어있을 때 나타나는 내용 (입력에 대한 힌트 제공)

required : 양식 전송을 위해 필수로 입력해야하는 값.

disabled : 비활성화

readonly : 수정불가(읽기전용)

 

input 유형 <input type="___">

button : 버튼. 기본행동 없음. value로 버튼 텍스트 표시

submit : 양식 전송

reset : form 내용을 기본값으로 초기화

text : 텍스트 입력

password : 비밀번호 입력 (값이 가려짐)

email : 이메일 입력

search : 검색 문자열 입력 (삭제 아이콘 포함)

tel : 전화번호 입력

url : 웹페이지 주소 입력

number : 숫자 입력

checkbox : 단일 값을 선택하거나 선택 해제

radio : 선택 항목중 하나만 선택

file : 파일 업로드

date : 날짜 입력 (년, 월, 일) - 시간 없음

datetime-local : 날짜와 시간을 지정

month : 연과 월 입력

time : 시간 입력

color : 색 선택

range : 슬라이드 바 형태

hidden : 보이지 않지만 값은 서버로 전송하는 컨트롤

 

button / submit / reset

<button type="___"> 태그와 동일한 기능 수행.

input 태그의 경우 빈태그 요소이므로 value 특성에 텍스트 값을 지정하지만, button 태그의 경우 여는 태그와 닫는 태그 사이에 여러 컨텐츠 삽입 가능.

<input type=”button” value=”버튼”>
<button type=”button">버튼</button>

 

text / password / url / search / tel

maxlength : 문자수 최대 길이

minlength : 문자수 최소 길이

 

checkbox / radio

checkbox는 단일 값을 선택하거나 선택 해제.

radio는 같은 name 값을 가진 여러개 중 하나의 값을 선택.

checked : 체크 여부

 

checkbox

HTML CSS JavaScript Python Django

radio

남성 여성 선택 안함

 

file

파일을 지정.

accept : 허용하는 파일 유형을 지정

multiple : 지정할 경우 사용자가 여러개의 파일을 선택 가능

<label for="profile">프로필 이미지</label>
<input 
	type="file"
	id="profile"
	name="profile"
 	accept="image/png, image/jpeg"
>

 

number

숫자 입력, 화살표 컨트롤 제공

max : 최대값

min : 최소값

step : 증가값

 

select

옵션 메뉴를 제공

multiple : 여러개의 항목을 동시에 선택 가능

size : 한번에 노출되는 항목의 수 조절

required : 선택 필수

disabled : 선택 불가

 

option

메뉴의 각 옵션을 정의

모든 option은 자신이 선택됐을 때 값으로 사용할 value 속성 필요. (지정하지않으면 option내 텍스트 값으로 사용.)

selected 특성을 지정하면 해당 옵션을 선택한 상태로 페이지를 불러옴.

 

optgroup

option 요소를 optgroup 요소 안에 배치하면 드롭다운 내에서 옵션그룹을 나눌 수 있음.

 

<label for="today-menu">오늘의 메뉴</label><br>
<select id="today-menu" multiple size="3">
	<optgroup label="점심">
		<option>피자</option>
		<option>치킨</option>
		<option>짜장면</option>
		<option>떡볶이</option>
		<option>햄버거</option>
	</optgroup>
	<optgroup label="저녁">
		<option>소고기</option>
		<option>돼지고기</option>
		<option>닭고기</option>
		<option>양고기</option>
		<option>오리고기</option>
	</optgroup>
</select>

오늘의 메뉴
피자 치킨 짜장면 떡볶이 햄버거 소고기 돼지고기 닭고기 양고기 오리고기

 

fieldset

form 관련 요소들을 묶을 때 사용

diabled 를 사용할 경우 모든 자손 컨트롤을 비활성화

 

legend

그룹의 제목을 제공

 

textarea

여러줄의 text를 입력받음

cols : 입력창의 너비 (기본값 20)

rows : 기본적으로 보여줄 입력 줄 수

maxlength : 입력 문자 최대 길이

minlength : 입력 문자 최소 길이

placeholder : 컨트롤에 무엇을 입력해야하는지 알려주는 힌트