<FORM name=default method=get>

HTML 문서는 간순히 사용자에게 정보를 보여주는 역할만 하는 것이 아니라 사용자에게 대화 기능도 제공할 수 있다. 예를 들어, 여러분들은 야후(Yahoo!) 와 같은 홈페이지 검색 엔진에 접속해 본 적이 있을 것이다. 맨 앞의 페이지에는, 사용자가 데이타를 입력할 수 있는 입력 창(이것을 텍스트 박스-Text Box 라 한다)과 버튼 하나가 놓여져 있다. 아마 아래와 같은 모양일 것이다...

<INPUT> <INPUT type=button value=Search>

사용자는 여기에 검색어를 입력하고 버튼을 눌러 찾고자 하는 홈페이지의 목록을 얻을 수 있다. 이와 같이 홈페이지에 기능을 추가하기 위해 제공되는 태그가 바로 <FORM>이다.
<FORM> 태그를 이용하여 우리는 Windows 응용 프로그램에서 사용되는 텍스트 박스, 버튼(Button), 라디오버튼(Radio Button), 목록 상자(List Box), 드롭다운 목록 상자(Drop Down List Box), 체크 박스(Check Box), 텍스트 영역(Text Area) 등의 개체를 구현할 수 있다. 그 뿐만 아니라, 파일 업로드, 다운로드 등의 PC통신에서 가능한 기능 및 서버에 있는 응용 프로그램을 구동시켜 방명록, 게시판 등의 프로그램도 구현할 수 있다. 위의 일들을 가능케 하는 것이 바로 CGI(Common Gateway Interface)인데, 그에 대한 설명은 나중에 하도록 하고 일단은 <FORM> 태그를 이용하여 어떻게 HTML문서에 양식을 추가할 수 있는가에 대하여 우선 설명하도록 한다.

(1) FORM

1) NAME
양식의 이름을 정의한다. 이름은 아무거나 주어도 상관 없다. 이 속성은 없어도 무방하나, 자바스크립트와 같은 스크립트 언어를 사용할 경우에는 사용할 필요성이 때때로 있다.

예)

<FORM NAME = myform>

2) METHOD
METHOD에는 GET과 POST의 두가지 값이 올 수 있다. GET을 사용할 경우는 사용자의 입력이 서버쪽의 환경변수 QUERY_STRING에 넘어가게 된다. POST는 표준 입력(Standard Input)을 이용하여 사용자의 입력이 서버에 넘어가게 되는데, 대용량의 데이타를 넘길 경우에는 POST를 사용한다. 일반적으로, 대부분의 경우는 POST방식을 사용한다.

예)

<FORM METHOD = GET>

3) ENCTYPE
ENCTYPE 속성은 서버쪽에 보내질 데이타 타입을 결정해 준다. 이 속성은 파일을 업로드하는 양식을 만들 때 쓰인다. 기본값은 "application/x-www-form-urlencoded" 이다. 파일을 전송하는 CGI일 경우에는 "multipart/form-data" 이다.

예)

<FORM ENCTYPE = "application/x-www-form-urlencoded">

4) ACTION
ACTION은 서버쪽에 있는, 실행될 프로그램의 URL을 지정한다. 하나의 FORM에는 하나의 ACTION 값만이 존재하게 된다.

예)

<FORM ACTION = "http://www.anyurl.com/cgi-bin/cgiprogram.cgi">

위와 같은 속성들이 모여서 다음과 같은 예를 구성하게 된다. 이 예는 데이타를 POST 방식으로 넘겨서 그 데이타를 가지고 "http://www.anyurl.com/cgi-bin/cgiprogram.cgi"라는 서버 응용 프로그램을 구동시키기 위한 예이다.

예)

<FORM METHOD = POST
ACTION = "http://www.anyurl.com/cgi-bin/cgiprogram.cgi">
......
(양식 개체 모음)
......
<INPUT TYPE = SUBMIT VALUE = "Submit Data">
</FORM>

(2) 입력 양식 정의 - INPUT

아래에 소개되는 모든 입력 양식들은 모두 <FORM>...</FORM> 안에 쓰여져야 한다.

1) 텍스트 입력 양식(TEXT)
텍스트 입력 양식이란, 한 줄짜리 문자열 입력을 위하여 쓰이는 요소이다. 쓰일 수 있는 속성은 NAME, SIZE, VALUE, MAXLENGTH가 있다.

