html, form의 종류

HTML폼의 종류

html,form,input,textarea,select

 

<form>, </form>태그는 폼의 시작과끝을 나타낸다.

폼 태그에는 여러가지 속성이 있어서 이 속성들을 잘 설정해야 사용자가 입력한 정보를 올바르게 전달할수 있다.

가장 일반적인 폼 태그의 사용방법은 다음과 같다.

<form name="폼이름" action="데이터를 보낼 주소" method="전송방식">     여기에 HTML 및 기타 폼 요소들 </form>

 

속성	설명
name	폼의 이름
action	폼의 정보가 전달될 주소
method	폼 정보 전달방식 [GET | POST)
enctype	폼 데이터의 인코딩 타입
target	폼 데이터의 처리 후 보여줄 프레임이나 창의 이름

 

이벤트 핸들러	설명
onsubmit	submit을 실행하였을 때 이벤트 처리
inreset	reset을 실행하였을 때 이벤트 처리

 

위의 표와 같이 폼에는 대표적으로 5가지의 속성과 2개의 이벤트핸들러가 있다.

먼저 속성에 대해 살펴보도록 하겠다.

 

>> GET vs POST <<

GET과 POST, 두 방식은 역할은 같지만 GET방식이 URL로 정보를 전달하기 때문에 전달되는 값이 겉으로드러난다는 것과, POST방식은 REQUEST BODY를통해서 전달되기 때문에 겉으로 값이 보이지 않는다는것이 가장 큰 차이이다.

 

GET방식은 /index.py?name=youngjae와 같이 파일 이름 다음에 물음표기호를 사용하여 "?변수명=전달될 값"과같은 방식으로 동작한다.

만약 두개 이상의값을 전달하고자 할때는 & 기호를 통해서?name=youngjae&id=dudwo567890처럼 전달한다.

이러한 특성때문에비밀번호와 같은 정보를 전달하면 비밀번호정보가 그대로 노출되는 단점이 있다. 또한 URL을 통해서 전달되기 때문에 길이에 제한이 있다.

대략 2KB미만의 정보를 전송할때 GET방식을 사용한다.

get방식으로 데이터를 전송했을때

URL : http://192.168.0.2/test.py?name=%EC%98%81%EC%9E%AC

html_get_001.png

 

POST방식은 REQUEST BODY를 통해서 전달되므로 겉으로 드러나지않는다. 또한 데이터의 길이에 대한 제약이 없어서 매우 큰 용량의 정보를 전송하고자 할때도 사용할수있다. 그리고 폼 값과 함께 파일을 전송하는 등 여러가지 형태의 데이터를 전송하고자 할때도 POST를 사용해야만 전송할수 있다. POST방식이 GET방식보다 신뢰성이 있고 안전하지만 조작이 충분히 가능하기 때문에 무조건적인 신뢰를 해서는 안된다.

URL : http://192.168.0.2/test.py

html_post_001.png 

 

>> form태그의 속성 <<

-. name

name은 폼의 이름을 나타낸다. 보통은 굳이 이름을 부여하지 않아도상관없지만, 하나의 html문서안에 여러개의 폼이 있을때이를 구분지으려고 폼의 이름을 사용한다.

 

-. action

action은 사용자가 입력한 폼 정보를 전달할 주소를 지정하는 항목이다. 데이터를전달받는 주소는 반드시 php와 같은 서버 스크립트 파일이어야 한다.단순한 html에서는 폼 정보를 넘겨받을수 있는 능력이 없기 때문이다. 만약 action값을 지정하지 않으면 자신의 페이지로 정보를 전달한다. 그러나 자기 자신이 아닌 다른 파일로 정보를 전달하고 싶다면 데이터를 전송받을 페이지를 반드시 알려주어야 한다.

 

-. method

method는 데이터를 전달하는 방식을 정의하는 부분이다. 전송방식에는 POST와 GET 두가지 방식이 있으며, GET방식은 URL을 통해서 전달하는 방식이고 POST방식은 HTTP바디(Body)에데이터를 실어서 보내는 방식이다.

 

