Form(1)

목차

폼 만들기

1) 폼이란?

① 회원가입, 로그인, 쇼핑몰의 주문화면 등 웹 사이트로 정보를 보낼 수 있는 요소들을 폼(form)이라고 함

2) 폼의 동작 방식

① 사용자가 아이디와 비밀번호 입력 후 로그인 버튼 클릭
② 사용자가 입력한 아이디와 비밀번호가 웹 서버로 전송
③ 서버에서 사용자 데이터베이스를 검색해서 사용자가 전송한 아이디와 비밀번호가 서로 일치하는 정보
인지 확인 후 결과를 브라우저로 리턴
④ 일치하는 정보가 사용자 데이터베이스에 있을 경우 로그인 성공, 아니면 로그인 실패 화면으로 이동

3) 폼 만들기

① <form>은 폼을 만드는 가장 기본적인 태그
② <form>~</form> 사이에 여러 폼 요소 관련 태그 주입
③ 기본형
<form [속성 = "속성값"] > 여러 폼 요소 </form>

4) 사용 속성

속성	설명
method	사용자가 입력한 정보를 서버로 전송할 때 전송 방식 지정
	속성값	get  주소 표시줄에 사용자가 입력한 정보가 표시됨. 256byte~4,096byte까지의 데이터만 서버로 넘길 수 있습니다
		post  대부분 post방식 사용. 주소 표시줄에 사용자가 입력한 정보가 노출되지 않기 때문에 보안에 용이
name	폼의 이름을 지정. 한 문서 안에 여러 개의 태그가 존재할 때 폼들을 구분하기 위해 사용.
action	태그 안의 정보들을 처리해 줄 서버의 프로그램 지정
target	태그 안의 내용들을 처리해 줄 서버 상의 프로그램 지정

5) 폼 요소에 레이블 붙이기

<label> 태그
① 레이블(label)이란 입력 창 옆에 ‘아이디’나 ‘비밀번호‘처럼 붙여놓은 텍스트를 의미
② <label>아이디(6자 이상) <input type=”text” ……></label>
③

<label for=”user-id”>아이디(6자 이상)</label>
<input type=”text” id=”user-id”>

④ 위 기본형과 같이 <label> 태그는 두 가지 방식으로 사용 가능
첫 번째 방식은 <label>~</label> 태그안에 폼 요소를 넣는 방식
두 번째 방식은 <label> 태그와 폼 요소를 따로 사용하고 <label> 태그에 for 속성을 이용하는 방식

6) 라디오 버튼과 체크박스에서 <label> 태그

① 스마트 폰과 같이 작은 화면에서 라디오버튼이나 체크박스를 정확히 선택하기 힘든 데
<label> 태그와 연결하여 사용하면 <label> 태그안에 텍스트만 클릭 또는 터치해도
라디오버튼과 체크박스 선택 가능

7) 폼 요소 그룹으로 묶기

<fieldset>, <legend>태그
① 쇼핑몰 사이트에서 주문서 폼에서 사용자 정보와 배송 정보를 분리하여 표시하는 것을 흔히 발견할 수
있는데 이렇게 하나의 폼 안에 여러 구역을 나누어 표시 할 때 <fieldset>, <legend> 태그 사용
② 기본형 <fieldset [속성 = "속성 값"]> ...</fieldset>
③ <fieldset>~</fieldset> 안의 폼 요소들을 하나의 영역으로 묶고 외곽선 그려줌
④ <legend> 태그는 <fieldset>으로 묶은 그룹에 제목을 붙여줌

 

사용자 입력을 위한 폼

1) <input>태그

① 폼태그 요소 중 사용자 입력 부분은 주로 태그 사용

② 태그로 입력할 수 있는 항목은 아이디나 비밀번호, 이메일 주소, 전화번호, 날짜, 시간, 이미지, 버튼 등 다양하고 태그의 type 속성을 이용해 지정

 

2) 입력 항목 만들기

① 웹에서 폼은 사용자가 입력하는 부분과 입력한 내용을 서버로 보내는 버튼 부분으로 나눔
② <input> 태그로 입력할 수 있는 항목은 아이디나 비밀번호, 이메일 주소, 전화번호, 날짜, 시간, 이미지, 
버튼 등 다양하고 <input> 태그의 type 속성을 이용해 지정
③ <input type="유형" [속성 = "속성값"]>

 

