HTML form 태그 사용하는 다양한 방법

HTML

HTML form 태그 사용하는 다양한 방법

 

환경: Eclipse Mars

 

폼은 웹 페이지의 정보를 다른 페이지로 전송하는 역할을 합니다. 단순히 텍스트의 내용만 보여 주는 페이지에는 필요 없지만 서로 데이터를 주고 받으며 움직이는 웹 페이지일 경우 반드시 들어가는 요소입니다. 예를 들어 로그인 할 때 아이디와 비밀번호는 form 태그가 자신의 내부에 있는 input 박스 정보를 넘기는 것입니다. 이런 폼에 대해서 샘플과 함께 기능을 하나씩 알아 보도록 하겠습니다.

 

l  action : 폼 내부에 데이터를 보내는 목적지 URL 을 지정한다.

l  actocomplete : HTML5 에 추가되었으며 양식의 자동완성을 지정한다.

l  enctype : 넘기는 Content 타입을 지정하는데 주로 파일을 넘길 때 많이 사용한다. type “multipart/form-data” 로 지정해서 사용한다.

l  method : 폼을 서버로 전송하는 http 방식을 지정한다. POST GET 이 있다.

l  name : 폼을 식별하기 위한 이름을 지정한다.

l  target : action 에서 지정한 스크립트 파일이 현재나 다른 위치에서 열리도록 지정한다.

l  accept-charset : 폼 전송에 사용될 문자 인코딩을 지정한다.

 

action 속성을 이용한 목적지에 데이터 보내기

 

action form 내부에 전송(submit) 을 했을 때 데이터를 보내는 곳의 URL 을 지정하게 됩니다. 보통 input 태그의 submit type 으로 설정해서 클릭했을 때 데이터를 서버로 보내게 됩니다. 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
body {
	background-color: #e7e7e7;
}
div {
	margin : 10px;
}
</style>
</head>
<body>
	<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>
</body>
</html>

HTML form 태그 사용하는 다양한 방법

 

form autocomplete 속성으로 자동완성 기능 설정/해제하기

 

자동완성기능은 익스플로러나 크롬에서 검색을 위해 단어를 입력했을 때 추천 단어를 보여 주는 것을 말합니다. autocomplete 에 설정하는 값은 “on” “off” 두 가지 입니다. 기본적으로 autocomplete = “on” 이지만 보안을 위해서 이 기능을 강제적으로 막고 싶을 때 off 으로 설정할 수 있습니다. 아래와 같이 form 에 설정하면 포함되어 있는 모든 요소는 자동완성 기능을 막게 됩니다

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

만약 특정 요소에만 막고 싶다면 그 요소에만 입력해 autocomplete 를 입력해 줍니다.

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

 

form enctype 으로 컨텐츠 타입 지정하기

 

기본적으로 enctype “application/x-www-form-urlencoded” 입니다. 폼 데이터는 서버로 전송되기 전에 URL Encode 가 됩니다. 여기에서 파일을 넘기고 싶다면 타입을 “multipart/form-data” 로 변경해 줘야 합니다. 그리고 form 의 전송방식에서 method POST 로 지정해 줘야 합니다. 아래 그림과 같이 input 박스에 선택한 파일을 넘기기 위해서 form 타입을 “multipart/form-data” 로 지정해 주었습니다

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

HTML form 태그 사용하는 다양한 방법

 

데이터 보내는 방식의 결정

 

GET 방식은 URL 뒤에 input 박스의 내용이 “key=value” 형태로 변환되어서 전송이 됩니다. “action.jsp?id=aaa&pwd=bbb” 이런 형태가 되겠죠. 넘겨지는 값이 다 보이기 때문에 보안에 취약합니다. 그래서 노출이 되지 말아야 할 데이터들은 POST 로 전송하게 됩니다.  

<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="button" id="btn" value="전송"></div>
</form>

HTML form 태그 사용하는 다양한 방법

 

method POST 로 변경해서 실행하면 URL 뒤에 아무것도 보이지 않죠.

<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="button" id="btn" value="전송"></div>
</form>

HTML form 태그 사용하는 다양한 방법

 

target 속성으로 action 에서 지정한 페이지 여는 방식 지정

 

target 의 값 두 개는 _self _blank 이 있습니다. 기본은 _self 로 이벤트가 일어난 그 화면에서 action 에 지정한 스크립트가 열리게 됩니다. 반대로 _target 은 탭이나 팝업으로 별로의 창에서 열리게 됩니다.

<form action="action.jsp" id="frm" method="post" target="_blank">
	<div>아이디 : <br/><input type="text" name="id" value=""></div> 
	<div>비밀번호: <br/><input type="text" name="pwd" value=""></div> 
	<div><input type="button" id="btn" value="전송"></div>
</form>

HTML form 태그 사용하는 다양한 방법

 

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="button" id="btn" value="전송"></div>
</form>


저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군