-. enctype

enctype은 폼 데이터를 어떻게 인코딩(encodeing)할 것인지를지정하는 부분이다. 그러나 폼 데이터 전송 형식이 GET이라면 enctype을 지정하더라도 원하는 결과를 얻을수 없다. enctype은 POST전송일 경우에만 적용되며,"application/x-www-form-urlencoded"와"multipart/form-data", 두가지의 종류가 존재한다. 우선 "application/x-www-form-urlencoded"의 경우 enctype을 지정하지 않았을때의 기본값으로 텍스트를 전송할때 사용된다.

html_form_001.png

 

만약 위의 그림과같이 name항목을 입력하였을때 웹서버와의 통신을 엿보면 다음과 같이 전송되는것을 확인할수 있다.

[Request_Headers] content-length : 13 content-type : application/x-www-form-urlencoded   [Request_Body] name : youngjae

 

이와 달리 "multipart/form-data"는 여러가지 MIME형식으데이터를 전송하려는 방법으로, 예를 들면 텍스트정보와 GIF이미지정보를 동시에 전송하고자 할때 사용하는 방식이다. 이 방법은Boundary를 설정하여 폼의 정보를 다음과 같은 방법으로 전송한다.

[Request_Headers] content-length : 149 content-type : multipart/form-data; boundary=---------------------------7dd2641d390884   [Request_Body] name : youngjae

 

이처럼 "---------------------------7dd2641d390884"라는 임의의 문자열을이용하여 각 항목을 구분짓고 이를 통해 전송되는 값을 읽어들일수 있다.

"multipart/form-data"를 사용하는 대표적인 경우가 바로 파일 업로드할때이다.

파일을 업로드할때는폼의 텍스트정보와 GIF,JPG와 같은 이미지, 또는 exe와 같은 실행파일등, 여러가지MIME타입을 갖는 데이터를 전송하기 때문이다.

 

-. target

target은 폼 정보를 모두 전송하고 그 결과를 보여줄 프레임이나 창의 이름을 지정하는 부분이다. 여기서 target은 하이퍼링크 태그인 <a>태그에서 사용하는 target과 같은 것으로 생각하면된다.

 

>> form태그의 이벤트핸들러 <<

이벤트핸들러(Event Handler)는 특정 이벤트가 발생했을 때, 이를 감지하고해당 이벤트를 처리할수 있는 함수를 호출하거나 명령을 처리한다. 폼 태그에서 사용할수 있는 이벤트핸들러는 OnSubmit과 OnReset이 있으며, 명령어는 모두 자바스크립트로 처리된다.

-. onsubmit

onsubmit의 경우에는 submit(쿼리 전송) 버튼을 클릭하거나 자바스크립트를 이용하여, submit을 실행한경우에 발생한다. 사용자가 쿼리 전송 버튼을 클릭하는 경우submit이벤트가 발생하여 먼저 onsubmit핸들러에 지정된 명령어나 함수가 처리된다. 이 명령이 처리되고 action에 지정된 주소로 폼데이터를 전송한다. 이 이벤트핸들러를 사용하는 대표적인 경우는 사용자가 폼에 작성한 정보가 올바른지 검사할때이다. 어떤 웹사이트에 회원가입을 할때 아이디의 글자수 제한이라든지 사용자가 입력한 주민등록번호가 유효한지 등을 검사하는경우가많다. 이때 폼 정보를 페이지에 전송하기에 앞서 먼저 이 폼 값이 유효한지 검사를 하는데 이 핸들러를사용한다.

 

-. onreset

