FORM (1)


여태까지는 텍스트와 이미지 등을 통해 HTML문서로 전달의 개념만 있던 태그를 공부했습니다. 이제 홈페이지에서 쌍방향 커뮤니케이션을 가능하게 해주는 FORM 태그에 대해서 공부합시다. 쉽게 말해서 폼태그는 클라이언트와 서버주인과의 대화를 가능하게 해주는 발판 역할을 한다고 생각이 되는군요. 사실.. 이 부분은 자신이 없어서 계속 뒤로 미뤄 왔는데.. 드디어 피할 수 없는 골목에 다다르고 말았습니다. 그냥.. 모르는 부분은 슬쩍 넘어가고, 이곳저곳을 뒤져 조합해 보겠습니다.^^ 그럼, 시작해 볼까요?

입력양식(FORM)이란?

폼(FORM)태그의 구조

INPUT 태그



1.입력양식(FORM)이란?



  1. 처음 WWW서비스가 시작되었을 때는 사람들에게 일방적으로 정보를 전달해 주는 것에 만족해야만 했습니다.
  2. 하지만 인터넷 기술이 발전함에 따라 정보의 일방적인 전달에 머무르지 않고 사용자와 상호작용을 할 수 있는 여러 가지 방법들이 나타나기 시작했습니다. 그 중 가장 대표적인 것이 폼(Form)이라는 개체를 이용하는 것입니다.
  3. 사용자는 이 폼을 통해서 정보를 입력할 수 있고 여러 옵션 중에 하나를 선택할 수도 있으며 버튼을 클릭하여 정보를 전달 할 수도 있습니다.
  4. 이렇게 사용자가 직접 자신의 요구를 서버에 전달하고 원하는 응답을 받을 수 있게 된 것입니다.
  5. 폼은 클라이언트와 서버간의 의사소통을 하는 데 중요한 역할을 합니다. 대표적인 예로 게시판과 방명록이 있습니다.
  6. 웹페이지를 만드는 과정을 크게 디자인과 프로그래밍으로 분류하면 그 두 과정의 공통된 부분을 폼이라고 할 수 있습니다.



  7. 디자인 과정은 폼의 입력양식을 HTML로 구현하는 것이고 프로그래밍 과정은 디자인된 폼을 쌍방향 통신이 가능하도록 만드는 것입니다.



2. 폼(FORM)태그의 구조

<FORM action="URL" method="post or get">....</FORM>

  1. 폼태그는 (FORM)으로 시작해서 (/FORM) 종료태그로 마무리를 지으며 폼과 관련된 내용은 모두 (FORM) ...(/FORM) 안에 들어가야 합니다. HTML문서의 시작과 끝을 나타내는 것과 같이 입력 양식의 시작과 끝을 선언하는 태그가 (FORM)태그입니다.
  2. 모든 입력 양식은 이 (FORM)태그 안에서 작성되어야 합니다. 만약 (FORM)...(/FORM)사이를 벗어난다면 이를 처리하는 스크립트 언어로 정확한 전달이 되지 않습니다.
  3. (FORM)태그는 다른 태그와 또 달리 또 하나의 (FORM)태그를 가질 수 없습니다. 한 페이지에 여러 (FORM)을 사용하려면 독립되게 구성해야 합니다. 이때 NAME속성을 사용해서 스크립트 언어가 각 입력 양식을 구별할 수 있도록 해주어야 합니다.
  4. (FORM)태그는 사용자에게 일정한 입력 양식을 제공해 특정 정보를 받는 기능에 추가하여 이 정보를 처리하는 스크립트 언어로 전달하는 기능도 함께 갖고 있습니다.
  5. (FORM)에 이러한 기능을 하도록 만드는 속성은 NAME과 ACTION과 METHOD속성이 있습니다.

    • NAME ☞폼에 고유한 이름을 부여합니다. 폼에 작성되는 모든 입력양식에도 모두 NAME속성이 있습니다. 폼에서의 NAME속성은 해당 입력 양식이 어느 폼에서 작성되었는지를 식별할 수 있도록 합니다. 만약 한 문서에 여러 FORM이 작성되었다면, 스크립트 언어는 이러한 넘어오는 양식을 구분할 필요가 있기때문에 NAME속성이 꼭 필요합니다.
    • ACTION ☞방문자가 내용을 적어 전송 버튼을 눌렀을 때 데이터가 반환될 장소를 지정하는 부분입니다. 폼이 작성된 페이지는 (A)태그가 사용된 링크가 아니라 입력 양식을 전송해 주는 버튼을 사용해서 다른 페이지로 이동합니다. ACTION 속성이 전송버튼을 눌렀을 때의 이동할 페이지를 작성하는 것입니다.
    • METHOD ☞데이터가 반환되는 유형을 결정하는 것으로 post방식과 get방식이 있는데, 기본값은 get이며, post 방식이 많이 사용됩니다. 간단히 설명하자면 POST방식은 입력된 내용을 일반 사용자가 볼 수 없도록 숨긴 채로 넘기는 방법이고, GET방식은 브라우저의 주소표시줄에 작성된 내용을 볼 수 있도록 하는 방법입니다.
      		•

    POST 일반적으로 문서가 DB화 될 경우 사용합니다. 즉, 방명록, 게시판이 이에 해당됩니다.
    GET 일반적으로 검색엔진이나 카운터처럼 결과만을 보여줄 때 많이 사용합니다.

