Internet Link Exchange
Member of the Internet Link Exchange

Form Tutor- Lesson 2

자!, 좀더 명확히 하기 위해서 저는 <FORM> 태그 안에 무엇이 있는지 설명하고자 합니다. 지금부터는 head, body, title 그리고 form 태그는 생략하도록 하겠습니다. 물론 여러분의 문서엔 그것이 있어야 하겠죠.

form <INPUT>의 가장 일반적인 형식TEXT입니다.

<INPUT TYPE=TEXT>


모든 input에는 NAME이 필요합니다.

<INPUT TYPE=TEXT NAME="ADDRESS">

사용자가 주소에다 (예를들어 1313 Mockingbird Lane이라고)입력하면, 그것은 input value가 되고, ADDRESS와 짝이되어서 Mailto Formatter를 통해 실행한 후의 최종결과는 ADDRESS=1313 Mockingbird Lane이 될 것입니다.


원한다면, VALUE에도 값을 줄 수 있습니다.

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St">

사용자가 변경만 하지 않으면, 이것은 자동적으로 ADDRESS이름이 44 Cherry St이라는 값과 짝을 이룰 겁니다. 주의 - 어디에 지정했는지 반드시 인용을 사용하시기 바랍니다.


text input 박스의 크기도 또한 지정할 수 있습니다.

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=10>

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=20>

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=30>

보시다시피, 기본값은 20입니다. 그건 그렇고 여러분은 아마도 기본값(default value)이라는 것이 여러분이 저정하지 않으면, 브라우저가 알아서 처리하는 값이라는 것을 아실 겁니다.


계속해서 VALUE="44 Cherry St"라는 것을 제거해봅시다.

<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30>


원한다면 사용자가 입력하는 문자의 숫자도 지정할 수 있습니다.
10문자 이상을 입력할 수 있도록 지정해봅시다!

<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30 MAXLENGTH=10>

이 수치는 가끔씩 여러모로 편리하다고 생각됩니다. 그러나 누군가가 여러분에게 팔만대장경의 전문을 보낸다고 생각지 않는 이상 걱정할 필요는 없겠죠.


TYPE=TEXT 아주 비슷한 것이 TYPE=PASSWORD입니다. 실제 입력된 문자 대신에 ***을 보여준다는 것을 제외하고는 완전히 같습니다. 여러분에게는 브라우저가 입력된 그대로를 보내주지만, 브라우저에서는 입력부분을 안보여 준다는 것 뿐입니다.

<INPUT TYPE=PASSWORD>


각각의 <INPUT>NAME을 가져야 한다는 것을 기억하세요.

<INPUT TYPE=PASSWORD NAME="USER PASSWORD">

SIZE, VALUE, 그리고 MAXLENGTH 속성은 여기서도 통합니다. 그건 그렇고 <TAG>라는 것은 브라우저에게 무엇을 하라고 알려줍니다. ATTRIBUTE<TAG> 안에서 브라우저에게 어떻게 그것을 하라는지 알려줍니다.


다음은 Radio 버튼과 Check 박스입니다. Radio 버튼은 사용자가 여러가지 선택사항 중에 하나를 선택하도록 해줍니다. Check 박스는 사용자가 여러가지 선택사항 중에서 하나 또는 그 이상 또는 모두를 선택하게 끔 해줍니다.
우선 Radio 버튼을 몇개 만들어 봅시다.

<INPUT TYPE=RADIO NAME="BEST FRIEND">


자 2개를 더 추가해 볼까요.

<INPUT TYPE=RADIO NAME="BEST FRIEND">
<INPUT TYPE=RADIO NAME="BEST FRIEND">
<INPUT TYPE=RADIO NAME="BEST FRIEND">

음..... 각각의 라디오 버튼에 줄넘김(line break)을 해줘야 겠군요.


<INPUT TYPE=RADIO NAME="BEST FRIEND"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND"><P>



각각의 input은 똑같은 이름을 가진다는 것에 유의하세요. 이유는 곧 말씀드리겠습니다.


각각의 Radio Button은 VALUE가 할당되어야 합니다.

<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"><P>




자! 이제는 각각의 버튼에 딱지를 붙입시다.

<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed"> Ed Holleran<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"> Rick Weinberg<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"> Tom Studd<P>

Ed Holleran
Rick Weinberg
Tom Studd

원한다면 html 태그로 이 라벨들을 수정할 수도 있습니다.


기본적으로 Radio 버튼은 끝냈습니다. 위의 버튼에 원한는 말을 추가해서 기본선택사항을 선택해봅시다(optional).

가장 친한 친구는? <BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed" CHECKED> Ed Holleran<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"> Rick Weinberg<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"> Tom Studd<P>

가장 친한 친구는?
Ed Holleran
Rick Weinberg
Tom Studd

