[HTML 기본 개념] HTML 문법-폼(form)이란/GET/POST/form 문법/사용방법

1.1  폼

-사용자의 데이터를 서버에 전송하는 방법이다

-Login을 위해서 아이디/비밀번호를 입력할 때, 회원가입을 하기 위해서 개인정보를 입력할 때, 블로그 및 게시판에 글을 작성하거나, 파일을 전송할 때 à 등을 위해 폼을 사용

-폼 동작방법

1)<form> 태그 안쪽에 텍스트 필드나, 라디오 버튼 등이 위치 à 이러한 요소들을 컨트롤 (control)이라고 부름

2)사용자가 컨트롤을 조작한 후에 전송 버튼을 누르면 <form> 태그의 속성인 action에 기술된 URL로 사용자가 입력한 정보를 전송함.

3) 서버는 이 정보를 받아서 저장하거나, 계산된 결과를 보여주는 등의 작업을 수행하게 된다.

<form action="서버로 전송한 데이터를 수신할 URL" method="데이터를 전송하는 방법">     여러 컨트롤 요소들 입력       </form> u  action : 사용자가 입력한 데이터를 전송할 서버의 URL u  method : 사용자가 입력한 데이터를 전송하는 방법으로 아래와 같은 방식이 있다

2.8.1 GET과 POST

GET	POST
u  URL에 정보가 담겨서 전송된다. u  전송할 수 있는 정보의 길이가 제한되어 있다. u  퍼머링크로 사용될 수 있다.	u  header의 body에 담겨서 전송된다. u  URL 상에 전달한 정보가 표시되지 않는다. u  GET에 비해서 보안상 약간의 우위에 있다. (사실상 동일하다) u  전송할 수 있는 데이터의 길이 제한이 없다. u  퍼머링크로 사용할 수 없다. u  서버 쪽에 어떤 작업을 명령할 때 사용한다. (데이터의 기록, 삭제, 수정 등)

2.8.2 폼 문법

1. 텍스트 필드

-텍스트 필드(Text Fields)는 이름이나 주소와 같이 텍스트를 입력 받을 때 사용.

<input type="text" name="값의 이름" value="값" disabled="disabled" readonly="readonly" />

u  type: text를 사용해야 텍스트 필드가 된다. 

u  name: 입력한 데이터의 이름. 하나의 폼 안에서 이 name 속성의 값은 고유한 값이어야 합니다. 폼이 전송되고 나서 폼을 처리하는 파일에서 각 폼 필드를 구분하기 위함

u  value: 데이터의 값. 입력한 데이터의 기본 값. 이 값이 기본적으로 텍스트 필드에 표시됨

u  disabled: 텍스트 필드를 불능 상태로 만듬. 서버로 전송해도 이 속성이 설정된 컨트롤의 데이터는 서버로 전송되지 않는다. 

u  readonly: 텍스트 필드에 값이 입력되지 않고 서버로는 데이터가 전송된다. 

u  size: 텍스트 필드의 크기를 지정할 수 있습니다. size 속성을 지정하지 않으면 기본값은 20

u  maxlength: 텍스트 필드에 입력할 수 있는 글자수의 최대값을 지정. 입력할 수 있는 글자값을 제한할려면 maxlength 속성을 사용

 

2. 패스워드

<input type="password" name="pass">

텍스트 필드와 모양은 동일하지만 입력한 값이 ***로 표시된다는 차이가 있다.

비밀번호가 입력한대로 노출된다면 보안상의 문제가 있기 때문이다.

 

3. 히든 필드

<input type="hidden" name="UserIP" value="User의IP값">

 

사용자가 입력하거나 선택하는 정보는 아니지만 폼 전송이 같이 전송해줘야 하는 정보를 담기 위해서 히든 필드(Hidden Field)를 사용

 

4. 셀렉트 박스

<select name="job">     <option value="">직업선택</option>     <option value="학생">학생</option>     <option value="회사원">회사원</option>     <option value="기타">기타</option> </select>

-<select>의 <option> 태그의 경우는 이 <option>이 선택된 경우 전송되는 값을 지정하는 것이다.

-즉, 학생을 선택한 채로 폼을 전송했다면 job 필드의 value값은 <option value="학생">의 value값인 "학생"으로 지정되는 것이다.

-기본값으로 선택하게 하려면 selected=”selected” 속성값을 추가한다.

5. 파일전송

-업로드 할 파일을 선택할 수 있는 컨트롤을 생성