onreset의 경우에는 reset(원래대로)버튼을 클릭하거나 자바스크립트를 이용하여 reset을 실행한 경우에발생한다. 사용자가 리셋버튼을 클릭하면 onreset핸들러에지정된 함수나 명령어가 실행된다. onreset핸들러는 일반적으로 사용자의 입력에 의해서 설정된 값들을초기화하기 위해서 사용한다. 예를 들면 입력창을 동적으로 생성하여 입력한 경우 리셋 이벤트가 발생했을때, 동적으로 생성된 입력창들을 모두 제거해야 하는 경우가 발생한다. 이때 reset이벤트핸들러를 통해서 이를 초기화해주는 자바스크립트를 작성할수 있다.

 

>> 테이블태그와 함께 사용되는 폼태그 <<

폼태그는 일반적으로테이블(<table>)태그와 함께 사용하는 경우가 많다. 보통아래와 같이 폼 태그와 테이블태그를 사용한다.

ex) 기본적인 테이블과 폼

<form method="post" action="form.py">     <table border=1>         <tr>             <td>name</td>             <td><input type="text" name="name"></td>         </tr>         <tr>             <td>userid</td>             <td><input type="text" name="userid"></td>         </tr>         <tr>             <td colspan="2><input type="submit"/>         </tr>         </table> </form>

html_form_002.png

테이블이 하나일때는별 문제가 없지만 디자인때문에 테이블이 여러개면 폼 태그 때문에 테이블과 테이블 사이에 공백이 생긴다.

 

ex) 폼 태그로 인해 생기는 공백

<table border=1> <tr> <td>이름과 아이디를 입력하세요.</td> </tr> </table> <form method="post" action="form.py"> <table border=1> <tr> <td>name</td> <td><input type="text" name="userid"></td> </tr> <tr> <td>userid</td> <td><input type="text" name="userid"></td> </tr> <tr> <td colspan=2><input type="submit"></td> </tr> </table> </form>

html_form_003.png

위와같이 공백이생기는것을 알수 있다.

 

만약 테이블사이에폼태그가 없었다면 이와같은 공백은 생기지 않을것이다.

그래서 이러한디자인적인 문제를 해결하기 위해서 아래와 같이 폼태그를 테이블태그의 안에 집어넣는 방법을 사용할수 있다.

 

ex) 폼 태그로 인해 생기는 공백 해결하기 첫번째

<table border=1> <tr> <td>이름과 아이디를 입력하세요.</td> </tr> </table> <table border=1> <form method="post" action="form.py"> <tr> <td>name</td> <td><input type="text" name="userid"></td> </tr> <tr> <td>userid</td> <td><input type="text" name="userid"></td> </tr> <tr> <td colspan=2><input type="submit"></td> </tr> </table> </form>

html_form_004.png

이렇게<form>을 <table>과 <tr>사이에 삽입하여 빈 공백이 발생하는 것을 막을수 있다.

 

그러나 위처럼반드시 특정위치에만 넣어야 하는 제약이 있기 때문에 사용하는데 불편함이 있다.

스타일시트를 이용하면훨씬 편리하게 공백이 생기는 것을 막을수 있다.

 

ex) 폼 태그로 인해 생기는 공백 해결하기 두번째

<table border=1> <tr> <td>이름과 아이디를 입력하세요.</td> </tr> </table> <form method="post" action="form.py" style="display:inline"> <table border=1> <tr> <td>name</td> <td><input type="text" name="userid"></td> </tr> <tr> <td>userid</td> <td><input type="text" name="userid"></td> </tr> <tr> <td colspan=2><input type="submit"></td> </tr> </table> </form>

html_form_005.png

이 방법은 폼태그를 어디에 두든지 상관없이 스타일시트를 이용하여 공백이 생기는 것을 원천적으로 차단할수 있다.

 

>> <INPUT><<

<input>태그는 각종 텍스트값의 입력과 버튼 그리고 체크상자와 라디오상자를 만들수 있다.

폼을 이용한 사용자입력의 대부분을 차지하는 <input>태그는 타입을 설정하는 방법으로 여러가지 모양의 입력폼을만들수 있다.

