7. 폼(Form)
전통적으로 '폼'이라는 용어는 정보를 기입하는 부분이 있는 인쇄된 문서를 의미한다.
폼 컨트롤이란?
사이트 방문자로부터 정보를 수집하는데 사용되는 다양한 입력 유형.
예)
텍스트 입력: 텍스트 입력(한 줄), 패스워드 입력, 텍스트 영역(여러 줄)
선택: 라이도 버튼, 체크박스, 드롭다운 박스
폼 전송: 전송 버튼, 이미지 버튼
파일 올리기: 파일 업로드
폼의 동작 방식
1. 사용자가 폼을 입력한 후에 버튼을 누르면 정보가 서버에 전송된다.
2. 각 폼 컨트롤의 이름은 사용자가 입력하거나 선택한 값과 함께 서버에 전송된다.
3. 서버는 PHP, C#, 자바 같은 프로그래밍 언어를 이용하여 정보를 처리한다. 대부분 정보는 DB에 저장된다.
4. 서버는 수신한 정보를 토대로 브라우저로 보낼 새로운 페이지를 만든다.
입력된 데이터들을 분류하기 위해 이름/값 쌍을 이용해 브라우저에서 서버로 전송된다.
폼 구조
<Form>에는 항상 action속성이 있으며, 대체로 method, id속성도 함께 지정한다.
action
전송 시 폼에 있는 정보를 수신할 서버페이지의 URL.
method
get/post 둘 중 하나이며, 폼을 전달하는 방식.
get방식을 사용하면 폼에 있는 값은 action 속성에 지정한 URL 끝에 추가된다.
get은 다음과 같은 경우 사용한다.
- 간단한 폼(예, 검색 박스)
- 단순히 웹 서버로부터 데이터를 조회하는 경우(DB에 추가 혹은 삭제할 필요가 없는 경우)
post방식을 사용하면 전송 값은 HTTP 헤더에 추가된다.
post는 일반적으로 다음과 같은 경우 사용한다.
- 파일을 올리는 경우
- 전송 데이터가 매우 긴 경우
- 민감한 데이터가 포함된 경우(예, pw)
- DB에 정보를 추가 혹은 삭제할 경우
method를 지정하지 않으면 자동으로 get방식을 이용한다.
id
폼을 식별하는데 사용.
<input> 폼 컨트롤
텍스트 입력 / 패스워드 입력
size:새로운 폼에서 size는 사용하지 않는다. 요즘은 폼 요소의 너비를 css를 통해 제어한다.
maxlength: 문자의 수를 제한. 연도(2022)의 경우 속성 값을 4로 지정.
보안: 완전한 보안을 위해 SSL을 사용하여 사용자의 브라우저와 통신해야 한다.
전송버튼
value: submit의 value값은 자동으로 '전송'이지만 브라우저마다 표현방식이 다르다. 그러므로 가급적 value 값을 꼭 지정해주여야 한다.
레이블 붙이기
label: <label> 요소는 두 가지 방식으로 사용 가능하다.
1. 텍스트 설명과 폼 입력을 모두 포함하는 방식
예) <label><input /></label>
2. 폼 컨트롤에서 분리한 다음 for 속성을 사용하여 레이블을 붙일 폼 컨트롤을 지정하는 방식
예> <input id="abc"/ ><label for="abc">~ </label>
'IT서적 > HTML&CSS 웹사이트 개발과 디자인 기초' 카테고리의 다른 글
| HTML&CSS 웹사이트 개발과 디자인 기초 (2) | 2022.04.04 |
|---|