form

forn은 알게 모르게 웹에서 사용이 많이 된다.

사용자의 의견이나 정보를 알기 위해 입력할 큰 틀을 만드는 데 사용되기 때문이다.

form은 입력된 데이터를 한 번에 서버로 전송한다. 전송한 데이터는 웹 서버가 처리하고, 결과에 따른 또 다른 웹 페이지를 보여준다.

 

1. from 태그 동작방법

1. 폼이 있는 웹 페이지 방분

2. 폼 내용을 입력

3. 폼 안에 있는 모든 데이터를 웹 서버로 보냄.

4. 웹 서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램으로 넘긴다.

5. 웹 프로그램은 폼 데이터를 처리한다.

6. 처리결과에 따른 새로운 html 페이지를 웹 서버에 보낸다.

7. 웹 서버는 받은 html 페이지를 브라우저에 보낸다.

8. 브라우저는 받은 html 페이지를 보여준다.

 

출처 : https://www.nextree.co.kr/p8428/

2. 폼 태그 속성

​

폼 태그 속성에는 name, action, method, target 등이 있다. 폼 속성을 이용하여 전송할 때 어디로 보내야 하는지 그리고 어떤 방법으로 보낼지 정한다.

• action : 폼을 전송할 서버 쪽 스크립트 파일을 지정한다.
• name : 폼을 식벽하기 위한 이름을 지정한다.
• target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다.
• mathod : 폼을 서버에 전송할 http 메소드를 정한다. (GET or POST)

​

전송할 http 메소드 종류인 GET 과 POST는 브라우저에서 폼 데이터를 가져와 서버로 보내는 똑같은 기능을 수행하지만, 방식이 다르다.

GET은 폼 데이터를 url 끝에 붙여서 눈에 보이게 보내지만 POST 방식은 내부적으로 보이지 않게 보낸다.

 

그러므로 GET 방식은 데이터가 외부에 노출되어 보안에 취약하여 보내려는 데이터가 개인정보나 보안을 해야하는 경우에는 POST 방식을 사용해야 한다.

또한, HTTP 메소드 정의에서 GET방식은 지정된 리소스에서 데이터를 요청하는 경우일때 사용하는 메소드이다. 반면 POST 방식은 지정된 리소스에서 데이터를 처리할 경우일때 쓰고 수정, 삭제할 때 사용된다.

​

3. 폼을 구성하는 다양한 엘리먼트

​

(1) 폼 엘리먼트 그룹 <field>, <legend>

<fieldest> : 폼 태그 안에 관련 있는 폼 엘리먼트들을 그룹화할 때 사용한다. 이 태그 하위에 <legend>태그를 사용하여 그룹화한 폼 엘리먼트들을 목적에 맞게 이름을 지정한다.

(2) 다양한 모양을 가진 <input>

사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 준다.

속성

• type : 태그 모양을 다양하게 변경할 수 있다. type에는 text, radio, checkbox, password, button, hidden, fileupload, submit, reset 등을 지정할 수 있다.
• name : 태그 이름을 지정한다.
• readonly: 태그를 읽기 전용으로 함.
• maxlength : 해당 태그 최대 글자 수 지정함.
• required : 해당 태그가 필수태그로 지정된다.
• autofocus : 웹 페이지가 로딩되자마자 이 속성을 지정한 태그로 포커스가 이동된다.
• placeholder : 태그에 입력할 값에 대한 힌트를 준다.
• pattern : 정규표현식을 사용하여 특정범위 내의 유효한 값을 입력받을 때 사용한다.

(3) 목록태그 <select> <optgroup> <option>

<select> 항목을 선택할 수 있는 태그. 속성 중에 size와 multiple 속성이 있다.

<select>태그 하위에 <optgroup>, <option> 태그가 있다.

<optgroup>태그는 <select>태그 안에서 목록들을 그룹화할 경우에 사용된다. label속성을 사용하여 그룹 이름을 지정한다. <optgroup> 하위에 <option>태그를 포함한다. 이것은 목록을 나타낸다.

(4) 여러 줄 글상자 <textarea>

속성중에 row와 cols가 있다.

​

4. HTML5에서 추가된 엘리먼트

몇가지 유용한 엘리먼트를 적어보자면

​

(1) 입력 값 후보 <datalist>

텍스트 상자에 입력 값 후보 목록을 지정할 경우 사용.

(2) <input> 태그의 date

날짜를 입력받기 위한 속성 값. 날짜 선택을 위한 달력도 함께 표시됨.

(3) <input> 태그의 number와 range

number와 range는 둘 다 숫자를 입력할 때 사용. 차이점으로 range태그는 슬라이더 형태로 ui로 렌더링 됨.