[HTML] WWW 이 기가 막혀! (9)-HTML문서(4)

------------------------------------
제 목 : [9510]www가 기가막혀(10)
------------------------------------
1 입력받는 폼(form) 만들기
이번 절부터는 브라우저를 이용하여 먼 곳에서부터 접속해 오
는 사용자들에게서 어떤 입력 예를 들어 자신의 서비스를 사용하
는 멤버십 정보로 패스워드를 입력한다던가 혹은 이용한 소감을
적는다던가 하는 경우에 필요한 폼 만들기에 대해서 알아보기로
한다. 일단 가장 쉬운 문자열을 입력받는 경우를 살펴본다.

첫 번째 예제
다른 것은 차지하고 가장 중요한 것이 폼을 만드는 부분 즉

과

사이의 문장들인데 METHOD="POST"에
서 "POST"대신 "GET"으로 지정할 수도 있지만 POST가 주로
쓰이므로 GET은 잊어버려도 된다. 하지만 간단히 생각한다면 G
ET은 URL 뒤에 요구하는 파라미터들을 붙여서 보내는 반면에
POST는 문서 안에 보내는 것이라고 보면 된다.
ACTION="http://casaturn.kaist.ac.kr/cgi-bin/post-query의 의
미는 사용자로부터 입력을 받고 Submit버튼이 눌려지면 casatur
n.kaist.ac.kr으로 http프로토콜을 이용하여 접속한 후에 /cgi-bin/
post-query 프로그램을 불러서 그 프로그램에 사용자가 입력한
것들을 넘기라는 의미이다. 그러면 /cgi-bin/post-query라는 프로
그램은 사용자가 입력한 것들을 마치 표준 입력(stdin)으로 입력
받은 것과 동일하게 받아서 표준 출력(stdout)으로 보내면 그것을
다시 사용자에게 넘겨주는 역할을 하게 된다.
주의할 점은 문자를 입력할 때 &, %, $를 입력하는 경우
는 브라우저에게 서버에게 넘어갈 때 %와 해당하는 ASCII 값을
가진 16진수로 바뀐다는 점이다. 예를 들어 "&%$"와 같이
입력하면 "%26%25%24"와 같이 넘어간다. 뒤에 가서 사용자의
입력을 처리하는 CGI 프로그램에서는 이와 같은 식으로 입력된
문자들을 원래대로 바꾸어 처리하게 된다.

---- EXAMPLE1.HTML -------------------------------

Fill-Out Form Example #1

This is a very simple fill-out form example.

A single text entry field goes here:

Note that it has no default value.

To submit the query, press this button: VALUE="Submit Query">.

그림 파일명 : 14ex1.gif 그림 파일명 : 14ex1r.gif
example1.html을 본 경우 입력을 하고 Submit버튼을
누른 후

-----<그림 2> example1.html 수행한 예 ------------------

두 번째 예제
다음 예도 역시 쉬운 예이다. 하지만 이번에는 입력받는 엔트
리가 여러 개라는 점이 다를 뿐이다. 아래의 예제에 대한 브라우
저를 통해서 보면 <그림 3>과 같은 결과를 얻을 것이다. 아래의
예를 수행해 보면 세 개의 입력 엔트리가 생기게 되는데 첫 번째
엔트리는 entry1, 두 번째는 entry2, 세 번째는 entry3의 이름을
가지게 되는데 만약 각 엔트리에 aaa, bbb, ccc를 각기 입력했다
면 서버에 CGI 프로그램에는 다음이 넘어가게 된다. 물론 입력하
지 않으면 &다음이 빈 채로 넘어가게 될 것이다.

"?entry1=aaa&;entry2=bbb&;entry3=ccc"

----- EXAMPLE2.HTML ----------------------------

Fill-Out Form Example #2

This is another fill-out form example, with multiple text
entry
fields.

---

The first text entry field goes here:

The second text entry field goes here:

The third text entry field goes here:

To submit the query, press this button: VALUE="Submit Query">.

그림 파일명 : 14ex2.gif 그림 파일명 : 14ex2r.gif
----- <그림 3> example2.html 수행한 예 ---------------

세 번째 예제
다음 예는 뷔페 음식점에 가서 음식을 주문할 때 자기가 먹고
싶은 것을 체크하는 경우에 유용한 HTML 파일이다. 이제 앞으
로 피자 가게에서도 웹 사이트를 제공해서 사용자가 원거리에서
피자를 주문하면 신속하게 배달하게 될 날도 그리 얼마 남지 않
았으리라 생각한다. 다만 그 때까지 피자가 인기 품목일지는 의
문이다. 이번 예의 특이한 점은 TYPE="checkbox"인 점이고 결
과를 보면 쉽게 이해가 갈 것이다. 여기서 유의해야 할 점은 체
크 박스는 설정하지 않으면 off로 설정이 되어 있다는 점이다.
----EXAMPLE3.HTML ----------------------------

