폼은 웹 페이지의 정보를 다른 페이지로 전송하는 역할을 합니다. 단순히 텍스트의 내용만 보여 주는 페이지에는 필요 없지만 서로 데이터를 주고 받으며 움직이는 웹 페이지일 경우 반드시 들어가는 요소입니다. 예를 들어 로그인 할 때 아이디와 비밀번호는 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>
| ◎ 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 입력한 형태 그대로 보여 주는 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>
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>
| ◎ 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>
| ◎ 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 태그 사용법과 차이 |
'웹 프로그래밍 > HTML' 카테고리의 다른 글
| HTML 용어 정의할 때 사용하는 dl, dt, dd 태그 사용법 (1) | 2022.12.01 |
|---|---|
| HTML 하이퍼링크 a 태그 id 속성으로 내부 링크(책갈피) 기능 구현하는 방법 (7) | 2022.11.18 |
| HTML 하이퍼링크 a 태그로 사이트 연결하기 (1) | 2022.11.09 |
| HTML5 와 CSS 이용해 페이지 레이아웃 만드는 방법 (0) | 2022.11.01 |
| HTML 입력양식 input 태그 HTML5 추가된 type 타입 에 대한 설명 (2) | 2022.07.03 |
| HTML 입력양식 input 태그 기본 적인 타입에 대한 설명 (0) | 2019.04.26 |
| HTML 입력양식 input 태그 HTML5 추가된 속성에 대한 설명 (1) | 2019.04.11 |
| HTML 하이퍼링크 텍스트의 색상 상태에 따라 별도 지정하기 (0) | 2019.01.14 |
