Please Enable JavaScript!
Gon[ Enable JavaScript ]

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

웹 프로그래밍/HTML
반응형

폼은 웹 페이지의 정보를 다른 페이지로 전송하는 역할을 합니다. 단순히 텍스트의 내용만 보여 주는 페이지에는 필요 없지만 서로 데이터를 주고 받으며 움직이는 웹 페이지일 경우 반드시 들어가는 요소입니다. 예를 들어 로그인 할 때 아이디와 비밀번호는 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 태그 사용하는 다양한 방법

 

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다.
HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법
윈도우 메모장에 HTML 문서 작성하는 방법
크롬 브라우저 페이지 소스 보기, HTML 디자인 확인하기
HTML 입력양식 input 태그 HTML5 추가된 type 타입 대한 설명
HTML div, span 태그 사용법과 차이



 

 

데이터 보내는 방식의 결정

 

 

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>

 

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다.
HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법
윈도우 메모장에 HTML 문서 작성하는 방법
크롬 브라우저 페이지 소스 보기, HTML 디자인 확인하기
HTML 입력양식 input 태그 HTML5 추가된 type 타입 대한 설명
HTML div, span 태그 사용법과 차이
반응형
Posted by 녹두장군

댓글을 달아 주세요