TYPE	설명
text	일반텍스트 입력상자
password	비밀번호 입력상자
file	파일 선택상자
checkbox	체크상자
radio	라디오버튼
button	일반버튼
submit	쿼리 전송버튼
reset	초기화버튼
image	이미지버튼
hidden	숨겨진필드

 

-. 일반텍스트 입력상자 (type="text")

<input type="text">태그는 짧은 텍스트를 입력할수 있는 상자이다. 길지 않은 문자열, 예를 들면 이름이나 이메일주소와 같은 수십자이내의 값을 입력하고자 할때 일반 텍스트입력상자를 사용한다.

일반텍스트 입력상자에입력한 값을 전송하려면 이름을 설정해야 한다.

<input type="text" name="username">

name이외에도 일반텍스트 입력상자에 사용할수 있는 속성이 여럿 있다.

아래는 그중에서사용빈도가 높은거만 간추려보았다.

속성	설명	사용 예
name	일반텍스트 입력상자의의이름, 데이터를 전송시 이 이름과 값이 서로 매칭되낟.	<input type="text" name="username">
value	일반텍스트 입력상자의 초기값, 여기에 지정한 값은 텍스트상자에 초기값으로 보여진다.	<input type="text" value="일반텍스트 입력상자">
size	일반텍스트 입력상자의 가로길이	<input type="text" size=20>
maxlength	일반텍스트 입력상자에 입력할수 있는 최대 글자수	<input type="text" maxlength=20>
readonly	일반텍스트 입력상자를 읽기전용으로 생성한다.	<input type="text" readonly>

 

<input type="text" name="name"size="20" maxlength="5" value="0123456789">

위와 같이 태그를작성하면 텍스트입력창의 길이는 20이지만 최대 5글자만 입력할수있다.

만약 5글자를 초과하면 더이상 글자가 써지지 않는것을 알수 있다.

위 태그를 출력해보면아래와 같다.

html_form_006.png

그런데 maxlength가 5임에도 10자가출력되는것을 확인할수 있다. 이는 초기값에는 maxlength가적용되지 않기 때문이다.

이 경우 2개의 값을 지워 값을 8자로 바꾸는건 가능하지만 8자로 수정한값을 다시 10자로 늘리는것은 불가능하다.

 

그렇다면 5자의 제한이 걸린 이 텍스트입력상자의 값은 제대로 전송이 될까? 아니면 5자만 전송이 될까?

정답은 10자 모두 전송이 된다.

maxlength속성은 사용자의 입력을 원천적으로 봉쇄할뿐이지 데이터전송길이를 제한하는 것이 아니다.

 

읽기전용으로만드는 경우는 사용자로 하여금 값을 입력하거나 변경하지 못하게 해야 하는 값을 전송하고자 할때 주로 사용된다.

 

-. 비밀번호 입력상자 (type="password")

<input type="password">태그는 일반 텍스트입력상자와 대부분 같지만입력한 값이 별표(*)로 출력된다는것이 다르다. 그리고 알파벳과숫자 및 기호만 입력할수 있어 한글로 "브라운"을입력하게 되면 "qmfkdns"로 전달된다. 또한입력된 값은 캐시에 저장되지 않기 때문에 뒤로가기 버튼을 누르면 값은 출력되지 않는다. 따라서 이름에서도알수 있듯이 겉으로 들어나기 꺼리는 암호나 주민등록번호등을 입력할때 사용된다.

html_form_007.png

 

-. 파일 선택상자 (type="file")

<input type="file">태그는 파일을 업로드하거나 파일의 위치정보를 기록하고자할때 사용할수 있는 태그이다. 파일선택 상자를 클릭하면 웹브라우저의 파일 탐색 브라우저가 띄어진다. 파일탐색 브라우저에서 선택한 파일은 텍스트입력 상자에 파일의 주소가 자동으로 입력된다.

html_form_008.png

 