FORM태그 의 속성

ACTION
<FORM ACTION="URL, PATH">
입력 양식을 처리할 CGI애플리케이션이 위치한 경로를 지정합니다.
ENCTYPE
<FORM ENCTYPE="MINE 타입">
입력 양식을 서버에 보내는 데 사용될 MINE 타입을 입력합니다. 이것의 종류에는 "multipart/form-data" , "application/x-www-form-urlencoded" , "text/plain"이 있는데 기본값은 "application/x-www-form-urlencoded"입니다.
(※ 참고 : ENCTYPE determines how the form data is encoded. Whenever data is transmitted from one place to another, there needs to be an agreed upon means of representing that data. Music is translated into written music notation, English is written using letters and punctuation. )
METHOD
<FORM METHOD="GET, POST">
입력 양식을 처리할 페이지로 보낼 때의 전송 방법을 입력합니다. GET방식과 POST방식이 있습니다.
NAME
<FORM NAME="이름">
FORM의 이름을 입력합니다. NAME 속성은 프로그램 사용에 있어 해당 FORM에 접근하기 위한 식별자가 됩니다.
TARGET
<FORM TARGET="FRAME 이름">
FORM의 출력 결과를 나타낼 프레임을 입력합니다.


CGI(Common Gateway Interface)란?

  1. (FORM) 태그 내부의 데이터를 서버측으로 전송하기 위하여 CGI를 사용하게 됩니다.
  2. 즉, 웹브라우저를 클라이언트라 하면 클라이언트에서 폼에 데이터를 입력한 다음 전송 버튼을 클릭하면 서버측에서는 이 데이터를 받아 처리합니다. 이때 서버측에서 실행되는 프로그램을 CGI라고 합니다.
  3. CGI는 C, Visual Basic, Perl, PHP, ASP 등을 이용하여 작성할 수 있습니다.
  4. 폼을 작성할 때 'name'이라는 속성을 주게 되는데 CGI에서는 이 이름으로 데이터를 구분하게 됩니다. 즉, name 속성의 값과 유저가 입력한 값이 한 쌍이 되어 서버측에 전달되어 처리됩니다.


PHP와 ASP란?

