HTML / <form> 태그의 속성들과 사용 방법 / get과 post이해하기

form 태그란?

로그인을 하거나 회원가입, 주문정보를 입력하거나 글을 입력할 때입력한 정보를 서버로 전송할 때 사용된다.
즉 사용자가 브라우저에 입력한 데이터를 특정한 서버로 전송 것이 form 태그의 기능이다.

---

form 태그의 속성

폼 태그의 속성은 name, action, method, target, autocomplete이 있다.

<form name="frm" action="/test/formtest.jsp" method="get" target="_blank" autocomplete="on">
    <p>아이디 : <input type="text" name="userid"></p>
    <p>비밀번호 : <input type="password" name="userpwd"></p>
    <p>이름 : <input type="text" name="username"></p>
    <button onclick="submit">확인</button>
</form>

 

1. name

폼의 이름을 지정하는 속성으로 한 HTML 페이지 안에 다수의 form태그가 있을 경우 form 태그를 구분하기 위해서 사용한다.

2.action

form 태그 내부에서 입력받은 데이터들을 전송할 곳 즉 데이터 값들을 받을 URL을 지정한다.

3.target

action에서 정의한 속성을 현재 창이 아닌 다른 위치에서 이동한다.
속성값으로는 _blank, _self, _parent, _top 등이 있다.

4.autocomplete

form  태그 안의 요소에서 자동완성 기능을 사용할지 여부를 명시합니다.
속성값으로 on을 입력하면 사용자가 이전에 입력했던 값들을 기반으로 비슷한 값들을 드롭다운 옵션으로 보여준다.

4.method

action에서 정의한 위치로 데이터를 전송할 때의 방식을 지정한다.
데이터 전송 방식 즉 method의 속성으로는 get과 post 방식이 있고, 입력하지 않을 경우 get이 기본속성값으로 적용된다.

반응형

---

method의 get과 post 방식

1. get

get은 서버로부터 데이터를 조회하기 위해 설계된 것으로,
URL에 데이터를 포함시켜 요청합니다.
URL에 데이터가 노출되어 보안에 취약합니다.
URL의 길이가 제한이 있기 때문에 전송 데이터 양이 한정되어 있습니다.
또한 형식에 맞지 않는 데이터라면 인코딩해서 전달해야 합니다.
get방식은 캐시가 가능하고, 브라우저 히스토리에 남습니다.

<form action="/test/login.jsp" method="get">
    <p>아이디 : <input type="text" name="userid"></p>
    <p>비밀번호 : <input type="password" name="userpwd">
    <button onclick="submit">확인</button>
</form>

위 사진처럼 action으로 지정한 경로 뒤에 ?가 붙고 input 태그의 name 속성값 뒤에 입력한 데이터가 그대로 노출됩니다. 
개인정보가 담인 데이터에 사용기에 적절하지 않습니다.

2. post

post는 서버에 데이터를 생성하거나 변경하기 위해 설계된 것으로
URL에 데이터를 노출하지 않고 요청합니다.
URL에 데이터가 노출되지 않아서 보안이 가능합니다.
전송되는 데이터 양에 제한이 없습니다.
post방식은 캐시 되지 않고, 브라우저 히스토리가 남지 않습니다.

<form action="/test/login.jsp" method="post">
    <p>아이디 : <input type="text" name="userid"></p>
    <p>비밀번호 : <input type="password" name="userpwd">
    <button onclick="submit">확인</button>
</form>

post 방식은 form태그를 submit 해도 파라미터 뒤에 입력한 값이 노출되지 않습니다.

---

get과 post 차이점

get은 가져온다는 개념이고, post는 수행한다는 개념으로
get은 서버에서 어떤 데이터를 가져와서 보여줄 때(조회) 사용합니다. 어떤 값이나 내용, 상태 등을 바꾸지 않는 경우에 사용합니다.
post는 서버상의 데이터 값이나 상태를 바꾸기 위해서(생성) 사용합니다. 반대로 데이터의 값이나 상태를 바꾸기 위해서 사용합니다.