파일선택상자는파일을 업로드할때 주로 사용되며 POST방식과multipart/form-data인코딩 형식을 지정해야 올바르게 동작한다. 그렇지 않으면단순히 일반 입력상자와 같이 동작한다.

 

-. 체크 상자 (type="checkbox")

<input type="checkbox">태그는 각 항목에 대한 선택여부를 확인하는데사용하는 태그이다.

포털사이트에가입을 해보면 이메일주소를 입력하고 "이메일을 수신하겠습니까?"라고묻는 체크상자를 볼수 있다. 선택을 하면 지정된 값이 전송되는 방식으로 사용자로 하여금 해당 항목에대한 <예, 아니오>로대답할수 있는 물음에 대한응답을 받으려고 사용한다.

<input type="checkbox" name="is_recv_mail"value="1">

체크상자를 선택하면지정된 값 1을 전달받을수 있다. 그러나 체크상자를 선택하지않으면 값이 0이 전달되는것이 아니라 변수자체가 전달되지 않는다.

체크상자는 기본적으로선택되지 않은 값으로 출력된다. 그러나 만약 기본적으로 선택되게 하고싶다면 checked라는 속성을 사용하면 가능하다.

<input type="checkbox" name="is_recv_mail"value="1" checked>

 

-. 라디오상자 (type="radio")

<input type="radio">태그는 체크상자와는 달리 여러개의 항목중에서 하나만을선택해야 하는 경우 사용하는 태그이다. 보통 2,3개의 선택항목중에서 하나를 반드시 선택해야 하는 경우 사용한다. 체크상자와 마찬가지로 예와 아니오로 대답할수있는 질문에 사용하기도 하지만 중복으로 체크가 되지 않는다는 차이가 있다. 또한 일반적으로 4개 정도의 값에서 하나만을 선택해야 할때에는 라디오상자를 이용하지 않고 뒤에 다루게 되는 선택상자를 사용한다.

<input type="radio" name="is_recv_mail"value="1">예

<input type="radio"name="is_recv_mail" value="0">아니오

html_form_009.png

 

위와 같이 사용할수있으며 중요한 것은 반드시 이름을 같게 지정해야 한다는 것이다. 이름이 같지 않으면 각 항목을 다르게인식하여 둘다 선택이 가능해진다.

 

위 경우에 예를선택하면 "1"을 아니오를 선택하면"0"이란 값을 전송할수 있다.

하지만 위와같은 코드로 작성하면 기본적으로 어느 항목도 선택되지 않기 때문에 변수가 제대로 전달되지 않는 경우가 있다. 그래서반드시 둘중 하나의 값을 기본값으로 지정해야 한다.

<input type="radio" name="is_recv_mail"value="1" checked>예

<input type="radio"name="is_recv_mail" value="0">아니오

위와같이 checked키워드를 기본값에 설정해주면 브라우저로 실행했을때 기본적으로 해당항목이 선택되어 있음을 확인할수있다.

 

-. 일반버튼 (type="button")

<input type="button">태그는 버튼모양의 컨트롤을 만들어주는 태그이다. 폼 컨트롤중에서 버튼의 종류는 총 4가지이다. 그중에서 단순히 버튼모양만을 만들고 다른 기능이 없는 기본적인 태그가 바로 일반버튼태그이다.

<input type="button" value="일반 버튼">

html_form_010.png

일반버튼은 위의그림처럼 value값으로 지정된 문구가 버튼에 출력된다. 하지만아무런 기능이 없어서 클릭을 해도 변화가 전혀 없다. 그렇다면 왜 아무짝에 쓸모없는 태그가 있는 걸까?, 이유는 사용자로 하여금 원하는 기능을 부여하게 하기 위해서이다. 즉, 프로그래머가 정의하는 기능을 하는 버튼이란 의미이다.