PHP와 ASP는 CGI 프로그램에 많이 사용된 PERL, C와 대적할 만한 프로그래밍 언어로 HTML 문서 내부에 포함되어 웹 서버에서 실행할 수 있는 스크립트입니다.
  • PHP - 다른 기종 서버간의 이식도 간편하며 여러 가지 확장적인 면에서 기존의 펄(Perl)보다 유용한 언어로 인식되고 있으며, LINUX나 UNIX 뿐만 아니라 MS 계열의 서버에서도 무난하게 작업할 수 있는 언어입니다.
  • ASP - MS사에서 만들어낸 언어로 PHP와 동일하게 컴파일이 필요하지 않은 언어입니다. MS사에서 만들어냈다는 이유만으로 기존의 서버 컴포넌트를 이용하여 개발에 속도를 붙일 수 있는 장점이 있습니다.


CGI와 JavaScript의 차이점은?

  1. CGI 프로그램은 서버측에서 실행되고 JavaScript는 클라이언트측에서 실행됩니다.
  2. CGI 프로그램은 HTML 문서에 포함될 필요가 없지만 JavaScript는 반드시 HTML 안에 포함되어 사용됩니다.
  3. CGI 프로그램이 웹 브라우저에 출력해주는 형태는 HTML문이고, JavaScript는 HTML문 속에서 태그 사이에 삽입된 스크립트로 표현됩니다.



3. INPUT 태그


  1. FORM 입력 양식의 대부분을 만드는 태그입니다.
  2. (INPUT)태그를 간단히 정리하면 (FORM)태그와 (/FORM)태그 사이에 위치하며, 사용자로부터 값을 입력받을 때 사용합니다.
  3. (INPUT)태그로 여러 가지 입력 폼을 만들 때 그 형태를 결정하는 것이 TYPE속성입니다.

INPUT TYPE의 종류

TEXT 한 줄의 비교적 간단한 텍스트를 입력할 때 사용합니다. 보통 SITE에서 회원가입할 때 많이 보셨을겁니다. 회원 ID나 비밀번호 등을 예로 들 수 있습니다. 보통 텍스트 박스라고 합니다. 여러 줄을 입력할 때는 TEXTAREA를 사용합니다.
PASSWORD 화면에 나타날 때는 텍스트 박스와 같지만 숫자나 문자를 입력할 때는 다릅니다. 입력한 값이 보이지 않습니다. 비밀번호나 주민등록번호 등 다른 사람에게 보이면 안될 내용을 입력할 때 사용합니다. 입력된 내용이 *나 다른 모양으로 나타납니다.
SUBMIT 전송버튼이라는 것은 입력 폼에 입력된 내용을 FORM 태그의 ACTION속성값으로 입력된 위치로 전송합니다. 이 버튼을 제대로 사용하려면 스크립트 언어를 알아야 하므로 HTML 단독으로는 사용되지 않습니다. 그러나 필수 항목의 입력 여부를 검사할 수 있도록 BUTTON을 많이 사용합니다. VALUE 속성을 입력하지 않으면 '쿼리전송'이 기본값으로 나타납니다.
RESET 양식에 입력된 모든 내용을 원래 상태로 되돌립니다. 내용을 전체적으로 다시 작성할 때 사용합니다. VALUE 속성을 입력하지 않으면 '원래대로'가 기본값으로 나타납니다.
BUTTON 특별한 기능을 갖고 있지는 않고 버튼 모양으로 나타납니다. 일반적으로 스크립트와 같이 사용합니다. VALUE 속성을 입력하지 않으면 아무런 텍스트도 나타나지 않습니다.
IMAGE TYPE 속성값을 IMAGE로 지정하면 SUBMIT으로 입력했을 경우와 같은 기능을 가지면서, 일반적인 버튼 모양 대신 SRC 속성에 입력한 이미지가 나타납니다.
CHECKBOX 여러 항목을 한꺼번에 선택할 수 있는 확인란을 만듭니다.
RADIO 남, 여와 같이 한 폼에서 꼭 한 가지만 선택할 수 있는 확인란을 만듭니다.
FILE 메일에 파일을 첨부하거나 요즘 웹에서 많은 서비스를 제공하고 있는 파일 관리 등 컴퓨터에 있는 파일을 찾아야 할 경우 사용합니다. 이 속성값을 사용하면 파일을 찾아 볼 수 있는 버튼이 생기는데, 이 버튼을 클릭하면 파일을 찾을 수 있는 창이 나타납니다.
HIDDEN 화면상에는 보이지 않으며, 사용자가 볼 필요 없는 특정 데이터를 저장할 필요가 있을 때 사용합니다. 이것도 스크립트 언어를 같이 사용하지 않을 경우는 거의 필요 없는 속성값입니다.