1. NAME = 입력 양식의 이름
2. SIZE = 입력 양식의 길이(한 문자 단위)
3. VALUE = 입력 양식이 표시될 때 초기치로 갖고 있는 문자열
4. MAXLENGTH = 입력할 수 있는 최대 문자의 수

예 1) 이름이 "mytext"이고, 길이가 20인 입력 양식

<INPUT TYPE = TEXT NAME = mytext_1 SIZE = 20>

결과 1)

<INPUT name=mytext_1>

예 2) 이름이 "mytext"이고, 길이가 20인데, 초기값이 "MY TEXT"인 입력 양식

<INPUT TYPE = TEXT NAME = mytext_2 SIZE = 20 VALUE = "MY TEXT">

결과 2)

<INPUT value="MY TEXT" name=mytext_2>

예 3) 이름이 "mytext"이고, 길이가 25인데, 15자 이상은 입력할 수 없는 입력 양식

<INPUT TYPE = TEXT NAME = mytext_3 SIZE = 25 MAXLENGTH = 15>

결과 3)

<INPUT maxLength=15 size=25 name=mytext_3>

※ SIZE 속성을 생략하면 기본값으로 20이 설정된다.


2) 암호 입력 양식(PASSWORD)
암호 입력 양식의 속성은 VALUE속성이 없다는 점을 제외하고는 텍스트 입력 양식과 같으나, 사용자의 입력이 암호 문자(*)로 표시된다는 점이다.

예) 이름이 "mypass"이고, 길이가 15, MAXLENGTH가 10인 입력 양식

<INPUT TYPE = PASSWORD NAME = mypass SIZE = 10 MAXLENGTH = 10>

결과)

<INPUT type=password maxLength=10 size=10 name=mypass>

3) 라디오버튼 입력 양식(RADIO)
라디오버튼은 여러개의 항목 중 단 하나의 항목을 선택할 경우 사용된다. 라디오버튼들은 2개 이상이 하나의 그룹으로 묶여 있어야 하며, 각각의 버튼들의 이름은 같아야 한다.
그리고, 페이지가 열릴 경우 CHECKED 속성을 이용하여 미리 하나의 항목을 선택하게 할 수도 있다. 물론, 하나의 라디오버튼 그룹 중 하나의 버튼만 CHECKED 속성을 지정해 주어야 한다. 다음은 라디오 버튼을 이용한 객관식 문제 입력 양식이다.

예)

다음중 마이크로소프트사의 회장 이름은?
<OL>
<LI><INPUT TYPE = RADIO NAME = MYRADIO
VALUE = "ANSWER_1" CHECKED>빌 게이츠
<LI><INPUT TYPE = RADIO NAME = MYRADIO
VALUE = "ANSWER_2">발 게이츠
<LI><INPUT TYPE = RADIO NAME = MYRADIO
VALUE = "ANSWER_3">빌 케이츠
<LI><INPUT TYPE = RADIO NAME = MYRADIO
VALUE = "ANSWER_4">마이크로 소프트
</OL>

결과)

다음중 마이크로소프트사의 회장 이름은?

1. <INPUT type=radio CHECKED value=ANSWER_1 name=MYRADIO>빌 게이츠
2. <INPUT type=radio value=ANSWER_2 name=MYRADIO>발 게이츠
3. <INPUT type=radio value=ANSWER_3 name=MYRADIO>빌 케이츠
4. <INPUT type=radio value=ANSWER_4 name=MYRADIO>마이크로 소프트

※ 실제로, 서버로 데이타가 넘어갈 때에는 해당 라디오버튼 그룹에 설정된 VALUE 속성의 값들 중 하나가 넘어가게 된다.


4) 체크박스 입력 양식(CHECKBOX)
체크박스는 여러개의 항목 중 하나 이상의 항목을 선택할 경우 사용된다. 체크박스들은 2개 이상이 하나의 그룹으로 묶여 있어야 하며, 각각의 버튼들의 이름은 같아야 한다.
CHECKED 속성은 라디오버튼의 경우와 사용법은 같은데, 하나의 체크박스 그룹에서 두 개 이상을 CHECKED로 지정할 수 있다. 다음은 체크박스를 이용한 객관식 문제 입력 양식이다.

예)

