JavaScript Home Page에 오신것을 환영합니다.

폼 HTML 쓰기	Go form

폼을 HTML로 사용하는 방법은 <FORM> 택을 사용합니다. <form>택이 가질 수 있는 택은 <INPUT>, <SELECT>, <TEXTAREA> 3개의 택을 가질 수 있고 <INPUT> 택은 type 라는 attribute에 Text, Password, Hidden, Radio , Checkbox , Button, Reset, Submit, file을 지정할 수 있고 <SELECT> 택은 <OPTION> 택을 가질 수 있습니다.

<form>
<input type=text value="VALUE">
</form>

위의 형식으로 사용합니다.

<option> 택은 선택상자인 <select> 택의 안에 들어있는 각 선택항목입니다.
<INPUT> 택의 type에 지정하는 것들은 각자의 기능이 있습니다.

<input type=button value="BUTTON 입니다.">

BUTTON : 마우스로 눌러서 어떤 일을 할 수 있는 사각형의 단추입니다.

<input type=text>

TEXT : 사용자가 간단한 문장을 입력할 수 있는 한 줄의 문자 입력상자입니다.

<input type=password>

PASSWORD : text type과 모양은 똑같지만 글자들을 입력하면 입력한 글자대신 암호를 나타내는 기호(*)가 입력됩니다. 단지 보이기만 그렇지 실제 자판(key)값은 저장합니다. 자신이 입력하는 암호같은 것을 다른 사람이 옆에서 모니터를 봐도 또는 다른 건물에서 망원경으로 봐도 모르게 하기 위해서 사용합니다. :)

<input type=submit>

SUBMIT : 전체 폼의 내용을 CGI나 페이지에 처리를 위해 보내는 일을 합니다.

<input type=image src="이미지.gif">

IMAGE : Submit 단추를 src에 지정한 이미지로 만듭니다. Submit과 같은 작동을 합니다. ie3.x 이상에서는 name을 같이 지정해야 됩니다. (미확인)

<input type=reset>

RESET : 입력한 글자나 선택을 모두 없애 버립니다. 모든 폼의 값을 초기화 합니다.

HIDDEN : 보이지 않는 text type라고 생각하면 됩니다. 보이지 않기 때문에 글자들을 입력할 수 없고 어떤 복잡한 폼의 처리에서 문자열을 저장할 수 있는 것입니다.

<INPUT TYPE="RADIO" NAME="ra" VALUE="0" checked> 
<INPUT TYPE="RADIO" NAME="ra" VALUE="1"> 
<INPUT TYPE="RADIO" NAME="ra" VALUE="2">

RADIO : 여러개의 선택 상자에서 오직 하나의 상자만 선택할 수 있는 type입니다. 하나를 선택하고 다른 radio 상자를 선택하면 먼저 선택되어 있는 radio 상자는 선택이 해제가 됩니다. RADIO는 이름이 같아야 합니다.

JavaScript로 radio를 다룰려면 각 radio는 공통된 이름을 가지고 그 이름의 배열로 제어합니다. document.formName.radioName[1] 은 2번째의 radio입니다. radio가 선택이 되었는지 아닌지는 document.formName.radioName[숫자].checked 가 선택은 true 선택되지 않았으면 false를 가집니다. 그리고 직접 마우스를 사용하지 않고 JavaScript로 선택하거나 해제할 수 있습니다. document.formName.radioName[숫자].checked 에 false, null, '', 0 으로 4가지중에서 아무거나 지정해 주면 선택을 해제하고 그외는 선택하게 합니다. 아래를 누르면 첫번째 radio를 해제합니다.

 
<input type=checkbox name=d> 
<input type=checkbox name=e> 
<input type=checkbox name=f>

CHECKBOX : 여러개의 선택 상자에서 radio와는 다르개 선택한 모든 상자가 선택될 수 있습니다.

checkbox는 radio와는 다르게 각 상자가 배열로 지정되어 있지 않습니다. 각기 고유의 이름을 가집니다. 그리고 checked에 false, null, '', 0 으로 4가지 중에서 하나를 지정하면 선택을 해제하고 그외에 true나 0이아닌 숫자, 문자등은 선택하게 합니다. 아래의 링크를 누르면 두번째의 checkbox e를 선택하게 합니다.

radio와 checkbox는 value 값을 지정하지 않으면 기본으로 "on" 문자열이 지정됩니다. submit으로 보낸다면 선택한 것만 submit되고 value를 지정하지 않으면 checkboxName=on 이 submit됩니다.

<input type=file>

FILE : 사용자의 하드디스크에 있는 화일을 서버에 보내거나 화일을 다루는 처리를 할 때 사용합니다. 화일을 찾는 단추와 화일 이름을 보여주는 text 상자로 구성되어 있습니다. 사용자가 지정한 화일의 값을 읽을 수는 있지만 보안으로 작성자가 지정하거나 수정할 수는 없습니다.

<FORM name=fo2>
	<SELECT name=sel>
		<OPTION>option 1
		<OPTION>option 2
		<OPTION>option 3
		<OPTION SELECTED>option 4
		<OPTION>option 5
		<OPTION>option 6
		<OPTION>option 7
	</SELECT>
</FORM>

<SELECT>택입니다. 한개를 선택할 수 있습니다.

selectbox도 radio와 마찬가지로 각 option 막대를 배열로 접근할 수 있습니다.
아래는 6번째의 option을 선택합니다.

여기서 해제는 없고 막대를 없엘 수 있습니다. 아래로 2번째 막대를 지웁니다.

<a href="#" onClick="document.fo2.sel[1]=null">

<textarea COLS="20" ROWS="5"></textarea>
<TEXTAREA> : 많은 글자를 입력할 수 있는 문자 입력상자입니다. 여러줄로 구성할 수 있습니다.

--
이들 폼 html에도 size, maxlength같은 많은 attribute가 있습니다. 이것들로 더 세밀하게 폼을 구성할 수 있습니다. HTML 설명서를 W3C에서 구해서 보세요..

IE4에서는 <BUTTON> 이라는 폼과 비슷한 택이 있습니다. <form> 택을 지정하지 않고 type=button 같은 단추를 만들 수 있습니다.

TOP Go to Form TOP