작성자

freewebkorea

카테고리

비밀번호

제목

<H2>Form Collection</H2>
<P class=mtext>Form Element는 <INPUT readOnly align=middle size=9 value="이렇게 생긴"> 입력란 속에 정보 들을 입력한 다음&nbsp;<INPUT style="BORDER-RIGHT: 2px outset; BORDER-TOP: 2px outset; BORDER-LEFT: 2px outset; BORDER-BOTTOM: 2px outset; BACKGROUND-COLOR: buttonface" readOnly align=middle size=3 value=요런> 단추를 눌러서 어떤 값을 <B>전송</B>한다든지 할 때 사용하는, 입력 양식에 관련된 Element 중 <B>최상위 Element</B> 입니다. 즉 모든 입력 관련 Element 들(input, select, textarea)은 <SPAN style="COLOR: #941919"><B>&lt;form&gt; ... &lt;/form&gt;</B></SPAN> 사이에 들어가게 됩니다. 그렇기 때문에 form element와 form 속에 들어가는 입력 Tag을 Form Collection이라고 부릅니다. 이번 페이지에서는 Form Element의 속성과 사용법에 대해 알아 보도록 하져.</P><B>Form 의 사용 목적</B> 
<P class=mtext>Form의 사용 목적은 우리가 어떤 정보를 찾으려고 할 때 자주 사용하는 검색엔진이나, 게시판에 글을 쓴다든가, 어떤 사이트에 가입할 때 작성하는 회원 가입 양식에 이르기 까지 매우 다양하다 할 수 있습니다. Form 을 사용하므로 해서 비로소 <B>Interactive</B> 한 사이트가 된다고 할 수 있습니다. <BR><BR>사실 Form Element는 HTML Element 중에 하나임이 분명하지만 JavaScript에서 다루는 이유는 어떤 값들을 입력란에 받아서 전송하는 과정에서 JavaScript가 반드시 사용되어야 하기 때문입니다. 예를 들어 잘 못 된 입력값을 판별하여 alert 메시지를 띄운다든지, 양식에 입력란이 많을 경우 잘못된 값을 전송하드라도 입력한 값이 사라지는게 아니라 , 이미 입력한 값을 다시 돌려 주어 처음부터 다시 입력하는 번거로움을 없앤다든지 하는 경우가 JavaScript가 필요한 이유가 되겠습니다. 그러면 Form Element의 속성에 대해 알아 보겠습니다.</P>
<TABLE class=dtd width="100%">
<CAPTION class=general><B>legend</B> : <B>o</B>ptional, <B>f</B>orbidden, <B>e</B>mpty, <B>d</B>eprecated, <B>l</B>oose dtd, <B>f</B>rameset dtd &nbsp;[<A href="http://www.cadvance.org/doc/html/beginner/html_element.asp#dtd">표 보는 방법</A>] </CAPTION>
<TBODY>
<TR class=qlookttltr>
<TD>element 
<TD>start tag 
<TD>end tag 
<TD>empty 
<TD>deprecated 
<TD>dtd 
<TR class=qlookvaluetr>
<TD>form 
<TD>&nbsp; 
<TD>&nbsp; 
<TD>&nbsp; 
<TD>&nbsp; 
<TD>&nbsp; </TD></TR></TBODY></TABLE><BR><BR>
<TABLE class=attributeTbl cellSpacing=2 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=titleCell colSpan=2>Form Element</TD></TR>
<TR>
<TD class=syntaxLeftCellShort>name</TD>
<TD class=syntaxRightCell>Scriting 할 때 호출할 이름. *xhtml의 경우 name 속성 대신 id를 사용하거나 name과 id를 동시에 사용합니다.</TD></TR>
<TR>
<TD class=syntaxLeftCellshort>method</TD>
<TD class=inlineRightCellTitle width="80%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=RightCellTitle width="80%" colSpan=2>입력한 데이터를 전송하는 방식으로 post와 get 방식이 있으며 필요에 따라 구분하여 사용합니다.</TD></TR>
<TR>
<TD class=inlineLeftCellshort width="15%">post</TD>
<TD class=inlineRightCell width="85%">보안을 요하는 사항이나 256Byte 이상의 데이터를 전송할 때 사용</TD></TR>
<TR>
<TD class=inlineLeftCellshort>get</TD>
<TD class=inlineRightCell>검색 사이트처럼 검색어를 주소창에 보여 줄 필요가 있을 때 사용. 256Byte 이내의 데이터 전송.</TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD class=syntaxLeftCell>action</TD>
<TD class=syntaxRightCell>전송하는 데이터를 받아서 처리 할 파일(HTML, ASP, CGI등)의 <SPAN class=cursor onclick=TdOverLayer(uri); onmouseout=TdOutLayer()>uri</SPAN></TD></TR>
<TR>
<TD class=syntaxLeftCellshort>target</TD>
<TD class=inlineRightCellTitle width="80%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=RightCellTitle width="80%" colSpan=2>처리된 결과를 출력할 창(Window) 또는 Frame</TD></TR>
<TR>
<TD class=inlineLeftCellshort width="15%">_self</TD>
<TD class=inlineRightCell width="85%">Default. 현재 창에 출력</TD></TR>
<TR>
<TD class=inlineLeftCellshort>_blank</TD>
<TD class=inlineRightCell>새 창을 열어서 출력</TD></TR>
<TR>
<TD class=inlineLeftCellshort>_parent</TD>
<TD class=inlineRightCell>Frameset page에서 자신의 한 단계 상위 프레임에 출력</TD></TR>
<TR>
<TD class=inlineLeftCellshort>_top</TD>
<TD class=inlineRightCell>Frameset page에서 최상위 프레임에 출력</TD></TR>
<TR>
<TD class=inlineLeftCellshort>특정 Frame</TD>
<TD class=inlineRightCell>Frameset page에서 name 속성으로 이름 준 frame 창에 출력</TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD class=syntaxLeftCellshort>accept-charset</TD>
<TD class=inlineRightCellTitle width="80%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=RightCellTitle width="80%" colSpan=2>Server로 전송되어 처리 될 문자세트의 각 나라 별 언어를 지정 합니다. <A href="http://www.cadvance.org/doc/css/pseudo/charset.asp#charset_table">여기</A>도 참고해 보세요. 사용시 표기명을 기입해 주면 됩니다.</TD></TR>
<TR>
<TD class=inlineLeftCellshort width="15%">예 1)</TD>
<TD class=inlineRightCell width="85%">한국어 : accept-charset="euc-kr"</TD></TR>
<TR>
<TD class=inlineLeftCellshort>예 2)</TD>
<TD class=inlineRightCell>영어(ISO) : accept-charset="iso-8859-1"</TD></TR>
<TR>
<TD class=inlineLeftCellshort>예 3)</TD>
<TD class=inlineRightCell>8Bit Unicode : accept-charset="UTF-8"</TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD class=syntaxLeftCellshort>enctype</TD>
<TD class=inlineRightCellTitle width="80%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=RightCellTitle width="80%" colSpan=2>Data가 Server에 전송되어 Server에서 Encoding 되는 형식을 지정합니다. 기본값은 "application/x-www-form-urlencoded" 이며 <B>method 속성의 값이 post</B> 일 경우에만 유효합니다. 전송되는 Data type이 html, css, javascript, vbscript 등 text type 의 웹 언어일 경우 그 언어의 성격을 적어 줍니다. 또한 input Element의 type(type="file"과 같이) 속성을 사용하여 file을 Upload하려고 할 경우 "multipart/form-data" 형식을 <B>사용 하여야</B> 합니다.</TD></TR>
<TR>
<TD class=inlineLeftCellshort width="15%">text type</TD>
<TD class=inlineRightCell width="85%">enctype="text/html", enctype="text/tcl", enctype="text/vbscript" <BR>여러 type일 경우아래와 같이 comma로 구분해서 나열합니다.<BR>enctype="text/html, text/javascript, text/vbscript"</TD></TR>
<TR>
<TD class=inlineLeftCellshort>file type</TD>
<TD class=inlineRightCell>enctype="multipart/form-data" input element 가 file type일 경우.</TD></TR>
<TR>
<TD class=inlineLeftCellshort>UrlEncode</TD>
<TD class=inlineRightCell>Default. 즉, 지정하지 않았을 경우.</TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD class=syntaxLeftCellShort>공통 속성</TD>
<TD class=inlineRightCellTitle width="80%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=RightCellTitle width="80%" colSpan=2>dir, id, class, style, title, 발생하는 Event는 <A href="http://www.cadvance.org/doc/html/beginner/basic_structure.asp#common_attribute">공통 속성표 </A>를 참조 </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR><B>Form Element 사용 예</B> 
<P class=mtext>Form element 속에 들어가는 input, select 등의 Element를 사용한 예를 하나 들어 보겠습니다. Input, Select, Option 등은 다음 페이지에 나오지만 아래와 같이 모든 form 관련 Element 들이 form Element 속에 들어 간다는 하나의 예 입니다.</P><B class=pos>form 예제</B> <PRE class=input id=form_sample>&lt;body&gt;
&lt;form action="../include/view.asp" method="post" id="sample" name="sample"&gt;
    &lt;input type="file" accept="multipart/form-data" id="upload" name="upload" size="30" /&gt;
    &lt;br /&gt;
    &lt;input type="text" id="text" name="text" size="30" value="text 입력하는 곳 입니다." /&gt;
    &lt;br /&gt;
    &lt;select name="list"&gt;
        &lt;option value="one" selected="selected"&gt;첫 번째 선택 항목&lt;/option&gt;
        &lt;option value="two"&gt;두 번째 선택 항목&lt;/option&gt;
        &lt;option value="three"&gt;세 번째 선택 항목&lt;/option&gt;
    &lt;/select&gt;&lt;br /&gt;
    &lt;input type="submit" value="보내기" /&gt;
    &lt;input type="reset" value="다시 입력" /&gt;
&lt;/form&gt;
&lt;/body&gt;
</PRE><A href="javascript:copy2Clipboard(form_sample);open_window('../../../include/code_executor.asp');"><IMG alt="코드 실행 하기" src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A><BR><BR><BR>
<HR class=blackHr>

첨부파일

Tel. 042-353-2371

평일 오전 9시 ~ 오후 7시

기업은행

010-8649-6758

예금주:제주사랑(송진아)