3) id 속성 

① 웹에서 폼은 사용자가 입력하는 부분과 입력한 내용을 서버로 보내는 버튼 부분으로 나눔
② type이 동일한 폼 요소가 여러 번 사용될 때 폼 요소를 구분하기 위해 사용 

<form>
	<input type = "text" id = "user-name" size="10">
	<input type = "text" id = "addr" size = "60">
</form>

4) name 속성

① id 속성과 동일하게 사용됨
② type이 동일한 폼 요소가 여러 번 사용될 때 폼 요소를 구분하기 위해 사용

<form>
	<input type ="text" name = "user-name" size = "10">
	<input type ="text" name = "addr" size = "60">
</form>

5) id속성과 name속성의 차이점

① id와 name 모두 페이지 내에서 element를 식별하기 위해 사용
② id는 한 웹 문서에서 중복 값이 존재할 수 없다.
③ name은 한 웹 문서에서 중복 값을 가질 수 있다.
④ id는 javascript에서 사용(웹 페이지 내에서만 사용)
⑤ name은 Action에서 서버로 전송 할 파라미터로 사용됨

 

6) type 속성에 사용 가능한 유형

유형	설명
hidden	사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가짐
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 삽입
search	검색 상자 삽입
tel	전화번호 입력 필드 삽입
url	URL 주소 입력 가능한 필드 삽입
email	메일 주소 입력 가능한 필드 삽입
password	비밀번호 입력 가능한 필드 삽입
datetime	국제 표준시(UTC)로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초 분할 초) 삽입
datetime-local	사용자가 있는 지역을 기준으로 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초) 삽입
date	사용자 지역을 기준으로 날짜(연, 월, 일) 삽입
month	사용자 지역을 기준으로 날짜(연, 월) 삽입
week	사용자 지역을 기준으로 날짜(연, 주) 삽입
time	사용자 지역을 기준으로 시간(시, 분, 초, 분할 초) 삽입
number	숫자를 조절할 수 있는 화살표 삽입
range	숫자를 조절할 수 있는 슬라이드 막대 삽입
color	색상 표 삽입
checkbox	주어진 항목에서 2개 이상 선택 가능한 체크박스 삽입
radio	주어진 항목에서 1개만 선택할 수 있는 라디오 버튼 삽입
file	파일을 첨부할 수 있는 버튼 삽입
submit	서버 전송 버튼 삽입
image	submit 버튼 대신 사용할 이미지 삽입
reset	리셋 버튼 삽입
button	버튼 삽입

7) number, range에서 사용 속성

속성	설명
min	필드에 입력 가능한 최소 값 지정
max	필드에 입력 가능한 최대 값 지정
step	숫자 간격 지정. 기본 값 1. 생략 가능
value	필드에 표시할 초기 값 지정

8) radio, checkbox에서 사용 속성

속성	설명
name	라디오 버튼이나 체크박스가 여러 개 있을 때 서버의 폼 프로그램에서 라디오 버튼 이나 체크박스를 구분하기 위해 이름을 지정. 라디오 버튼은 하나만 선택되기 때문에 관련 있는 그룹은 동일한 name 속성을 갖음
value	선택한 라디오 버튼이나 체크박스를 서버로 알려 줄 때 넘길 값을 지정. 영문이나 숫자만 입력 가능. 필수 속성.
checked	라디오 버튼이나 체크박스의 항목들은 처음에 아무 것도 선택되지 않은 상태로 화 면에 표시되는데 기본으로 선택해 놓을 항목이 있다면 checked 속성을 사용.

9) time, datetime, datetime-local에서 사용 속성

속성	설명
min	날짜나 시간의 최소 값 지정
max	날짜나 시간의 최대 값 지정
step	스핀박스의 화살표를 누를 때마다 날짜나 시간을 얼마나 조절할지 지정
value	화면에 표기할 초기값 지정. type이 time일 경우 00:00 ~ 23:59까지 입력. type이 datetime, datetime-local일 경우 날짜 다음에 T를 입력하고 시간지정.