다음중 마이크로소프트사의 회장 이름이 아니라고 생각되는 것을 모두 고르시오.<OL>
<LI><INPUT TYPE = CHECKBOX NAME = MYCHECK
VALUE = "ANSWER_1">빌 게이츠
<LI><INPUT TYPE = CHECKBOX NAME = MYCHECK
VALUE = "ANSWER_2" CHECKED>발 게이츠
<LI><INPUT TYPE = CHECKBOX NAME = MYCHECK
VALUE = "ANSWER_3" CHECKED>빌 케이츠
<LI><INPUT TYPE = CHECKBOX NAME = MYCHECK
VALUE = "ANSWER_4" CHECKED>마이크로 소프트
</OL>

결과)

다음중 마이크로소프트사의 회장 이름이 아니라고 생각되는 것을 모두 고르시오.

1. <INPUT type=checkbox value=ANSWER_1 name=MYCHECK>빌 게이츠
2. <INPUT type=checkbox CHECKED value=ANSWER_2 name=MYCHECK>발 게이츠
3. <INPUT type=checkbox CHECKED value=ANSWER_3 name=MYCHECK>빌 케이츠
4. <INPUT type=checkbox CHECKED value=ANSWER_4 name=MYCHECK>마이크로 소프트

※ 실제로, 서버로 데이타가 넘어갈 때에는 해당 체크박스 그룹에서 CHECKED 된 체크박스의 VALUE 속성의 값들이 모아져서 넘어가게 된다.


5) 버튼 입력 양식(BUTTON - Submit, Reset, Button)
버튼 입력 양식은 버튼을 클릭하여 사용자가 어떤 Action을 취할 경우 사용한다.
버튼 입력 양식에는 3가지의 종류가 있다.

※ 버튼 입력 양식

1. SUBMIT : <FORM ACTION = ...>부분에 정의된 서버쪽 프로그램을 실행시킨다.
2. RESET : 입력 양식에 입력된 모든 내용을 지우거나, 초기화한다.
3. BUTTON : 버튼 형태만을 만들어 주며, 주로 자바스크립트와 혼용되어 쓰일 경우 사용된다.

예를 들어, 서버쪽 프로그램이 "http://www.anyurl.com/cgi-bin/myprogram"이라는 URL로 지정이 되어 있을 경우, 이 SUBMIT 버튼을 누름으로써, 사용자가 압력 양식을 이용하여 입력한 데이타가 전송되면서, 서버쪽 프로그램, 즉 "myprogram"은 전송된 데이타를 가지고 실행을 한 후 다시 사용자에게 그 결과를 반환하게 된다.
버튼 입력 양식이 가지는 속성으로는 NAME, VALUE가 있다.

예 1) 버튼의 이름이 "MYBUTTON"이고, 제목(Caption)이 "Click Me!"이고, TYPE이 SUBMIT인 버튼

<INPUT TYPE = SUBMIT NAME = MYBUTTON VALUE = "Click Me!">

결과 1)

<INPUT type=button value="Click Me!" name=MYBUTTON>

</FORM>

예 2) 버튼의 이름이 "MYBUTTON_2"이고, 제목(Caption)이 "Reset"이고, TYPE이 RESET인 버튼

<INPUT TYPE = TEXT SIZE=20>
<INPUT TYPE = RESET NAME = MYBUTTON_2 VALUE = "Reset">

결과 2) → 텍스트 입력 양식에 아무 글자나 입력해 보시고 "Reset" 버튼을 눌러 보세요...

<FORM name=DEFAULT2 action=RESET method=get>

<INPUT> <INPUT type=reset value=Reset name=MYBUTTON_2>

</FORM><FORM name=DEFAULT3 method=get>

예 3) 버튼의 이름이 "MYBUTTON_3"이고, 제목(Caption)이 "Button"이고, TYPE이 BUTTON이며, 누르면 자바스크립트를 실행할 수 있게 하는 버튼

<INPUT TYPE = BUTTON NAME = MYBUTTON_3 VALUE = "Button"
onClick='alert("자바스크립트 테스트...");'>

결과 3)

<INPUT type=button value=Button name=MYBUTTON_3>

6) 숨겨진 입력 양식(HIDDEN)
숨겨진 입력 양식은, 서버쪽 프로그램이 실행되기 위해서는 전송되어야 할 값이지만, 브라우저에는 표시하지 않도록 할 경우에 사용된다.

예) 이름이 "MYHIDDEN"이고, 값이 "Hidden Value"인 숨겨진 입력 양식

<INPUT TYPE = HIDDEN NAME = MYHIDDEN VALUE = "Hidden Value">