사용자는 하나의 선택사항만을 선택할 수 있습니다. 그들이 선택한 것은 (그들이 누구를 선택하든지) 여러분에게 BEST FRIEND=Ed라는 이름/값으로 보내집니다.


체크박스 만들기도 완전히 같습니다. 이것으로 시작을 해볼까요.

<INPUT TYPE=CHECKBOX NAME="Ed">


3객를 더 추가해봅시다. 그러나 이번에는 각각에 서로 다른 이름을 줍시다. (줄넘김을 해줍시다.)

<INPUT TYPE=CHECKBOX NAME="ED"><BR>
<INPUT TYPE=CHECKBOX NAME="Rick"><BR>
<INPUT TYPE=CHECKBOX NAME="Tom"><BR>
<INPUT TYPE=CHECKBOX NAME="BM"><P>





각각의 Check 박스는 똑같은 VALUE를 가집니다.

<INPUT TYPE=CHECKBOX NAME="ED" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="BM" VALUE="YES"><P>




주의- Check 박스에서는 NAME이 변수이고, VALUE는 같고, 반면 Radio 버튼은 VALUE가 변수이고 NAME은 같습니다. 상심하지 마세요. 나도 단순해서 잘 헷갈리니까. 그래서 저도 html 참서서에 엄청 의지를 한답니다. (내머리로 이것 모두를 생각했다고요?? 홍홍!)


네, 각 박스에 이름을 줍시다.

<INPUT TYPE=CHECKBOX NAME="ED" VALUE="YES"> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YES"> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="BM" VALUE="YES"> Burgermeister Meisterburger<P>

Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister Meisterburger


마지막으로 위의 체크박스에 무언가를 추가해봅시다. 기본적으로 두어개를 선택하게 해봅시다.

친구는?<BR>
<INPUT TYPE=CHECKBOX NAME="ED" VALUE="YES" CHECKED> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YES" CHECKED> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="BM" VALUE="YES"> Burgermeister Meisterburger<P>

친구는?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister Meisterburger

사용자는 선택사항 중에서 1, 2, 또는 하나도 선태하지 않거나 모두를 선택할 수 있을 것입니다. 그들이 선택한 것은 여러분에게 name/value로 보내집니다.

Ed=YES
Tom=YES
(무엇을 선택하든지 ... 선택을 하지 않으면, 아무것도 보내지지 않겠죠)


똑같은 그룹의 사람들에게 3가지 다른 질문을 하려고 한다면 어떻게 될지 궁금해지네요. 역시 난 천재란 말이야!

네, 이제 해결이 되었군요. 보여드리죠.

친구는?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister

누구에게 돈을 빌리겠습니까?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister

여동생을 소개하고픈 사람은?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister

각각의 form에 중복되는 NAME이 있어서는 안된다는 것이 사실입니다. 그래서, 우리는 각각의 질문에 다른 이름을 사용할 수 있을 겁니다. 제가 안된다고 말할 때는, 여러분의 컴퓨터가 고장난다는 것을 의미하는 것은 아닙니다... 고작해야, 브라우저가 혼동한다거나, 또는 parser (Mailto Formatter가 parser입니다.), 또는 cgi 스크립트가 혼동한다는 거죠. 고작해야 제대로 이해해야할 form 데이터가 혼동을 일으키겠죠.

다음은 이러한 세질문에 관한 html입니다. <TABLE> 태그는 초록색입니다. 구분을 명확하게 하기위해서지, form에는 영향을 미치지 않습니다. <TABLE> 태그에 대해 다시 한번 상기하고 싶으시다면, Table Tutor로 들러주세요.

<CENTER>
<TABLE WIDTH=600 BORDER=1 CELLSPACING=1><TR>

<TD WIDTH=199>
친구는?<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..Ed" VALUE="YES"> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..Tom" VALUE="YES"> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..BM" VALUE="YES"> Burgermeister<P>
</TD>

<TD WIDTH=200>
돈을 빌리고픈 사람은?<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Ed" VALUE="YES"> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Tom" VALUE="YES"> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...BM" VALUE="YES"> Burgermeister<P>
</TD>

<TD WIDTH=199>
여동생을 소개하고픈 사람은?<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Ed" VALUE="YES"> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Tom" VALUE="YES"> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...BM" VALUE="YES"> Burgermeister<P>
</TD>

</TR></TABLE>
</CENTER>


사용자가 다음의 박스를 체크했다고 가정해 봅시다....

친구는?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister

돈을 빌리고픈 사람은?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister

여동생을 소개하고픈 사람은?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister

...그렇게 하시면 여러분에게 다음의 name/value pair를 전송합니다.

Friend?..Ed=YES
Friend?..Rick=YES
Friend?..Tom=YES
Lend money?...Tom=YES
Lend money?...BM=YES
Date sister?...Ed=YES
Date sister?...Tom=YES
Date sister?...BM=YES

멋있죠!

<--BACK        NEXT-->

Introduction Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Index
PROFESSIONAL WEB DESIGN