작성자

freewebkorea

카테고리

비밀번호

제목

<H2>INPUT Element</H2>
<P class=mtext>Input element는 Form 관련 element 중에서 가장 많이 사용되는 Element로서 text 입력란, Radio button, Check box 등을 만드는 Element로서 Form 양식의 대 부분을 차지하는 만큼 자주 사용합니다. Input Element가 가지고 있는 속성(Attribute)부터 알아 보겠습니다.</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>INPUT 
<TD>&nbsp; 
<TD>F 
<TD>E 
<TD>&nbsp; 
<TD>&nbsp; 
<TR class=qlookvaluetr>
<TD>TEXTAREA 
<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>Input Element</TD></TR>
<TR>
<TD class=syntaxLeftCell>name</TD>
<TD class=syntaxRightCell>Scripting 할 때 호출할 이름입니다. 가장 중요하므로 먼저 넣었습니다. 자세한 내용은 뒤 에서 다루므로 생략합니다.</TD></TR>
<TR>
<TD class=syntaxLeftCellshort>type<A name=input_type></A></TD>
<TD class=inlineRightCellTitle>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=RightCellTitle colSpan=2>type attribute는 한 마디로 입력 양식에서 어떤 역할을 하는 입력 형식인가를 지정하는 attirbute 라고 할 수 있습니다.</TD></TR>
<TR>
<TD class=inlineLeftCellshort width="15%">text<BR>Default.</TD>
<TD class=inlineRightCell style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px" width="85%">text를 입력 받을 경우에 사용합니다. Default 값이므로 type을 지정하지 않으면 text type이 되고, 아래의 source code 처럼 value 속성을 사용하면 value 값이 출력되어 나옵니다.<BR><BR><INPUT> <INPUT value="입력해 주세요."><BR><BR><B>Source code</B> 
<DIV class=input style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px">&lt;form&gt;<BR>&lt;input /&gt; &lt;input type="<B>text</B>" <B>value</B>="입력해 주세요." /&gt;<BR>&lt;/form&gt; </DIV></TD></TR>
<TR>
<TD class=inlineLeftCellshort>password</TD>
<TD class=inlineRightCell style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">password 와 같이 다른 사람이 내용을 보아서 안될 때 모든 문자를 asterisk(*)형태로 나타냅니다. <BR><BR>&nbsp;pw : <INPUT type=password><BR><BR><B>Source code</B> 
<DIV class=input style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px">&lt;form&gt;<BR>pw : &lt;input type="<B>password</B>" /&gt;<BR>&lt;/form&gt; </DIV></TD></TR>
<TR>
<TD class=inlineLeftCellshort>checkbox</TD>
<TD class=inlineRightCell style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">여러 개의 항목 중에서 1개 이상을 선택하게 할 때 나타나는 4각형 box 로서 클릭하면 check 표시나 나타납니다. 아래의 Source code와 같이 name 속성 값이 같은 것 끼리 그룹이 됩니다. 또 <SPAN style="COLOR: #2e8b57"><B>checked="ckecked"</B></SPAN> 와 같이 <B>checked</B> 속성을 사용하면 그 항목이 미리 ckeck 되어 나옵니다. checkbox의 경우 여러개의 input element에 사용할 수 있습니다.<BR><BR>할 줄 아는 Web language를 선택하세요.<BR><INPUT type=checkbox CHECKED value=HTML name=web_language>HTML <INPUT type=checkbox CHECKED value=PHP name=web_language>PHP <INPUT type=checkbox value=ASP name=web_language>ASP<BR><BR><B>Source code</B> 
<DIV class=input style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px">&lt;form&gt;<BR>할 줄 아는 Web language를 선택하세요.&lt;br /&gt;<BR>&lt;input type="<B>checkbox</B>" name="<B>web</B>" value="HTML" <SPAN style="COLOR: #2e8b57"><B>checked="checked"</B></SPAN> /&gt;HTML<BR>&lt;input type="<B>checkbox</B>" name="<B>web</B>" value="PHP" <SPAN style="COLOR: #2e8b57"><B>checked="checked"</B></SPAN> /&gt;PHP<BR>&lt;input type="<B>checkbox</B>" name="<B>web</B>" value="ASP" /&gt;ASP<BR>&lt;/form&gt; </DIV></TD></TR>
<TR>
<TD class=inlineLeftCellshort>radio</TD>
<TD class=inlineRightCell style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">여러 개의 항목 중에서 1개 만을 선택하게 할 때 사용되는 원형 음각 모양으로 설문조사 등에 주로 사용되는 type 입니다. 위의 checkbox와 마찬 가지로 name 속성값이 같은 것 끼리 그룹이 되기 때문에 선택이 다른 그룹에 서로 영향을 주지 않습니다. <SPAN style="COLOR: #2e8b57"><B>checked="ckecked"</B></SPAN> 와 같이 <B>checked</B> 속성을 사용하면 그 항목이 미리 check 되어 나오지만 radio type의 경우 여러개를 선택할 수 없으므로 아래와 같이 끝에 사용된 input element가 check 됩니다.<BR><BR>이 사이트에 있는 강좌가 맘에 드시는지요?<BR><INPUT type=radio CHECKED name=eval>아이~ 저아라 <INPUT type=radio name=eval>난 물러유~ <INPUT type=radio name=eval>아핫~따 꼬지구마이~<BR><BR>"결혼해 주세요"를 경상도 말로 하면?<BR><INPUT type=radio name=marry>임마 이거 비싸다. <INPUT type=radio name=marry>내는 싸다~ <INPUT type=radio CHECKED name=marry>내 아~를 낳도~<BR><BR><B>Source code</B> 
<DIV class=input style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WORD-BREAK: break-all; TEXT-ALIGN: left; BORDER-RIGHT-WIDTH: 0px">&lt;form&gt;<BR>이 사이트에 있는 강좌가 맘에 드시는지요?&lt;br /&gt;<BR>&lt;input type="<B>radio</B>" name="<B><SPAN style="COLOR: #941919">eval</SPAN></B>" <SPAN style="COLOR: #2e8b57"><B>checked="checked"</B></SPAN> /&gt;아이~ 저아라<BR>&lt;input type="<B>radio</B>" name="<B><SPAN style="COLOR: #941919">eval</SPAN></B>" /&gt;난 물러유~<BR>&lt;input type="<B>radio</B>" name="<B><SPAN style="COLOR: #941919">eval</SPAN></B>" /&gt;아핫~따 꼬지구마이~<BR>&lt;br /&gt;&lt;br /&gt;<BR><BR>"결혼해 주세요"를 경상도 말로 하면?&lt;br /&gt;<BR>&lt;input type="<B>radio</B>" name="<B><SPAN style="COLOR: #0033cc">marry</SPAN></B>" <SPAN style="COLOR: #2e8b57"><B>checked="checked"</B></SPAN> /&gt;임마 이거 비싸다.<BR>&lt;input type="<B>radio</B>" name="<B><SPAN style="COLOR: #0033cc">marry</SPAN></B>" /&gt;내는 싸다~<BR>&lt;input type="<B>radio</B>" name="<B><SPAN style="COLOR: #0033cc">marry</SPAN></B>" <SPAN style="COLOR: #2e8b57"><B>checked="checked"</B></SPAN> /&gt;내 아~를 낳도~<BR>&lt;/form&gt; </DIV></TD></TR>
<TR>
<TD class=inlineLeftCellshort>submit</TD>
<TD class=inlineRightCell style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">Form에 입력된 Data를 전송하는 Button을 만듭니다. <BR><BR><INPUT type=submit value="쿼리 전송"><INPUT type=submit value=보내라!><BR><BR><B>Source code</B> 
<DIV class=input style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px">&lt;form&gt;<BR>&lt;input type="<B>submit</B>" /&gt;<BR>&lt;input type="<B>submit</B>" value="보내라!" /&gt;<BR>&lt;/form&gt; </DIV></TD></TR>
<TR>
<TD class=inlineLeftCellshort>reset</TD>
<TD class=inlineRightCell style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">입력란에 입력한 모든 내용을 지우고 다시 입력하게 하는 Button을 만듭니다.<BR><BR><INPUT type=reset value=원래대로><INPUT type=reset value="다시 할란다..."><BR><BR><B>Source code</B> 
<DIV class=input style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px">&lt;form&gt;<BR>&lt;input type="<B>reset</B>" /&gt;<BR>&lt;input type="<B>reset</B>" value="다시 할란다..." /&gt;<BR>&lt;/form&gt; </DIV></TD></TR>
<TR>
<TD class=inlineLeftCellshort>file</TD>
<TD class=inlineRightCell style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">Upload할 file을 선택하기 위해 찾아보기 Button을 만듭니다. 이 경우 아래의 Source code에서 처럼 accept 속성을 사용하여 Upload할 file의 형식을 지정합니다.<BR><BR><INPUT style="FONT-SIZE: 12px; WIDTH: 100%" type=file accept=multipart/form-data><BR><BR><B>Source code</B> 
<DIV class=input style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px">&lt;form&gt;<BR>&lt;input type="<B>file</B>" <B>accept</B>="multipart/form-data" /&gt;<BR>&lt;/form&gt; </DIV></TD></TR>
<TR>
<TD class=inlineLeftCellshort>hidden</TD>
<TD class=inlineRightCell style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">보이기 않게 값을 받을 경우에 사용합니다. 주로 입력 양식의 전송을 실패 했을 때 처음부터 다시 입력하지 않도록 입력 값을 받아 놓았다가 복귀시켜 주기 위해 사용합니다. (보이지 않으므로 Source code만 있음.)<BR><BR><B>Source code</B> 
<DIV class=input style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px">&lt;form&gt;<BR>&lt;input type="<B>hidden</B>" /&gt;<BR>&lt;/form&gt; </DIV></TD></TR>
<TR>
<TD class=inlineLeftCellshort>image</TD>
<TD class=inlineRightCell style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">Button 대신 image를 넣고 싶을 때 사용하며 기능은 submit과 동일합니다. 아래의 Source code 를 보면 알겠지만 Img Element에서 처럼 <B>src</B> 를 사용하여 image의 uri를 지정해 줍니다.<BR><BR><INPUT type=image src="http://www.cadvance.org/doc/images/icon/input_image.gif"><BR><BR><B>Source code</B> 
<DIV class=input style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px">&lt;form&gt;<BR>&lt;input type="<B>image</B>" <B>src</B>="image file의 <SPAN class=cursor onclick=TdOverLayer(uri); onmouseout=TdOutLayer()>uri</SPAN>" /&gt;<BR>&lt;/form&gt; </DIV></TD></TR>
<TR>
<TD class=inlineLeftCellshort>button</TD>
<TD class=inlineRightCell style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">Button을 만들 때 사용합니다. 아래의 Source code에서 <B>value</B>에 입력한 값이 단추 이름이 됩니다.<BR><BR><INPUT type=button value="Push me"><BR><BR><B>Source code</B> 
<DIV class=input style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px">&lt;form&gt;<BR>&lt;input type="<B>button</B>" value="<B>Push me</B>" /&gt;<BR>&lt;/form&gt; </DIV></TD></TR></TBODY></TABLE></TD></TR>
<TR><A name=disabled>
<TD class=syntaxLeftCellShort>disabled</TD></A>
<TD class=syntaxRightCell>disabled 속성은 <INPUT disabled type=submit value=다음 t> 단추 처럼 비활성화(inactive)된 상태를 지정하는 속성인데, 하나의 예를 들자면 아래와 같이 어떤 내용에 동의할 것인지 아닌지의 여부를 선택해야 비로소 활성화(active)되는 상태를 만들어 주는 속성입니다. 아마도 많이 겪어 본 경험 들이 있으시져? 위의 9가지 input type에 다 적용 시킬 수 있지만 hidden 에는 써도 무의미 하겠죠? 기껏 감춰놓고 못 쓰게 한다고 누가 알기나 하겠습니까... Source code 는 name 속성의 scripting 과 함게 Form Event에서 설명하겠습니다.<BR><BR>이 약관에 항복 하시겠습니까?<BR><BR>항복<INPUT onclick=document.all.ok.disabled=false;document.all.no.disabled=true; type=radio name=agree>&nbsp; 저항<INPUT onclick=document.all.ok.disabled=true;document.all.no.disabled=false; type=radio CHECKED name=agree><BR><BR><INPUT disabled type=button value=다음으로 name=ok> <INPUT type=reset value=나가기 name=no><BR><BR></TD></TR>
<TR>
<TD class=syntaxLeftCellShort>size</TD>
<TD class=syntaxRightCell>text type의 입력란의 가로 길이를 지정합니다. 기본 값은 style로 font size를 지정하지 않았을 경우 소문자 'x' 20(150px정도)글자가 들어 갑니다.</TD></TR>
<TR>
<TD class=syntaxLeftCellShort>maxlength</TD>
<TD class=syntaxRightCell style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">text type의 입력란에 입력 하는 글자 수를 제한 합니다. 좋은 예로 주민등록번호 앞에 6자리와 뒤의 7자리는 변하지 않으므로 아래와 같이 제한을 두면 지정한 수 이상으로 입력이 제한 됩니다.<BR><BR>주민등록번호 : <INPUT maxLength=6> - <INPUT maxLength=7><BR><BR><B>Source code</B> 
<DIV class=input style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px">&lt;form&gt;<BR>주민등록번호 : &lt;input maxlength="6" /&gt; - &lt;input maxlength="7" /&gt;<BR>&lt;/form&gt; </DIV></TD></TR>
<TR>
<TD class=syntaxLeftCellshort>accept</TD>
<TD class=inlineRightCellTitle>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=RightCellTitle colSpan=2>&lt;input type="file" /&gt; 일 경우 Upload 되는 파일의 Media 형식을 지정합니다. "text/html", "image/png", "image/gif", "video/mpeg", "audio/basic", "text/tcl", "text/javascript", "text/vbscript" 등이 있습니다. </TD></TR>
<TR>
<TD class=inlineLeftCellshort width="15%">예)</TD>
<TD class=inlineRightCell width="85%">&lt;input type="file" accept="image/gif" /&gt;</TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD class=syntaxLeftCellShort>value</TD>
<TD class=syntaxRightCell>checkbox, radio, file, hidden, image type을 제외한 나머지 input type에 사용하면 value 값이 출력되어 나옵니다. 특히 type이 submit이나 reset일 경우 value를 사용하지 않으면 submit은 "쿼리 전송", reset은 "원래대로"가 기본값이 됩니다.</TD></TR>
<TR>
<TD class=syntaxLeftCellshort>readonly</TD>
<TD class=inlineRightCellTitle>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=RightCellTitle style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px" width="80%" colSpan=2>이 속성은 text type input이나 textarea에 입력한 문자열을 말 그대로 볼 수만 있게 하는 속성입니다. 이런 속성이 필요한 이유는 예를 들어 회원가입을 하고 회원이 자기의 정보를 변경할 경우 개인 정보가 창이 나타나는데, 이 때 ID 같이 바꾸면 안되는 항목을 변경할 수 없게 할 필요가 있을 경우 사용합니다. 즉, 선택은 되어도 고칠 수는 없습니다. 그래서 이런 경우 오른 쪽과 같이 배경색이나 글자색을 다르게 주어 구분해 주져. 얼마나 아름다운 배려입니까...<BR><BR><INPUT readOnly value=Kerrigan>&nbsp;&nbsp;<INPUT style="BACKGROUND-COLOR: #dcdcdc" readOnly value=Kerrigan>&nbsp;&nbsp;<INPUT style="COLOR: #941919" readOnly value=Kerrigan><BR><BR><B>Source code</B> 
<DIV class=input style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px">&lt;form&gt;<BR>&lt;input type="text" value="Kerrigan" <B>readonly="readonly"</B> /&gt;<BR>&lt;input type="text" value="Kerrigan" readonly="readonly" <B>style="background-color:#dcdcdc;"</B> /&gt;<BR>&lt;input type="text" value="Kerrigan" readonly="readonly" <B>style="color:#941919;"</B><BR>&lt;/form&gt; </DIV></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD class=syntaxLeftCellShort>공통 속성</TD>
<TD class=inlineRightCellTitle>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=RightCellTitle 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>
<HR class=grayHr>
<BR><B>TEXTAREA Element</B> 
<P class=mtext>Textarea Element는 input text type과 같이 문자열을 입력받는 입력란을 만드는 것은 같지만 input 과 달리 많은 양의 문자열을 입력 받습니다.</P>
<TABLE class=attributeTbl cellSpacing=2 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=titleCell colSpan=2>Textarea Element</TD></TR>
<TR>
<TD class=syntaxLeftCell width="12%">name</TD>
<TD class=syntaxRightCell>Scripting 할 때 호출할 이름입니다. 역시 자세한 내용은 뒷 페이지에서 다루므로 생략합니다.</TD></TR>
<TR>
<TD class=syntaxLeftCell>cols</TD>
<TD class=syntaxRightCell>1 행당 입력할 수 있는 글자 수를 지정합니다. 역시 영문 소문자 'x' 의 갯수가 기준입니다.</TD></TR>
<TR>
<TD class=syntaxLeftCell>rows</TD>
<TD class=syntaxRightCell>입력할 수 있는 행 수를 지정합니다. 만약 stylesheet를 사용하여 font size를 지정하였다면 Pixel size는 각각 달라집니다.</TD></TR>
<TR>
<TD class=syntaxLeftCell>disabled</TD>
<TD class=syntaxRightCell>INPUT Element 참조.</TD></TR></TBODY></TABLE><BR><BR><B>사용 예</B> 
<DIV class=input>&lt;textarea cols="50" rows="10" name="long_text"&gt;내용을 입력하세요.&lt;/textarea&gt; </DIV><BR><BR><B>결과</B><BR><TEXTAREA style="FONT: 11px Verdana" name=long_text rows=10 cols=50>내용을 입력하세요.</TEXTAREA> 
<P class=mtext>위의 사용 예는 rows와 cols로 크기를 지정한 예 이지만 만약 정확한 크기를 만들고 싶다면 역시 <B>Style Sheet</B> 밖에 없겠군요. 아래는 Style sheet로 width와 height를 지정하여 크기를 지정한 예제입니다.</P><B>CSS 로 크기 지정</B> 
<DIV class=input>&lt;textarea style="<B>width:100%; height:150px;</B>"&gt;내용을 입력하세요.&lt;/textarea&gt; </DIV><BR><BR><B>결과</B><BR><TEXTAREA style="FONT: 11px Verdana; WIDTH: 100%; HEIGHT: 150px" name=long_text>내용을 입력하세요.</TEXTAREA> <BR><BR>
<HR class=blackHr>

첨부파일

Tel. 042-353-2371

평일 오전 9시 ~ 오후 7시

기업은행

010-8649-6758

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