일반버튼의 기능을정의하려면 자바스크립트를 이용해야 한다. 버튼에서 사용할수 있는 이벤트핸들러를 사용하여 해당 이벤트가발생했을때 정의된 기능을 수행하게끔 하는 원리이다. 일반적으로 버튼은 클릭했느냐 아니냐가 의미를 갖기때문에 우선 클릭했을때 클릭했음을 알려주는 경고창이 뜨도록 코드를 작성해 보겠다.

<input type="button" value="일반 버튼" onclick="alert('버튼이 눌러졌습니다.')">

html_form_011.png

위의 그림처럼버튼을 클릭하면 클릭이벤트가 발생하여 onclick이벤트 핸들러에 정의된 스크립트가 실행된다. 스크립트를 어떻게 작성하느냐에 따라 무궁무진한 기능을 할수 있는데 대체로 쿼리전송(submit)을 하지 않고 어떤 기능을 처리해야 할때 많이 사용한다.

예를 들면 회원가입에서사용되는 "아이디 중복확인"기능이라든지 "주소입력"기능에 사용할수 있다.

가장 일반적인경우의 예를 한번 보도록 하겠다.

이름을 직접적으로입력하지 않고 일반 버튼을 클릭하여 새로운 창을 띄운 다음 새로운창에서 입력한 값이 원래 창의 이름값에 등록되도록 한다.

ex) formpage.html

<script>     function insertname()     {         window.open("insertform.html","insertform",         "width=400,height=100");     } </script>   <form name="insname" action="test.py" method="post">     <input type="text" name="uname">     <input type="button" value="이름 입력" onclick="insertname();">     <input type="submit"> </form>

 

폼 페이지에서이름 입력 버튼을 클릭하게 되면 insertname()함수가 호출된다.insertname()함수는 새로운 창을 띄우는 기능을 한다.

window.open(주소, 창이름, 새창설정);

window.open을 통해서 새로운 창을 띄울수 있으며, 새로운 창에띄어질 주소와 그창의 이름, 그리고 창에 대한 크기 등과 같은 설정값을 지정하면 된다.

예를 들어 이름입력버튼을 여러번 클릭하여 계속 새창을 만들었을 경우와 같이 창의 이름이 같은 웹브라우저가 있다면 새로운창이 계속해서 생기는것이 아니라 기존에띄어진 창에 주소로 지정된 페이지가 불린다. 또한 새로 띄어질 창의 모양에 대해서도 설정할수 있는데위의 예제에서는 창의 가로세로길이를 지정했다.

ex) insertform.html

<script> function insert() {   var name = insertform.name.value;   opener.insname.uname.value=name;   self.close(); } </script>   <form name="insertform"> 이름을 입력하세요.<br/> <input type="text" name="name"> <input type="button" value="입력" onclick="insert()"> </form>

위의 예제는 formpage.html에서 버튼을 클릭하면 새창에 보일 웹페이지이다. 일반적인경우라면 주소를 검색하거나 중복된 이름이 있는지 검색하겠지만 편의를 위해서 곧바로 값을 입력받도록 하였다.insertform.html에서도 마찬가지로 일반버튼을 이용하여 insert()함수를 호출한다. insert()함수는 입력한 이름값을 가져다가 원래 창에 다시 전송해주는 역할을 한다. 그렇다면 어떻게 새창에서 원래 창에다 정보를 보내줄수 있을까?

opener는 새창을 띄운 웹브라우저를 지칭한다. 즉, window.open을 사용한 창을 말하는 것이다.

[기본 창과 팝업의 관계]

"opener.폼이름.폼컨트롤이름"과 같은 방법으로 자신을 오픈한 녀석의 값을 변경할수 있다.

opener의 값을 변경하고 난 후 자신(self)의 창을 닫게(close)한다.

 

html_form_013.png

 

[이름입력]버튼을 클릭하면 위와같이 새로운 창이 하나 뜨게 된다. 여기에 이름을 입력하고 [입력]버튼을클릭하면 아래와 같이 입력한 값이 전달되는것을 확인할수 있다.

 

html_form_014.png

 

