폼 다루기 기본 |
../ |
폼은 사용자가 text 상자에 글자를 입력하고 radio, selection으로 선택한 선택사항을 CGI에게 보내는 일을 주로 합니다. 입력한 폼 정보를 CGI에게 보내기 전에 검사를 하거나 이들을 다룰수 있습니다.
<script language="JavaScript">
function gg() {
alert(document.forms[0].elements[0].value)
}
</script>
<form>
<input type="text" value="Enter Please">
<input type="button" value="입력값 보기" onClick="gg()">
</form>
이미지같이 폼도 자신의 배열로 페이지에 위치합니다. <body> 속에 있으므로
document.forms 로 각 폼을 접근할 수 있습니다. 위의 폼이 페이지 첫번째에 있는 폼이라면
document.forms[0].elements[0]로 첫번째 폼의 첫번째 요소를 접근할 수 있습니다.
두번째 폼의 첫번째 요소는 document.forms[1].elements[0]로 지정합니다.
그리고 폼이 가지고 있는 각 요소도 elements라는 요소의 배열로 접근할 수 있습니다.
그래서 위의 폼 입력상자에 입력한 글자를 보기 위해서는 document.forms[0].elements[0].value 로 하면
입력한 글자를 볼 수 있습니다.
<HTML> <BODY> <FORM> <INPUT TYPE="text" VALUE="값"> </FORM> </BODY> </HTML>위의 페이지는 아래의 DOM 구조를 가집니다.
window
:
document
:
forms[0]
:
elements[0]
:
value
로 각 객체의 구조로 접근할 수 있습니다. 마지막에 폼의 요소들의 속성값들이 옵니다. 위에서는
type="text"의 value 값입니다.
실제의 모든 폼에는 폼의 순서나 요소의 순서로 다루지 않고 직접 이름을 지정하고 다루는 방법을 사용합니다. 폼의 내용을 CGI에 보내기 위해서는 폼이 가지고 있는 모든 요소에는 이름이 있어야 하기 때문입니다.
<script language="JavaScript">
function gg() {
alert(document.form1.text1.value)
}
</script>
<form name="form1">
<input type="text" value="Enter Please" name="text1">
<input type="button" value="입력값 보기" onClick="gg()">
</form>
위의 식으로 이름을 지정하고 다루는 방법이 일반적으로 많이 사용합니다.
폼이 페이지에 있는 순서인 배열과 각 지정한 이름을 같이 섞어서 사용할 수도 있지만 CGI에 보낼때는
이름이 있어야 하고 이름으로 직접 제어하는 것이 순서로 제어하는 것보다 안전하고 알기 쉽기 때문입니다.
폼 요소의 속성 다루기 |
<FORM name="formName"> <INPUT TYPE="radio" NAME="ra" VALUE="0" checked> <INPUT TYPE="radio" NAME="ra" VALUE="1"> <INPUT TYPE="radio" NAME="ra" VALUE="2"> </FORM>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가지중에서 아무거나 지정해 주면 선택을 해제하고 그외는 선택하게 합니다.
CHECKBOX : 여러개의 선택 상자에서 radio와는 다르개 선택한 모든 상자가 선택될 수 있습니다. checkbox는 radio와는 다르게 각 상자가 배열로 지정되어 있지 않습니다. 각기 고유의 이름을 가집니다. 그리고 checked에 false, null, '', 0 으로 4가지 중에서 하나를 지정하면 선택을 해제하고 그외에 true나 0이 아닌 숫자, 문자등은 선택하게 합니다. 아래는 두번째의 checkbox e를 선택하게 합니다.
<a href="#" onClick="document.form1.e.checked=1"></a>
radio와 checkbox는 value 값을 지정하지 않으면 기본으로 "on" 문자열이 지정됩니다.
submit으로 보낸다면 선택한 것만 submit되고 value를 지정하지 않으면 checkboxName=on
이 submit됩니다.
<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을 선택합니다.
<a href="#" onClick="document.fo2.sel[5].selected=true"></a>여기서 해제는 없고 막대를 없엘 수 있습니다. 아래로 2번째 막대를 지웁니다.
<a href="#" onClick="document.fo2.sel[1]=null"></a>
폼에서의 ID와 NAME의 차이 |
<IMG src="img1.jpg" name="img1"> <script> document.img1.src = "img2.jpg" </script>로 하면 "img1.jpg" 이미지를 "img2.jpg"로 바꿀 수 있습니다. 이렇게 'name' 속성은 다루고자하는 택에게 이름을 지정하는 속성입니다. DHTML을 지원하는 버젼4의 브라우저에서도 위의 구문은 잘 작동합니다. 반면에 'ID' 속성은 style을 택에게 지정하는 것과 동시에 택의 이름을 지정하는 속성입니다. 둘다 이름을 지정할 수 있어서 'name'에 익숙했던 사람은 다소 혼란스러울 수 있습니다. 비슷한 것들이지만 브라우저에 따라서 약간의 차이가 있습니다.
nn4같은 경우는 <LAYER> 택을 사용하지 않은 경우 택의 style을 다루기 위해서는 css-p 로만 다룰수 있으므로 꼭 'id'로만 지정하고 사용해야 합니다. <LAYER> 택에서는 'name', 'id' 둘다 같은 동작을 합니다.
<LAYER name=d1>LAYER 택</LAYER> <script> document.d1.left += 100 </script>로 하면 레이어가 오른쪽으로 100 pixel 이동합니다. ie4에서는 이런 동작을 하기 위해서 아래의 구문을 사용할 수 있습니다.
<DIV name=d1 style="position:relative">DIV 택</DIV> <script> document.all.d1.style.pixelLeft += 100 </script>위의 경우 'id'로 지정하지 않고 'name'으로 지정해도 오른쪽으로 100 pixel 이동합니다. 즉, nn4에서 id를 지정하면 css-p 만으로 사용할 수 있지만 ie4는 'name', 'id' 둘다 같은 택을 가리킵니다. 그래서 폼 안에 있는 한 text를 다룰때
<FORM name="form1">
<INPUT TYPE="text" VALUE="111" id = "text1">
</FORM>
으로 'text1' text 상자를 다룰려면 ie4는 아래의 2가지 방식을 사용할 수 있습니다.
document.form1.text1.value = "222" document.all.text1.value = "222"로 둘 중에서 하나를 사용하면 'text1' 상자의 값이 "222"로 지정됩니다. 반면에 nn4는 아래처럼 'name'을 사용하는 기존의 방법을 사용하여야 합니다.
<FORM name="form1">
<INPUT TYPE="text" VALUE="111" name = "text1">
</FORM>
document.form1.text1.value = "222"
class 선택자는 단순히 style을 지정하는 형식입니다. 그래서 이름과는 아무런 상관이 없기 때문에 사용할 수 없습니다. 그래서 페이지의 각 요소를 다룰려고 할 때에는 "name", 이나 "ID"를 사용할 수 있지만 "ID"는 주로 DHTML 효과를 낼때에 사용합니다. 폼에는 JavaScript1.1 부터 사용하기 시작한 "name"을 사용하는 것이 nn3 이상의 대부분의 브라우저가 지원하고 공통된 DOM을 사용하기 때문에 폼에 관하여서는 "name"을 사용합니다. 이것이 안전하기 때문입니다.
--
낙서판의 질문이 없었다면 페이지 추가하기도 힘드네요..
추가할 페이지도 생각나지 않고 지난 보름동안 술집을 돌아 다니기만 했으니.. 모니터를 보면
술먹을 때만 생각나고.. 머리는 찌끈 거리고 속은 쓰리고.. 아무래도 세기말적인 현상이 저에게
일어나나 봅니다. 빨리 21세기가 왔으면.. -_-