INPUT 태그의 속성

ALIGN
<INPUT TYPE="IMAGE" ALIGN="LEFT, RIGHT, TOP, MIDDLE, BOTTOM">
TYPE이 IMAGE일 경우에 사용되는 것으로 IMG 태그의 ALIGN 속성과 같습니다.
CHECKED
<INPUT TYPE="RADIO" CHECKED>
TYPE이 RADIO나 CHECKBOX일 경우 페이지가 열리면서 기본적으로 체크가 되게 지정하는 것입니다. 속성값은 따로 없습니다.
DISABLED
<INPUT TYPE="PASSWORD" DISABLED>
비활성화시켜서 FOCUS와 입력값을 못 받게 하여 변경이 불가능하게 만듭니다. 단순히 보여주는 기능만 할 때 사용합니다. 화면에서는 흐릿하게 보입니다. 넷스케이프 4.7에서는 지원되지 않습니다.
MAXLENGTH
<INPUT TYPE="TEXT" MAXLENGTH="길이">
TYPE이 TEXT나 PASSWORD일 경우 입력값의 길이를 제한합니다.
NAME
<INPUT TYPE="PASSWORD" NAME="PASS">
각 INPUT태그마다 이름을 붙여서, 입력 양식을 처리할 페이지에서 각각에 대해 식별하게 할 필요가 있을 때 사용합니다.
READONLY
<INPUT TYPE="PASSWORD" DISABLED>
DISABLED와 비슷하나 흐릿해 보이지는 않습니다. 익스플로러만 지원합니다.
SIZE
<INPUT TYPE="TEXT" SIZE="길이">
TYPE이 TEXT나 PASSWORD일 경우 그 크기를 정합니다. 익스플로러와 넷스케이프의 크기가 다르게 적용됩니다.
SRC
<INPUT TYPE="IMAGE" SRC="파일경로">
TYPE이 IMAGE일 경우 이미지의 경로를 지정합니다.
TABINDEX
<INPUT TYPE="RADIO" TABINDEX="숫자">
탭 순서를 지정합니다. 입력하지 않으면 브라우저의 위에서 아래로, 왼쪽에서 오른쪽 순서대로 이동합니다. 예를 들어 TABINDEX="3"을 사용하면 방문자들이 탭 키를 세 번 누르면 해당 입력 요소에 커서가 위치하게 됩니다. 익스플로러에서만 지원됩니다.
TYPE
<INPUT TYPE="TEXT, PASSWORD, SUBMIT, RESET, BUTTON, CHECKBOX, RADIO, FILE, HIDDEN">
입력양식의 종류를 결정합니다. 그 종류에는 TEXT, PASSWORD, SUBMIT, RESET, BUTTON, CHECKBOX, RADIO, FILE, HIDDEN 등이 있습니다.
VALUE 입력 양식의 기본값을 입력합니다. 브라우저가 로딩되면서 입력 양식에 기본값을 부여할 경우에 사용합니다. SUBMIT, RESET, BUTTON에서 속성값이 버튼 위로 나타나 버튼의 용도를 나타냅니다. 텍스트 박스나 비밀번호 입력란의 경우 미리 값이 입력된 채로 나타나고, 그 외 다른 요소는 해당 값이 사용자에게 보이지 않으며, 스크립트 언어가 사용될 때 유용합니다.
ACCESSKEY 단축키를 지정합니다. ALT와 함께 속성값에 사용된 키를 사용합니다. SUBMIT, RESET, BUTTON일 경우에는 클릭한 것과 같은 효과를 내고, 다른 요소는 포커스를 옮기는 것과 같습니다. 익스플로러에서만 지원됩니다.