-. 쿼리전송버튼(type="submit")

<input type="submit">태그는 폼의 입력한 정보를 폼의 action에 지정된 주소로 전송하는 버튼을 생성한다. 폼의 정보를전달하려면 반드시 submit(전송)이 필요한다. 이 submit기능을 하려면 자바스크립트를 이용한다든지 하는 몇가지방법이 있지만, 가장 기본적인 방법이 바로 쿼리전송버튼이다.

<input type="submit" value="전송">

위와 같이 사용할수있으며 value값으로 지정된 문구가 버튼 모양에 출력된다.

[쿼리전송버튼]

html_form_015.png

 

쿼리 전송버튼을클릭하면 폼에서 submit이벤트가 발생한다. 따라서 onsubmit이벤트 핸들러를 사용하여 폼의 정보가 전송되기 이전에 사용자가 원하는 동작을 하게 만들수 있다.

ex) submit 이벤트처리

<form method="post" onsubmit="alert('submit')"> <input type="submit" value="전송"> </form>

html_form_016.png

 

위의 예제와같이 폼의 정보에서 onsubmit이벤트 핸들러를 사용하여 입력 값을 검증하거나 폼 전송에 필요한 계산을한다든지 하는 처리를 할수 있다. 또한 쿼리 전송 버튼도 버튼의 일종이기 때문에 onclick이벤트 핸들러를 사용할수 있다. 이를 이용하여 onsubmit과 유사한 기능을 구현할수 있지만, onclick에지정된 스크립트가 수행된 후에는 무조건 폼의 전송이 이루어진다는것을 잊으면 안된다. 즉, 사용자가 입력한 값을 검증해보았더니 규칙에 어긋나서 값을 전송하면 안될때에도onclick을 사용하는 경우 전송이 될수 있다는 뜻이다.

 

-. 리셋버튼 (type="reset")

<input type="reset">태그는 폼에 입력한 정보를 모두 원래의 초기값으로되돌리는 버튼을 생성한다. 기본적으로 빈 폼에 새로운 값을 입력했다면 모두 빈폼으로 되돌아가게 되고, 폼 컨트롤에 value속성등을 이용하여 초기값으로 설정되어 있다면해당 초기값으로 되돌아 간다.

<input type="reset" value="초기화">

 

-. 이미지버튼 (type="image")

<input type="image">태그는 더욱 화려한 디자인을 추구하기 위해서 만들어진사용자가 정의한 모양의 그림이미지버튼이다. 이 이미지버튼은 웹에서 사용가능한 모든 이미지를 통해서 만들수있으며, 쿼리전송버튼과 마찬가지로 버튼을 클릭하면 submit이벤트가발생한다.

다시 한번 유의할점은이미지버튼은 쿼리전송버튼과 동일하게 submit이벤트가 자동으로 발생한다는 것이다. 그래서 이미지 버튼을 일반 버튼과 같이 사용하고자 할때는 아래와 같이onclick이벤트를 사용하여 submit이벤트가 발생하지 않게 해주어야 한다.

 

ex) 이미지버튼

<form method="post" onsubmit="alert('submit')"> <input type="image" src="submit.png" value="전송" onclick="alert('click');return false;"> </form>

위의 예제는이미지버튼을 클릭하면 'click'이라는 메시지를, submit이벤트가발생하면 'submit'메시지를 출력하게 되어 있다. 여기서유념해야 하는것은 onclick이벤트에서 alert()뒷부분에 return false라는 구문이 있다는 것인데 이 부분이 바로 submit이벤트가발생하지 않도록 막는 부분이다. 이는 쿼리전송 버튼에서도 동일하게 사용할수 있다.

ex) 이미지버튼의 onsubmit핸들러 회피하기

html_form_017.png

 

위의 예제를실행해보면 click메시지이후에 submit메시지가 출력되지않는것을 확인하수 있다.

 

-. 숨겨진상자 (type="hidden")

