size="2">26. Input Type Form (I) - 텍스트, 암호, submit, reset

지난 강좌에 이어 Form에 대한 설명을
계속하겠습니다. 이해를 돕기 위해 전 강좌의 내용을 약간만 적을께요.

1) Form Tag
 

2) Form의 종류

• 텍스트(text)
  
• 암호(password)
  
• 체크박스(checkbox)
  
• 라디오버튼(radio button)
  
• 텍스트 영역(text area)
  
• 선택목록(list box)
  

3) 텍스트(text)
 

사용은 Form Tag와 함께 사용해야
합니다.

• type - type="text"
  라고 하면 입력되는 형식을 텍스트 형태로 처리하겠다는 것을 뜻하는
  것입니다.
  
• name - 프로그래밍할 때 변수를
  지정하는 것과 같은 원리입니다. name 이라는 항목으로 text input에
  이름을 주어 서버에서 작동하는 프로그램에 전달하기 위해서 사용합니다.
  name을 주면 페이지가 로딩될 때 자바 스크립트 등을 이용해서 원하는
  text input에 focus를 줄 수도 있습니다.
  
• size - text의 길이를 n byte
  만큼 글자가 들어갈 길이로 하겠다는 것입니다. text 모양의 길이를
  나타냅니다.
  
• maxlength - text에 들어갈
  수 있는 실제 글자의 길이를 byte로 정합니다. text에 들어갈 수
  있는 실제 문자의 길이를 정합니다.
  
• value - 서버로 넘길 값입니다.
  text input에 사용자가 입력한 값입니다.
  
• 아래의 예에서 메일 주소 항목을
  보면 메일 주소는 text input의 길이를 25 byte 만큼하고 최대로
  들어갈 수 있는 글자를 25 byte로 한정하겠다는 이야기입니다. 25
  바이트란 영문자나 숫자 25개가 들어갈 수 있는 길이를 말합니다.
  참고로 한글은 한 자가 2byte를 차지합니다.
  
• 그리고 value에 미리 값을 셋팅했습니다.
  Default로 값이 들어있어야 할 경우 아래와 같이 사용하면 편리합니다.
  
  

모양은 텍스트 입력과 같습니다.
아래의 소스와 형식을 참조하세요.

<FORM action="mail.cgi"
method="post">
    <font
size="2">
    받는 사람 메일
주소 :
    <INPUT type="text"
name="r_email" size="25" maxlength="25">

    <br>
    받는
사람 이름 :
    <INPUT type="text"
name="r_name" size="10" maxlength="10">

    <br>
    보내는
사람 메일 주소:
    <INPUT type="text"
name="s_email" size="25" maxlength="25"
value="marcel@shinbiro.com">
    <br>

    보내는 사람 이름 :
    <INPUT
type="text" name="s_name" size="10"
maxlength="10" value="쎌리">
    </font>

</FORM>

어렵지 않죠? 위와 같은 형태로 텍스트는
만들어 집니다.

4) 비밀번호
 

사용법은 text input과 동일합니다.
단지 차이가 있다면 type을 password로 주었다는 것입니다. 여러분 어느
사이트에 회원으로 가입하고 로그온 할 경우 아이디와 비밀번호 넣지요?
그리고 비밀번호에 키보드로 비밀번호를 입력하면 "*******"
와 같은 형태로 나타나죠? 이게 바로 password input을 사용한 것입니다.

<FORM action="mail.cgi"
method="post"><font size="2">
    아이디
:
    <INPUT type="text" name="id"
size="8" maxlength="8">
    <br>

    비밀번호 :
    <INPUT
type="password" name="password" size="8"
maxlength="8">
    <br>

</FORM>

사용된 항목은 위에서 설명한 것
처럼 text input과 동일합니다. 위에 아이디와 비밀번호를 적어보세요.
아이디는 입력한 문자가 나타나는데 비밀번호에는 "******"라고
적힐 겁니다.

5) Submit
 

입력창 (text input과 password input
등)에 입력된 값을 서버로 전송하기 위한 버튼의 형태입니다. value
값을 지정하지 않으면 아마 버튼 Label이 "쿼리 전송" 이라고
나타날 겁니다. Form에 입력된 내용을 보낸다는 뜻으로 이해하세요^^*

검색엔진이나 어느 사이트에 가입할
경우 "가입" 이나 "Search" 라는 버튼을 클릭하죠?
다음과 같이 하면 그렇게 나타납니다.

<INPUT type="submit"
value="확인"> 또는 <INPUT type="submit"
value="Search">

6) Reset
 

Form에 입력된 내용을 Clear할 경우에
사용하는 버튼의 형태입니다. 방명록이나 가입양식에서 입력된 내용을
Clear 하고자 할 경우 입력항목이 많은데 일일이 지우면 불편하죠? 이
버튼 하나면 한방에 끝납니다.

<FORM action="mail.cgi"
method="post">
    <font
size="2">
    받는 사람 메일
주소 :
    <INPUT type="text"
name="r_email" size="25" maxlength="25">

    <br>
    받는
사람 이름 :
    <INPUT type="text"
name="r_name" size="10" maxlength="10">

    <br>
    보내는
사람 메일 주소:
    <INPUT type="text"
name="s_email" size="25" maxlength="25"
value="marcel@shinbiro.com">
    <br>

    보내는 사람 이름 :
    <INPUT
type="text" name="s_name" size="10"
maxlength="10" value="쎌리">
    </font>

    <INPUT type="submit" value="메일
보내기">
    <INPUT type="reset"
value="화면 지우기">
</FORM>

<FORM action="mail.cgi"
method="post"><font size="2">
    아이디
:
    <INPUT type="text" name="id"
size="8" maxlength="8">
    <br>

    비밀번호 :
    <INPUT
type="password" name="password" size="8"
maxlength="8">
    <br>

    <INPUT type="submit" value="확인">

    <INPUT type="reset" value="취소">

</FORM>

이해가 되셨나요? 방명록이나 검색엔진
같은 것이 조금 이해가 가시죠? 야후나 심마니 같은 검색엔진이 검색창을
개인 홈페이지에 달 수 있도록 코드를 제공하죠? 오늘 내용만으로도
그 소스를 보면 어느 정도 이해가 가실겁니다.