Trio 홈페이지 - 문서에서 입력 작업(FORM)

문서에서 입력 작업(FORM)

<FORM></FORM>

HTML 문서에서 데이터를 주고 받을 때, <FORM>을 사용하며, 아래 엘레멘트들은 <FORM>과 </FORM> 사이에 위치하여야 한다.

입력이 된고 송신 될 때는 엘레멘트의 이름(name)과 값(value)이 짝을 지어 송신된다. 한 문서에 여러개의 <FORM>이 나올 수 있는데 name이 반드시 각기 달라야 한다. 성공적인 입력의 예를 들면

name='홍길동'
sex='남'
marry='미혼'
sel-member=selected
remark='엘레멘트 이름(name)과 값(value)을 임의로 넣은 예제 임.'

중요한 엘레멘트는

입력 INPUT
가능한 type 애트리뷰트는:
text, password, checkbox, radio, image, button, hidden 등이다.

다음장에서 다룸

단추 BUTTON
가능한 애트리뷰트는 name, value, type(submit, reset)
선택 SELECT, OPTION
가능한 애트리뷰트는 name, size, multiple
여러줄 텍스트 입력 TEXTAREA
가능한 애트리뷰트는 name, rows, cols

여기서는 중요한 사항 만 설명한다. FORM 전반에 관 한 자세한 것은 HTML 규격을 참조하라.

단순 텍스트(text) 입력: <INPUT type=text>

가장 단순한 텍스트를 입력 할 때 사용한다. 예제를 보면

<FORM>
입력 필드: <INPUT type="text" name="textname">
</FORM>

<INPUT>의 디폴트는 type="text"이고, 데이터를 입력하면, textname의 value="입력 데이터"가 된다. 그러나 여기서는 이 데이터를 어떻게 처리하라는 지시가 없다. 이를 지시하기 위하여,

<FORM method=post action="mailto:trioweb@hanmail.net"
	enctype="application/x-www-form-urlencoded">

이런 식으로 method와 action을 지정하여 어떻게 처리 할 것인가를 알려준다. 여기서 enctype="application/x-www-form-urlencoded"는 해석하는 방법(encoding)으로 디폴트이다.
입력 필드 이름(name)과 값(value)의 짝으로 송신된다.
최초값을 value="최초값"으로 지정 할 수 있다.
입력 필드의 글자수 크기를 size=10 maxlength=20로 지정 할 수 있다.

예제를 보면

<FORM name="formname2" method="post" action="mailto:trioweb@hanmail.net"
	enctype="application/x-www-form-urlencoded">
입력 필드: <INPUT type="text" name="textname1"
	value="최초값" size=10 maxlength=20>
</FORM>

암호 텍스트(text) 입력: <INPUT type="password">

<INPUT type=text>의 텍스트를 입력과 같으나, 입력 중 문자 대신에 ***로 보여준다는 것 만 다르다. 예제를 보면

<FORM name="formname3" method="post" action="mailto:trioweb@hanmail.net">
암호 입력: <INPUT  type="password" name="passname"
	value="최초값" size=10 maxlength=20>
</FORM>

체크박스(type="checkbox")와 레디오(type="radio") 단추 선택

체크박스(<INPUT type="checkbox">)와 레디오(<INPUT type="radio">) 단추는 거의 같다.

단지 레디오 단추에서는 배타적으로 한 가지 만 선택 할 수 있는데, 같은 선택 항목들의 name이 모두 같은 반면, value가 각각 다르다. 같은 <FORM> 안에서 여러개의 레디오 단추를 기재 할 때 name이 다르면, 다른 범주의 선택사항으로 간주하여 같은 name을 가진 것 중에서 배타적으로 선택 된다. 그래서 name이 틀리지 않도록 주의하여야 한다.

이에 반 해, 체크박스에서는 여러가지 혹은 전부 선택 혹은 하나도 선택하지 않을 수 있는데, 필드의 name이 각각 다르지 만 value는 모두 같다. 같은 <FORM> 안에서 name이 같으면 결과를 인식 할 수 없게 되므로 name이 틀리지 않도록 주의하여야 한다.

최초값을 지정 할 수 있는 checked를 태그 안에 명시하면, 당초부터 선택 된 것으로 인식한다. 물론 수정 할 수 있다. 결과로 입력 필드 이름(name)과 값(value)의 짝으로 송신된다.

예제를 보면

<FORM name="formname4" method="post" action="mailto:trioweb@hanmail.net">
현재 살고있는 곳은 ?<BR>
<INPUT type=radio name="living" value="seoul" checked>서울<BR>
<INPUT type=radio name="living" value="pusan">부산<BR>
<INPUT type=radio name="living" value="daegu">대구<BR><BR>

결혼하였는가 ?<BR>
<INPUT type=radio name="marry" value="yes">결혼<BR>
<INPUT type=radio name="marry" value="no" checked>미혼<BR><BR>

가보고 싶은 곳은?<BR>
<INPUT type=checkbox name="cityrome" value="yes">Rome<BR>
<INPUT type=checkbox name="cityparis" value="yes" checked>Paris<BR>
<INPUT type=checkbox name="citylondon" value="yes">London<BR>
<INPUT type=checkbox name="citynewyork" value="yes">New York
</FORM>

예제에서 위와 같이 선택 되었다면, 송신되는 값은
	living='seoul'
	marry='no'
	cityparis='yes'

단추(button) 입력: <INPUT type="button">과
이미지(image) 입력: <INPUT type="image">

<INPUT type=button>는 입력 단추를 만들고, <INPUT type=image>는 이미지 연결을 하여 이벤트에 작동하게 한다. 예제를 보면

<FORM name="formname5" method="post" action="mailto:trioweb@hanmail.net">
<INPUT  type="button" name="buttonname"
	value="단추 표시값"><BR><BR>
<INPUT  type="image" name="imagebutton" src="../../gif/vtstudyu.gif">
<INPUT  type="image" name="imagebutton" src="../../gif/vtstudyu.gif" border=0>
Netscape에서 두 이미지 테두리가 다름
</FORM>

그러나 사각형이 아닌 각이 지지 않은 투명한 이미지에서는 테두리가 보이지 않는다.
또한 스타일쉬트등으로 테두리가 표시되지 않게 미리 설정하는 방법도 있다.

감춘(hidden) 입력: <INPUT type="hidden">

<INPUT type=hidden>은 브라우저에 보이지 않게 변수를 전달 할 때 사용 된다. 예제를 보면

<FORM name="formname5" method="post" action="mailto:trioweb@hanmail.net">
<INPUT  type="hidden" name="hiddenname" value="감춰 전달 되는 값">아무것도 않보임<BR>
<INPUT type="button" name="hiddenbutton" value="감춰진 값 보기"
	 onClick="alert(formname6.hiddenname.value)">
</FORM>

HTML 규격의 INPUT에 대한 자세한 설명
HTML 규격의 INPUT type에 대한 자세한 설명
여기서는 중요한 사항 만 설명한다. FORM 전반에 관 한 자세한 것은 HTML 규격을 참조하라.

입력작업

이