FORM 태그로 여러분의 웹문서에 방명록, 게시판등의 입력양식을 만들 수 있습니다.

 

HTML Form의 기본양식은 다음과 같습니다....

 

<FORM>  form 시작

<INPUT>  가지다른방법중의하나로정보를질의...

<INPUT> ....원하는만큼입력(input)할수있습니다

</FORM> form 종료

 

다음은  Form tag에서 입력받은 데이터를 어디로 보낼 것인가에 대한 것입니다.

Form tag에서 입력받은 데이터는 크게 두곳으로 지정하여 보낼 수가 있습니다.

 

  • 지정한  email로 보내는 방법
  • CGI와 관련된  Script (PERL등)로 보내는 방법

 

먼저  EMAIL로 보내는 것은 다음과 같이 구현합니다.

 

<FORM METHOD=POST ACTION="mailto:sspark09@soback.kornet.net" ENCTYPE="application/x-www-form-urlencoded">

</FORM>

 

입력받은 홈변수값(데이터)를 지정한  email로 보내는 방법의 예로써  mailto: 뒤에  E-Mail주소를 넣어주면 됩니다.

 

둘째로  CGI Script로 보내는 방법인데,  일반적으로  CGI 프로그래밍을 할 때 대부분 이런 방법을 사용합니다.  위에서 email주소 대신에 CGI프로그램이름을 기술해 주면 되는 것입니다.

 

<FORM METHOD=POST ACTION="test.cgi" > </FORM>

 

CGI Script로 넘겨진 변수의 처리는 test.cgi라는 스크립트(프로그램)로 넘겨져서 처리됩니다.

 

이제 본격적으로 FORM태그의 다양한 옵션지정방법과 사용법에 대해서 알아 보겠습니다.

 

 

 

TYPE=TEXT

 

FORM <INPUT>의 가장 일반적인  TYPE은  TEXT입니다.

<HTML>

<HEAD>

<TITLE>이미지삽입</TITLE>

</HEAD>

<BODY>

<FORM METHOD=POST ACTION="test.cgi">

<INPUT TYPE=TEXT NAME="주소" VALUE="흑석동 221번지" SIZE=10><BR>

<INPUT TYPE=TEXT NAME="주소" VALUE="흑석동 221번지" SIZE=20><BR>

<INPUT TYPE=TEXT NAME="주소" VALUE="흑석동 221번지" SIZE=30><BR>

<INPUT TYPE=TEXT NAME="주소" SIZE=30>

</FORM>

</BODY>

</HTML>

 

 결과보기

  

예처럼,  TEXT옵션은 주소나  EMAIL등을 입력 받고자 할 때 주로 사용됩니다.

SIZE라는 옵션은 입력할 수 있는 창(FORM 입력창)의 크기를 지정한 것입니다.

크기를 지정하지 않으면 기본크기는  20입니다.

 

 

TYPE=PASSWORD

 

TYPE=TEXT와 아주 비슷한 것이  TYPE=PASSWORD 입니다.

실제 입력된 문자 대신에  ***을 보여 준다는 것을 제외하고는  TEXT옵션과 같습니다.

여러분에게는 웹브라우저에 입력된 그대로를 보내 주지만, 웹브라우저에서는 입력부분을 안보여 준다는 것 뿐입니다.

 

<HTML>

<HEAD>

<TITLE>이미지삽입</TITLE>

</HEAD>

<BODY>

<FORM METHOD=POST ACTION="test.cgi">

패스워드 : <INPUT TYPE=PASSWORD NAME="사용자비밀번호">

</FORM>

</BODY>

</HTML>

 

결과보기



TYPE=RADIO

 

다음은 라디오 버튼과 체크박스에 관한 예입니다. 편의상 HTML문서의 <HEAD>부분과 <BODY>부분의 태그는 생략하도록 하고 <FORM>태그 부분만을 보여드릴 것입니다.

 

 Radio 버튼은 사용자가 여러 가지 선택사항중에 하나만을 선택할 수 있습니다.

우선 Radio 버튼을 몇 개 만들어 봅시다.

 

 

<FORM METHOD=POST ACTION="test.cgi">

<INPUT TYPE=RADIO NAME="친한친구" VALUE="승희"> 이승희<BR>

<INPUT TYPE=RADIO NAME="친한친구" VALUE="재욱"> 안재욱<BR>

<INPUT TYPE=RADIO NAME="친한친구" VALUE="희선"> 김희선<P>

</FORM>

결과보기

 

 

예로서 설문조사를 하는 홈페이지에서는 여러 가지 선택사항중 한가지를 미리 선택되어있는 경우가 있습니다.  

이것은 다음의 예처럼  INPUT 태그안에 CHECKED라는 옵션을 주면 지정된 항목이 미리 선택되어 보여지게 됩니다.

 

<FORM METHOD=POST ACTION="test.cgi">

가장친한친구는? <BR>

<INPUT TYPE=RADIO NAME="친한친구" VALUE="승희" CHECKED>이승희<BR>

<INPUT TYPE=RADIO NAME="친한친구" VALUE="재욱">안재욱<BR>

<INPUT TYPE=RADIO NAME="친한친구" VALUE="희선">김희선<P>

</FORM>

 

결과보기

     

 

 

사용자는 하나의 선택사항 만을 선택할 수 있습니다.  

선택한 것은 (누구를선택하든) 여러분에게 "친한친구=승희"라는  NAME/VALUE값으로 ACTION=test.cgi에 의해  test.cgi라는 프로그램의 변수값으로 넘겨지게 됩니다.

 

 

