form 태그란?
웹페이지에서의 입력 양식을 의미한다. 주로 로그인 창이나, 회원가입 폼 등 다양한 입력 양식을 만들 수 있다. 폼은 입력된 데이터를 한 번에 서버로 전송한다. 전송한 데이터는 웹서버가 처리하고, 결과에 따른 또 다른 웹페이지를 보여준다.
- 폼 태그 동작방법
1) 폼이 있는 웹 페이지를 방문합니다.
2) 폼 내용을 입력합니다.
3) 폼 안에 있는 모든 데이터를 웹 서버로 보냅니다.
4) 웹 서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램으로 넘깁니다.
5) 웹 프로그램은 폼 데이터를 처리합니다.
6) 처리결과에 따른 새로운 html 페이지를 웹 서버에 보냅니다.
7) 웹 서버는 받은 html 페이지를 브라우저에 보냅니다.
8) 브라우저는 받은 html 페이지를 보여줍니다.
form 태그 속성
action: 폼을 전송할 서버 쪽 스크립트 파일을 지정한다
name: 폼을 식별하기 위한 이름을 지정한다
accept-charset: 폼 전송에 사용할 문자 인코딩을 지정한다
target: action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다
method: 폼을 서버에 전송할 http 메소드를 정한다(get 또는 post)
get과 post의 차이
전송할 http 메소드 종류인 get과 post는 브라우저에서 폼 데이터를 가져와 서버로 보내는 기능을 수행하지만, get은 폼데이터를 URL 끝에 붙여서 눈에 보이게 보내기 때문에 보안에 취약하고, post 방식은 내부적으로 보이지 않게 보내기 때문에 get보다 보안에 강하다. 또한 get은 리소스에서 데이터를 요청하는 경우인 읽을 때 사용하는 메소드이고, post는 지정된 리소스에서 데이터를 처리할 때(수정, 삭제 등) 사용한다.
form을 구성하는 다양한 요소
(1) field, legend 태그
fieldset 태그는 폼 태그 안에 관련 있는 폼 요소들을 그룹화할 때 사용한다. 그리고 하위에 legend 태그를 사용하여 그룹화한 폼 엘리먼트들을 목적에 맞게 이름을 지정한다.
(2) input 태그
사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 준다. 가장 많이 사용하는 속성은
type: 태그 모양을 다양하게 변경가능하다. text, radio, checkbox, password, button,
hidden, fileupload, submit, reset등을 지정할 수 있다.
name: 태그 이름을 지정한다.
readonly: 태그를 읽기전용으로 한다.
maxlength: 해당 태그 최대 글자 수를 지정한다.
required: 해당 태그가 필수 태그로 지정된다. 필수 태그를 입력하지 않고, submit버튼을 누르면 에러메시지가 웹브라우저에 출력된다.
autofocus: 웹페이지가 로딩되자마자 이 속성을 지정한 태그로 포커스가 이동된다.
placeholder: 태그에 입력할 값에 대한 힌트를 준다.
pattern: 정규 표현식을 사용하여 특정범위 내에 유효한 값을 입력받을 때 사용한다.
