[HTML] form 태그 사용하는 다양한 방법 / 개념잡기

폼[form]은 웹 페이지의 정보를 다른 페이지로 전송하는 역할을 한다. 단순히 텍스트 내용만 보여주는 페이지말고 서로 데이터를 주고 받으며 움직이는 웹 페이지일 경우 반드시 들어가는 태그 요소이다.

ex. 아이디와 비밀번호는 태그가 자신의 내부에 있는 정보를 넘기는 것

 

 

 

1. 폼(form) 속성 종류 알아보기

---

• action  : 폼 내부에 데이터를 보내는 목적지 url을 지정한다.
• actocomplete : HTML5에 추가되었으며 양식의 자동완성을 지정한다.
• enctype : 넘기는 content 타입을 지정하는데 주로 파일을 넘길 때 많이 사용. entype="multipart/form-data"로 지정해서 사용한다.
• method : 폼을 서버로 전송하는 http 방식을 지정. POST와 GET이 있다.
• name : 폼을 식별하기 위한 이름을 지정한다.
• target : action에서 지정한 스크립트 파일이 현재나 다른 위치에서 열리도록 지적한다.
• accept-charset : 폼 전송에 사용될 문자 인코딩을 지정한다.

 

 

 

 

1. action - 데이터를 보내는 목적지 url

---

action은 form 내부에 전송(submit) 했을 때 데이터를 보내는 곳의 url을 지정하게 된다.

보통 input 태그의 type="submit"으로 설정해서 클릭했을 때 데이터를 서버로 보내게 된다.

 

<form action="action.jsp" method="get">
	<div>아이디 :</br><input type="text" name="id" value=""</div>
	<div>비밀번호:</br><input type="text" name="pwd" value=""</div>
	<div><input type="submit" value="Submit"></div>
</form>

 

 

 

2. actocomplete - 자동완성 기능 설정/해제하기

---

자동완성 기능은 익스플로러나 크롬에서 검색을 위한 단어를 입력했을 때 추천 단어를 보여주는 것을 말한다.

actocomplete 에 설정하는 값을 "on" / "off" 두가지 입니다. (기본적으로는 "on")

form에 설정하면 포함되어 있는 모든 요소는 자동완성 기능을 막게 된다.

 

<form action="action.jsp" id="frm" autocomplete="off">

 

 

만약 전체말고 특정 요소에만 막고 싶다면 그 요소에만 입력해서 막아주면 된다

 

<input type="button id="btn" value="전송" autocomplete="off">

 

 

 

 

 

3. enctype - 컨텐츠 타입 지정하기

---

폼 데이터는 서버로 전송되기 전에 url Encode가 된다. 여기에서 파일을 넘기고 싶다면 타입을 "multipart/form-data"로 변경해 줘야 한다. 그리고 form의 전송방식에서 method는 POST로 지정해 줘야 한다.

 

<form action="action.jsp" method="post" name="frm" entype="multipart/form-data">
	<input type="file" name="파일링크">
</form>

 

 

 

 

 

 

4. method - 데이터 보내는 방식의 결정

---

GET 방식은 url 뒤에 input 박스의 내용이 "key=value" 형태로 변환되어 전송이 된다.

"action.jsp?id="aaa&pwd=bbb" 이런 형태가 되며 값이 다 보이기에 보안에 취약하다.

그래서 노출되지 말아야 할 데이터들은 POST로 전송하게 된다.

 

 

* method="get"

<form action="action.jsp" id="frm" method="get">
	<div>아이디 :</br><input type="text" name="id" value=""</div>
	<div>비밀번호:</br><input type="text" name="pwd" value=""</div>
	<div><input type="submit" value="Submit"></div>
</form>

보안에 취약한 method="get"

 

 

* method="post"로 변경 후..

<form action="action.jsp" id="frm" method="post">
	<div>아이디 :</br><input type="text" name="id" value=""</div>
	<div>비밀번호:</br><input type="text" name="pwd" value=""</div>
	<div><input type="submit" value="Submit"></div>
</form>

중요한 부분 노출 방지 method="post"

 

 

 

 

 

5. accept-charset - 속성으로 전송하는 데이터의 문자셋 변경하기

---

폼을 전송할 때 문자셋을 지정할 수 있다. 만약 브라우저 문자셋과 서버의 문자셋이 틀리면 글자가 깨지게 된다.

기본적으로 웹 페이지 인코딩이 필요하다면 accept-charset에 값을 세팅해서 보내야 한다.

웹 페이지는 EUC-KR 이고 서버는 UTF-8이라 문제가 생긴다면 accept-charset으로 UTF-8을 세팅한 후 보내면 된다.

<form action="action.jsp" id="frm" accept-charset="UTF-8">
	<div>아이디 :</br><input type="text" name="id" value=""</div>
	<div>비밀번호:</br><input type="text" name="pwd" value=""</div>
	<div><input type="submit" value="Submit"></div>
</form>