TYPE=CHECKBOX

 

다음은  Check box를 만들어 보도록 하겠습니다.  Radio button과 방법은 거의 같습니다.

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

 

<FORM METHOD=POST ACTION=”test.cgi”>

<INPUT TYPE=CHECKBOX NAME="승희" VALUE="YES"><BR>

<INPUT TYPE=CHECKBOX NAME="재욱" VALUE="YES"><BR>

<INPUT TYPE=CHECKBOX NAME="희선" VALUE="YES"><BR>

<INPUT TYPE=CHECKBOX NAME="동건" VALUE="YES"><P>

</FORM>

 

결과보기

 

 

 

주의 할것은  Check박스에서는  NAME이 변수이며  VALUE는 같은 반면  Radio 버튼은  VALUE가 변수이고  NAME은 같습니다. 분명히 구분해야 합니다.   

FORM태그가 존재하는 이유는  CGI프로그램으로  변수값을 넘겨서 내부적인 처리를 하기위한 것인데,  어떤값이  CGI 프로그램으로 넘어 가느냐는 대단히 중요한 것입니다.

 

<FORM METHOD=POST ACTION=”test.cgi”>

친구는?<BR>

<INPUT TYPE=CHECKBOX NAME="승희" VALUE="YES" CHECKED>이승희<BR>

<INPUT TYPE=CHECKBOX NAME="재욱" VALUE="YES">안재욱<BR>

<INPUT TYPE=CHECKBOX NAME="희선" VALUE="YES" CHECKED>김희선<BR>

<INPUT TYPE=CHECKBOX NAME="동건" VALUE="YES">장동건<P>

</FORM?

 

결과보기

 

사용자는 선택사항중에서  1, 2, 또는 하나도 선택하지 않거나 모두를 선택할 수 있을 것입니다.  

선택한 것은  CGI프로그램(test.cgi)으로 name/value로 보내집니다.

 

승희=YES

희선=YES

 

물론선택을 하지 않으면 널값(NULL값, 값이없음)이 넘겨집니다.

 

 

 

 

PULLDOWN 리스트

 

다음의 입력형식은  Pull Down 리스트입니다.

 

<SELECT NAME="친한친구">

<OPTION VALUE="승희">승희

<OPTION VALUE="재욱">재욱

<OPTION VALUE="희선">희선

<OPTION VALUE="동건">동건

</SELECT>

 

결과보기

 

 

역삼각형으로 된 버튼을 클릭하게 되면 승희, 재욱, 희선, 동건이란 이름이 나오며 이를 선택할 수 있습니다.  

기본값이 처음에 게시된 항목이므로 “승희”가 보이는 것입니다.

 

물론 다음과 같이 리스트에 있는 첫째항목 이외의 것도 기본값으로 지정할 수 있습니다.

 

<SELECT NAME="친한친구">

<OPTION VALUE="승희">승희

<OPTION VALUE="재욱">재욱

<OPTION VALUE="희선" SELECTED>희선

<OPTION VALUE="동건">동건

</SELECT>

 

 

결과보기

 

 

 

SCROLLING 리스트

 

Scrolling 리스트는  Pull Down 리스트와 비슷하게 만들어 집니다.

몇 개의 이름을 더 추가 합시다.

역시 기본값은 첫번째  <OPTION>이고,  아무거나 선택해서 바꿀수 있습니다.

 

<SELECT NAME="친한친구" SIZE=4>

<OPTION VALUE="승희">승희

<OPTION VALUE="재욱">재욱

<OPTION VALUE="희선" SELECTED>희선

<OPTION VALUE="동건">동건

<OPTION VALUE="지우">지우

<OPTION VALUE="병기">병기

<OPTION VALUE="진실">진실

</SELECT> 

 

결과보기

 

 

TEXTAREA

 

다음은  textarea 입니다.  

방명록 등에서 소감이나, 설문조사에서 의견등을 입력 받을 때 비교적 많은 텍스트를 입력 받을 때 사용하는 것입니다.

 

 

<TEXTAREA NAME="COMMENTS" ROWS=6 COLS=50> </TEXTAREA>

 

결과보기

 

크기를 지정 할 때는  ROWS와  COLS로 지정하며,  ROWS는 높이이고, COLS는 너비입니다.

 

 

TYPE=SUBMIT, RESET

 

간단히 설명해서 SUBMIT에서 지정된 버튼을 클릭하게 되면 INPUT에서 입력받은 데이터들을 지정된  CGI프로그램으로 보내주는 역할을 하며, RESET에서 지정된 버튼을 클릭하면 입력된 값들을 모두 지우고 다시 입력할 수 있습니다.

 

방명록이나 게시판 등에서 흔히 사용되고 있습니다.

 

<INPUT TYPE=SUBMIT VALUE="당장전송!"><BR>

<INPUT TYPE=RESET VALUE="입력취소!"><P>

 

결과보기

 

 

이상으로 HTML태그에 대한 설명을 모두 마칩니다.  

 

충분한 이해를 돕기위해  설명의 대부분을 예를 들어놓았으므로 읽고 이해하는 것 만으로 만족하지 마시고 태그까지 모두 직접입력하시면서 실습을 해보시기 바랍니다.

 

"백문이 불여일견"이요. "백견이 불여일행"이라 했습니다.

 





Copyright(c) 2001, 수퍼유저코리아 All Rights Reserved.
서버구축(운용)상담 : e-mail : webmaster@superuser.co.kr