7) 파일 입력 양식(FILE)
파일 입력 양식은, 브라우저에서 특정 파일을 서버로 업로드할 때 사용된다.

예) 이름이 "MYFILE"이고, 버튼의 제목(Caption)이 "Browse..."인 파일 입력 양식

<INPUT TYPE = FILE NAME = MYFILE VALUE = "Browse...">

결과)

<INPUT type=file name=MYFILE>

위의 양식에서 [Browse...]를 누르면 파일 열기 대화 상자가 오픈되며, 파일을 선택할 수 있게 된다. 그런데, 이 파일 입력 양식을 이용하려면, 앞서 언급한 양식 정의 부분에 Enctype <FORM ENCTYPE = "multipart/form-data"> 이 정의되어 있어야 하며, 서버측에는 파일을 받아 저장하는 CGI 스크립트가 있어야 한다.

(3) 선택 목록 - SELECT
선택 목록이란, 어떠한 목록(LIST)에서 하나 혹은 여러 개의 항목을 선택하여 전송하고자 할 때 사용된다. 이 때는 <SELECT> 태그와 <OPTION> 태그를 사용한다.

※ SELECT 태그에 쓰이는 속성

1. NAME = 선택 목록의 이름을 정의한다.
2. SIZE = 선택 목록의 목록 갯수를 설정한다. 기본값은 1이다.
3. MULTIPLE = 다중 선택을 가능하게 한다.

※ SIZE = 1일 경우에는 콤보 박스(Combo Box)형태로 나타나게 되고, 1보다 클 경우에는 일반 목록 상자(List Box) 형태가 된다.

※ MULTIPLE 속성의 다중 선택이란, 목록 상자에서 SHIFT키/CTRL키와 마우스를 이용해서 한 번에 여러개 항목의 선택을 하는 것을 말한다. 이 때 SELECT 태그의 SIZE 속성은 반드시 1 이상이어야 한다.

예 1) 이름이 "myselect"인 콤보 박스 형태의 선택 목록

<SELECT NAME = myselect_1 SIZE = 1>
<OPTION VALUE = "IDX_1">넷스케이프 3.0
<OPTION VALUE = "IDX_2">넷스케이프 3.0 골드
<OPTION VALUE = "IDX_3">인터넷 익스플로러 3.0
<OPTION VALUE = "IDX_4">인터넷 익스플로러 4.0
</SELECT>

결과 1)

넷스케이프 3.0넷스케이프 3.0 골드인터넷 익스플로러 3.0인터넷 익스플로러 4.0

예 2) 이름이 "myselect"이고 SIZE = 3인 목록 상자 형태의 선택 목록

<SELECT NAME = myselect SIZE = 3>
......

결과 2)

넷스케이프 3.0넷스케이프 3.0 골드인터넷 익스플로러 3.0인터넷 익스플로러 4.0

예 3) 이름이 "myselect"이고 다중 선택이 가능한 목록 상자 형태의 선택 목록

<SELECT NAME = myselect SIZE = 3 MULTIPLE>
......

결과 3)

넷스케이프 3.0넷스케이프 3.0 골드인터넷 익스플로러 3.0인터넷 익스플로러 4.0
→(Shift + Click), (Ctrl + Click)을 이용하여 테스트해 보세요...

특정한 목록이 처음부터 선택되게 하고 싶을 경우는 SELECTED 속성을 써주면 된다.

예 4)

<OPTION VALUE = "IDX_1" SELECTED>넷스케이프 3.0
....

결과 4)

넷스케이프 3.0넷스케이프 3.0 골드인터넷 익스플로러 3.0인터넷 익스플로러 4.0

(4) 텍스트 영역 - TEXTAREA
텍스트 영역(TEXTAREA)은 텍스트 입력 양식(TEXT)과는 달리 한 줄 이상의 문장을 입력할 때에 사용된다.

※ TEXTAREA 태그에 쓰이는 속성

1. NAME = 텍스트 영역의 이름을 정의한다.
2. COLS = 텍스트 영역의 가로 폭을 설정한다(문자 단위).
3. ROWS = 텍스트 영역의 가로 폭을 설정한다(행 단위).

다음은, 텍스트 영역 입력 양식의 사용 예이다.

예)

<TEXTAREA NAME = MYAREA ROWS = 5 COLS = 40>
초기 데이타는 여기에...
</TEXTAREA>

결과)

<TEXTAREA name=MYAREA rows=5 cols=40>초기 데이타는 여기에...</TEXTAREA>

 

</FORM>