HTML 탐구생활 : form 태그와 관련 속성들

 

1. form태그란?

form태그란 사용자부터 입력을 받는 태그들을 감싸는 양식 태그이다.

form태그 내부에 있는 input태그에 글자나 숫자를 입력하거나 체크박스, 라디오에 버튼을 클릭하고 제출 버튼을 누르면 

받은 입력값들을 서버로 전달해 정보를 처리한다.

 

 

2. form태그의 action속성과 method속성

(1) 기본적인 form태그의 동작원리

  1.사용자로부터 입력값을 받고 form안에 있는 데이터들을 웹 서버로 보낸다.

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

  3. 웹 프로그램이 데이터를 처리하고 처리 결과에 따른 새로운 html파일을 웹 서버로 보낸다.

  4. 웹 서버는 새로운 html파일을 브라우저에 보낸다.

  5. 브라우저는 새로운 html파일을 사용자에게 보여준다.

 

(2) form태그의 action속성

form태그의 action속성은 데이터들을 처리할 목적지 url을 지정해주는 속성이다.

속성값으로 form 내부의 데이터들을 처리할 프로그램의 url을 적어준다.

 

(3) form태그의 method속성

method속성은 데이터들을 보내는 방식을 지정한다. 속성값으로는 get과 post가 있다.

 

get은 요청한 url(action의 속성값)뒤에 받은 입력값들을 key = value방식으로 붙여서 서버에 전송한다.

ex) 요청한 url/?id=abc&pwd=def 

 

post는 get방식과는 다르게 url뒤에 입력값들을 붙이지 않고 데이터들을 별도로 첨부하여 웹 서버로 전달한다.

입력값들이 직접적으로 드러나지 않기 때문에 get방식보다 보안상 조금 더 좋다.

 

 

3. form태그의 autocomplete속성

form태그의 autocomplete속성은 form에서 자동완성 기능을 사용할지에 대한 여부를 지정하는 속성이다.

autocomplete의 기본 속성값은 "on"으로 사용자가 이전에 입력했던 값들을 드롭다운 형식으로 보여준다.

이전에 입력한 값들을 보여주고 싶지 않으면 속성값을 "off"로 지정해주면 된다.

 

 

4. form 태그 내부의 요소들 그룹으로 묶기

form내부의 요소들을 묶으려면 fieldset태그를 사용하면 된다. fieldset태그 안에 form내부의 요소들을 넣어주고 만약  fieldset 태그의 제목을 달아주고 싶으면 legend 태그를 사용해 달아줄 수 있다. 특정한 fieldset 내부의 요소들을 비활성화시키고 싶다면 fieldset의 속성 중 disabled를 사용하면 된다.