<input type="hidden">태그는 이름에서도 알수 있듯이 눈에 보이지 않는숨겨진 상자를 만들어 준다. 이 숨겨진 상자는 일반적으로 사용자가 수정해서는 안되는 값이나 눈에 보이지않게 여러가지 값을 전송할때 사용한다. 하지만 보안이 제대로 되지 않아 악의적으로 충분히 수정할수 있기때문에 숨겨진상자를 중요한 정보를 전송할때 사용하면 안된다.

<input type="hidden" name="hname"value="brown">

위와 같이 숨겨진상자를 만든 경우에 일반 텍스트입력 상자처럼 name으로 value값을매칭하여 얻을수 있다.

 

>> <SELECT> ...</SELECT> <<

이 태그는 일반적으로 3개 이상의 목록에서 하나 혹은 그 이상의 항목을 선택하고자 할때 사용하는 폼 컨트롤이다. 선택상자에는 두 종류가 있는데 하나는 목록중에서 하나만 선택할수 있는 콤보상자와, 다른하나는 하나 혹은 그 이상을 복수로 선택할수 있는 리스트 상자이다.

<select>     <option value="1">첫번째리스트</option>     <option value="2">두번째리스트</option>     <option value="3">세번째리스트</option>     <option value="4">네번째리스트</option> </select>

콤보상자나 리스트상자는모두 동일하게 만들어지며 size값을 지정하느냐 마느냐에 따라서 콤보상자인지 리스트상자인지 결정된다. 사이즈를 1이나 지정하지 않으면 기본적으로 콤보상자로 보이게 된다. 콤보상자로 출력하고자 할때는 <select>태그에서 size를 지정하지 않으면 된다.

html_form_018.png

 

리스트상자로 보여주고자할때는 다음과 같이 size를 지정해주면 된다.

<select size=5 name=select>     <option value="1">첫번째리스트</option>     <option value="2">두번째리스트</option>     <option value="3">세번째리스트</option>     <option value="4">네번째리스트</option> </select>

html_form_019.png

 

만약 리스트상자에서다중선택을 허용하는 경우에는 다음과 같이 multiple을 추가해주고 반드시 이름을 배열형식으로 바꾸어야한다.

<select size=5 name=select[] multiple>     <option value="1">첫번째리스트</option>     <option value="2">두번째리스트</option>     <option value="3">세번째리스트</option>     <option value="4">네번째리스트</option> </select>

html_form_020.png

 

콤보상자와 리스트상자모두 name에서 지정한 select로 값을 전달받을수 있다.

 

이외에 콤보 상자와리스트상자에 상관없이 여러 항목중에서 기본적인 선택값을 지정하고자 한다면 <option>태그에 selected를 추가해주면 된다.

<select size=5 name=select[] multiple>     <option value="1">첫번째리스트</option>     <option value="2">두번째리스트</option>     <option value="3" selected>세번째리스트</option>     <option value="4">네번째리스트</option> </select>

 

>> <TEXTAREA> ...</TEXTAREA> <<

여러 문단에 걸친긴 글을 입력하기 위한 <textarea>태그에 대해서 알아보자

일반적으로 게시판과같은 곳에서 글의 내용을 입력하는데 사용하며 입력창의 크기를 다음과 같은 방법으로 지정할수 있다.

<textarea name="content" rows="5"cols="40"/>

여기서 rows는 세로크기를 나타내며 이 값이 5이면 다섯줄을 보여줄수 있는크기를 의미한다.

또한 cols는 가로길이를 나타내며 40이란 값은 영문을 기준으로 40자가 보이는 크기를 뜻한다.

그리고 만약 다음과같이 <textarea>시작태그와 끝태그사이에 문장을 넣으면 초기값으로 동작하게 된다.

<textarea name="content" rows="5" cols="40">글의 내용을 입력하세요</textarea>

html_form_021.png

 

 

참조 : 뇌를자극하는 PHP프로그래밍