Fill-Out Form Example #3

This is another fill-out form example, with multiple text entry
fields and checkboxes.

---

"http://casaturn.kaist.ac.kr/cgi-bin/post-query">

Godzilla's Pizza -- Internet Delivery Service

Type in your street address:

Type in your phone number:

Which toppings would you like?

1. 
   Pepperoni.
   
2. Sausage.
   
3. 
   Anchovies.
   

To order your pizza, press this button: VALUE="Order Pizza">.

그림 파일명 : 14ex3.gif 그림 파일명 : 14ex3r.gif
-----<그림 4> example3.html 수행한 예 -------------

네 번째 예제
네 번째 예제는 엔트리 타입과 체크 박스 타입의 입력을 섞어
서 쓰고 있고 어차피

으로 묶어 주면 같이
처리하게 된다. 좀 전과 다른 점은 NAME="box1" VALUE="activated" CHECKED>에서 보는 바와
같이 체크 박스에 대한 값을 VALUE="activated"를 통해 지정해
줄 수 있고 또한 미리 임의 설정으로 CHECKED라고 지정하면
체크된 상태로 사용자에게 보이게 된다. 이는 거의 사용할 줄 모
르는 사용자라 하더라도 쉽게 자신이 제공하는 웹 서비스를 받을
수 있도록 할 수 있다.

---- EXAMPLE4.HTML ------------------------

Fill-Out Form Example #4

This is another fill-out form example, with default values
for some text entry fields and checkboxes.

---

"http://casaturn.kaist.ac.kr/cgi-bin/post-query">
The first text entry field, with default value "foo", goes here:

The second text entry field, with no default value, goes here:

Now, here's three checkboxes right in a row:

1. VALUE="activated" CHECKED> The first checkbox, on
   by default.
   
2. VALUE="primed"> The second checkbox, off by default.
   
3. CHECKED> The third checkbox, on by default.
   

To submit the query, press this button: VALUE="Submit Query">.

To reset the various form elements to their default states, pre
ss this
button: .

그림 파일명 : 14ex4.gif 그림 파일명 : 14ex4r.gif
-----<그림 5> example4.html 수행한 예 -----------------

다섯 번째 예제
잘못된 입력 예를 들어 다섯 자리 이하의 수를 입력하라고 했
는데 사용자가 더 많은 입력을 할 경우에는 대개의 경우 경고음
이 나게 되는데 과 같이 지정하면 5자 이상을 입력하려 하면 비프음이 들리
게 될 것이다.

-------EXAMPLE5.HTML-------------------------

Fill-Out Form Example #5

This is another fill-out form example, with various text entry
field
attributes demonstrated.

---

The first text entry field has no special attributes: NAME="entry1">

The second text entryfield is twice as long (displays up to 40
characters, instead of the default 20): E="entry2">

Each of the first two text entry fields can hold as many chara
cters as the user wishes to type (into the millions). The follo
wing text entry field, however, is limited to five characters, an
d beeps when the user tries to enter more: MAXLENGTH=5 NAME="entry3">

To submit the query, press this button: VALUE="Submit Query">.

To clear the form, press this button: VALUE="Clear Form">.

----------------------------------------------------
그림 파일명 : 14ex5.gif 그림 파일명 : 14ex5r.gif
----- <그림 6> example5.html 수행한 예 -----------------

여섯 번째 예제
이번 예에서는 한 개의 HTML문서 안에 여러 개의 폼을 넣은
경우를 보여주게 된다. 그렇게 함으로서 한 개의 폼은 casaturn.k
aist.ac.kr에서 서비스를 받고 다른 하나의 폼은 다른 컴퓨터인 ho
ohoo.ncsa.uiuc.edu를 통해 서비스를 받을 수 있는 것이다.

-------- EXAMPLE6.HTML ---------------------------

Fill-Out Form Example #6

This is another fill-out form example, demonstrating multiple
independent fill-out forms in the same document.

---

"http://casaturn.kaist.ac.kr/cgi-bin/post-query">
This is the first form:

A text entry field:

A second text entry field:

To submit the query, press this button:
.

To clear the form, press this button:
.

---

This is a completely different form from the one rig
ht above.

Here's three checkboxes right in a row:

1. The first c
   heckbox.
   
2. The second
   checkbox.
   
3. The third c
   heckbox.
   

And a text entry form:

To submit the query, press this button:
.

To clear the form, press this button:
.

그림 파일명 : 14ex6.gif 그림 파일명 : 14ex6r.gif
----- <그림 7> example6.html 수행한 예 -----------------
..........