HTML에서 제공하는 폼 양식에 대해서 이미 알고 있겠지만 ASP 작업을 본격적으로 수행하기 이전에 간단하게 정리하여 보겠다. HTML에서 사용하고 있는 폼 양식으로는 크게 다음과 같은 것들이 있다.
1) <FORM>... </FORM>
폼의 시작과 끝을 나타낼 때 사용한다. 기본적인 <FORM> 태그의 사용 구문은 다음과 같다.
--------------------------------------------------------------------------
<FORM ACTION="URL" METHOD=POST NAME="FORM_NAME">
--------------------------------------------------------------------------
폼 태그의 가장 중요한 속성은 action과 method이다.
action은 폼이 전송되었을 때 넘어가는 페이지의 url을 나타내는 것이며,
method는 폼의 데이터를 전송하는 방법을 정의하는 곳이다.
method는 get과 post 방식의 두 가지로 구성되며 각각의 전송 방식은 조금씩 다르다.
get 방식은 url 요청에 추가하는 방식이며 전송되는 url에 데이터가 출력되면서 전송되는 형태이다.
post 방식은 http request 본문 내에서 전달되는 방식으로 데이터의 전송을 눈으로 확인할 수는 없다. asp에서는 두 가지 전송방식을 모두 사용하고 있으며, 경우에 따라 사용을 달리한다.
폼 태그에서 위의 속성 이외의 entype과 onsubmit이 있다.
entype="multipart/form-date"라고 선언하여 자료실과 같이 폼 양식을 통해 파일을 올리고자 할 때 사용한다. 그리고 onsubmit은 폼을 전송할 때 입력에 대한 핸들러 역할을 수행한다. 예를 들어 사용자가 입력 폼에 데이터를 모두 입력하지 않았을 경우에 에러 메시지 창을 출력한다든지 하는 기능이 이에 속하게 된다.
2) <INPUT>
사용자가 입력할 수 있는 입력 필드를 만들 때 사용한다. 기본적인 <INPUT> 태그의 사용 구문은 다음과 같다.
--------------------------------------------------------------------------
<INPUT TYPE="INPUT_TYPE" NAME="INPUT_NAME" VALUE="INPUT_VALUE">
--------------------------------------------------------------------------
기본적인 양식은 위의 구문처럼 구현하면 된다. 그러나 <INPUT> 태그로 구현되는 입력 필드의 모양은 아주 다양하다.
input 태그의 속성 중 가장 중요한 것은 type과 name이다. type은 입력 필드의 모양을 결정하는 가장 중요한 키워드이고, name은 입력 필드를 구분하여 주는 이름이다. type의 값에 따라 입력 필드의 모양과 구문의 형식이 상당히 많은 변화가 있게 되는데 다음의 여러 가지 예제들을 살펴보자.
① 일반 텍스트 상자
일반 텍스트 상자를 구현할 때 사용한다. 일반 텍스트 상자의 입력 구문은 다음과 같다.
--------------------------------------------------------------------------
<input type="text" name=textbox1 size="50" maxlength="80" value="일반 텍스트 상자">
--------------------------------------------------------------------------
일반 텍스트 상자에서는 size로 상자의 크기를 설정하고, maxlength로 최대 입력 길이를 설정한다. 그리고 텍스트 상자에 초기 값의 입력이 필요할 경우에는 value에 값을 입력하여 사용한다.
② 패스워드 상자
사용자가 텍스트를 입력하면 자동으로 (*)로 변환되어 입력하게 된다. 패스워드의 입력 시 주로 사용하는 상자이다. 패스워드 상자의 입력 구문은 다음과 같다.
--------------------------------------------------------------------------
<input type="password" name="password1" size="10" maxlength="10">
--------------------------------------------------------------------------
패스워드 상자는 일반 텍스트 상자와 입력 구문의 형식이 똑같다. 다만 type에 password를 사용하며, 입력 시 텍스트는 *로 표시되는 것이 다르다. 또한 한글 입력의 경우에도 패스워드 상자에서는 영문으로 변환되어 입력된다.
③ 체크 박스
사용자의 선택여부를 나타내기 위한 상자를 나타낸다. 보통 Yes/No의 질문을 위해 사용하며 체크 박스라 한다. 체크 박스의 입력 구문은 다음과 같다.
--------------------------------------------------------------------------
<input type="checkbox" name="checkbox1" value="checkbox_value" checked>
--------------------------------------------------------------------------
체크 박스는 type에 checkbox의 입력으로 구현된다. name은 체크 박스의 이름을 나타내며, value는 체크 박스가 가지는 값을 나타낸다. 마지막으로 checked 속성은 체크 박스가 처음 실행될 때 체크되어 있는 상태로 나타내고자 할 때 사용한다.
④ 라이오 버튼
많은 옵션들 중에서 하나를 선택할 때 사용한다. 작은 원 모양의 버튼이 나타나 사용자가 선택할 수 있도록 제공한다. 라디오 버튼의 입력 구문은 다음과 같다.
--------------------------------------------------------------------------
<input type="radio" name="radio1" value="radio_value" checked>
--------------------------------------------------------------------------
체크 박스의 입력과 거의 동일하다. 그러나 체크 박스와는 달리 라디오 버튼은 여러 가지 중의 하나를 선택하는 기능을 수행해야 하기 때문에 여러 개의 라디오 버튼을 사용할 때에는 name은 동일하게 사용하고, value값을 다르게 입력하여 구분하여 준다.
⑤ 이미지
선택된 이미지의 좌표값을 반환하고자 할 때 사용한다. 사용자가 이미지를 클릭하면 xy값이 자동으로 넘어가게 된다. 이미지 타입의 입력 구문은 다음과 같다.
--------------------------------------------------------------------------
<input type="image" name="image1" src="이미지경로">
--------------------------------------------------------------------------
일반 HTML에서 이미지를 삽입하는 것과 동일하다. src에 정확한 이미지 경로만 입력되면 정상적으로 이미지가 출력되는 것을 확인할 수 있다. ASP에서 이미지 타입은 좌표값의 처리 이외의 이미지로 된 버튼으로 로그인을 처리하고자 할 때 자주 사용된다.
⑥ HIDDEN
브라우저에 의해 출력되지 않는 입력 폼이다. CGI를 위해 정보를 전달하고자 하는 경우에만 사용된다. hidden 타입의 입력 구문은 다음과 같다.
--------------------------------------------------------------------------
<input type="hidden" name="hidden1" value="hidden_value">
--------------------------------------------------------------------------
input 타입으로 서버에서 Request값으로 저장된 값은 전송 받지만, 사용자에게는 보이지 않는 입력 폼이다. 주로 ASP에서 서버에서 처리할 페이지로 변수나 데이터 값을 전송할 때 사용한다.
⑦ 버튼
사용자가 클릭할 수 있는 버튼을 나타내고자 할 때 사용한다. 버튼의 입력 구문은 다음과 같다.
--------------------------------------------------------------------------
<input type="button" name="button1" value="버튼">
--------------------------------------------------------------------------
회색 버튼으로 표시되며, value에 있는 값이 버튼의 caption 문자로 나타난다. 실제 버튼은 독립적으로 특별한 기능을 수행하지는 않고 다른 자바스크립트 소스와의 연동을 통해 많은 작업이 이루어진다.
⑧ 서브밋
폼을 전송하는데 사용하는 버튼이다. 서브밋의 입력 구문은 다음과 같다.
--------------------------------------------------------------------------
<input type="submit" name="submit1" value="전송하기">
--------------------------------------------------------------------------
입력 필드에 입력되어 있는 값들을 <form> 태그에서 정의된 action 파일로 전송하는 버튼이다. 등록 버튼으로 주로 사용된다.
⑨ 리셋
폼에 입력되어 있는 값들을 초기화하는 버튼이다. 리셋 버튼의 입력 구문은 다음과 같다.
--------------------------------------------------------------------------
<input type="reset" name="reset1" value="취소">
--------------------------------------------------------------------------
사용자가 입력하다 잘못 입력하였거나 처음부터 다시 입력하고자 할 때 사용할 수 있는 입력 폼 초기화 버튼이다. 취소 버튼으로 주로 사용된다.
이렇게 사용자 입력 필드의 양식은 아주 다양하게 존재한다. 이런 것들을 어떻게 이용할 것인가가 프로그래머의 몫인 것이다. 다음의 Input 객체 사용 예를 살펴보자.
● input.html
<HTML>
<HEAD>
<TITLE>Input 객체 사용하기</TITLE>
</HEAD>
<BODY>
<form action=input2.html name=regform method=post>
<table border=0 width=600 align=center>
<tr>
<td align=right>일반 텍스트 상자 : </td>
<td><input type=text name=text1 size=30 maxlength=50></td>
</tr>
<tr>
<td align=right>패스워드 상자 : </td>
<td><input type="password" name="password1" size="10" maxlength="10"></td>
</tr>
<tr>
<td align=right>체크 박스 : </td>
<td><input type="checkbox" name="checkbox1" value="checkbox_value" checked></td>
</tr>
<tr>
<td align=right>라디오 버튼 : </td>
<td>예<input type="radio" name="radio1" value="radio_value1" checked>
아니오<input type="radio" name="radio1" value="radio_value2"></td>
</tr>
<tr>
<td align=right>숨김(hidden) : </td>
<td><input type="hidden" name="hidden1" value="hidden_value"></td>
</tr>
<tr>
<td align=right>버튼 : </td>
<td><input type="button" name="button1" value="버튼"></td>
</tr>
<tr>
<td align=right>서브밋 : </td>
<td><input type="submit" name="submit1" value="전송하기"></td>
</tr>
<tr>
<td align=right>리셋 : </td>
<td><input type="reset" name="reset1" value="취소"></td>
</tr>
</table>
</form>
</BODY>
</HTML>
[그림 2-1] input.html 결과
댓글 없음:
댓글 쓰기