1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <!-- 현재 작성하고 있는 파일은 UTF-8 DOS파일입니다.-->
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
  4.   <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.   </head>
  7.   <body>
  8.   &lt;form&gt; - &lt;input&gt; 사용법<br />
  9.   <b>&lt;input&gt; 사용자가 데이터를 입력 할 수있는 입력 필드를 지정합니다.</b><br /><br />
  10.     ( 속성-type, accept, align, alt, checked, disabled, maxlength, name, size, src, value) <br />
  11.     ( HTML5추가 속성-autocomplete, autofocus, formactionN, formenctype, formmethod,  <br />
  12.     <span style="padding-left:140px;"></span> formtarget,height, multiple, placeholder, width, <br />
  13.     <span style="padding-left:140px;"></span>-> 브라우저가 덜 지원하는 속성 <br />
  14.     <span style="padding-left:140px;"></span>form, formnovalidate, list, max, min, pattern, required, step, required ) <br />
  15.     <br />
  16.     속성-type값 리스트(속성값이 많음;;)<br />
  17.     button, checkbox, file, hidden, image, password, radio, reset, submit, text <br />
  18.     (HTML5추가 - color, date, datetime, datetime-local, email,  <br />
  19.      <span style="padding-left:105px;">month, number, range, search, tel, time, url, week)<br />
  20.     <br />
  21.     &lt;input&gt; 사용자가 데이터를 입력 할 수 입력 컨트롤을 <br />
  22.     선언하는 &lt;form&gt;요소 내에서 사용됩니다. <br />
  23.     입력 필드의 유형 특성에 따라 여러 가지 방법으로 변화 할 수있습니다.<br />
  24.     align은 HTML 4.01, 속성이 사용되지 않고 HTML5에서 지원되지 않지만, CSS 대신할수 있습니다.<br />
  25.     &lt;input&gt; 태그는 직접 해보셔야 이해가 빠릅니다. <br />
  26.     XHTML에서 &lt;input&gt; 태그가 제대로이 &lt;input의 /&gt;처럼 닫아야합니다.<br />
  27.     <br />
  28.     <hr />
  29.     <div id="ex_view2">
  30.    
  31.     <script type="text/javascript" language="javascript">
  32.     <!--
  33.     /* 텍스트상자 클릭시 빈칸으로 초기화 */
  34.     function input_type_getfocus(btn_value){
  35.     switch(btn_value){
  36.     case "atte_password": document.input_type.atte_password.value = "";
  37.     /* case "atte_password": document.global_attributes_from.atte_password.value = ""; */
  38.     break;
  39.     case "atte_text": document.input_type.atte_text.value = "";
  40.     /* case "atte_text": document.global_attributes_from.atte_text.value = ""; */
  41.     break;
  42.     }
  43.     }
  44.     /* 버튼 클릭시 메세지 알림창 */
  45.     function btn_click_massage(){
  46.     alert("이르지 마셈 안되요~ㅋㅋ");
  47.     return;
  48.     }
  49.         //-->
  50.       </script>
  51.       <style type="text/css">
  52.       <!--
  53.        .input_atte_value{ border-collapse:collapse; }
  54.        .input_atte_value th{ text-align:left; }
  55.        .input_atte_value td{ padding-left:10px; }
  56.       -->
  57.       </style>
  58.       <form name="input_type" id="input_type" method="post" >
  59.       <!-- 예제 박스에선 안됨 => form태그안에 form태그있으면 지워짐~ㅠ.ㅠ -->
  60.      <p><b>예제 - &lt;input&gt;속성 type값 리스트</b></p>
  61.       <table border=1 class="input_atte_value">
  62.       <tr>
  63.       <th>&lt;input type="button"=></th><td><input type="button" name="atte_button" value="atte_button" /></td>
  64.       </tr>
  65.       <tr>
  66.       <th>&lt;input type="checkbox"=></th><td>checkbox1<input type="checkbox" name="atte_checkbox" value="atte_checkbox" />checkbox2<input type="checkbox" name="atte_checkbox" value="atte_checkbox" /></td>
  67.       </tr>
  68.       <tr>
  69.       <th>&lt;input type="file"=></th><td><input type="file" name="atte_file" value="atte_file" /></td>
  70.       </tr>
  71.       <tr>
  72.       <th>&lt;input type="hidden"=></th><td><input type="hidden" name="atte_hidden" value="atte_hidden" /></td>
  73.       </tr>
  74.       <tr><a id="image_top" style="visibility:hidden;">이미지 책갈피</a>
  75.       <th>&lt;input type="image" src="URL"=></th><td><input type="image" name="atte_image" value="atte_image" src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/roydest_log.jpg" alt="log"/></td>
  76.       </tr>
  77.       <tr>
  78.       <th>&lt;input type="password"=></th><td><input type="password" name="atte_password" id="atte_password" value="atte_password" onfocus="input_type_getfocus(this.value);" /></td>
  79.       </tr>
  80.       <tr>
  81.       <th>&lt;input type="radio"=></th><td>radio1<input type="radio" name="atte_radio" value="atte_radio" />radio2<input type="radio" name="atte_radio" value="atte_radio" /></td>
  82.       </tr>
  83.       <tr>
  84.       <th>&lt;input type="reset"=></th><td><input type="reset" name="atte_reset" value="atte_reset" /></td>
  85.       </tr>
  86.       <tr>
  87.       <th>&lt;input type="submit"=><br />(error땜에 button으로...(주석 참조)</th><td><!-- <input type="submit" name="atte_submit" value="atte_submit"  onclick="btn_click_massage();" /> --><input type="button" name="atte_submit" value="atte_submit"  onclick="btn_click_massage();" /></td>
  88.       </tr>
  89.       <tr>
  90.       <th>&lt;input type="text"=></th><td><input type="text" name="atte_text" id="atte_text" value="atte_text"  onfocus="input_type_getfocus(this.value);" /></td>
  91.       </tr>
  92.         </table>
  93.         
  94.      <p><b>예제 - &lt;accept&gt;속성</b></p>
  95.       <table border=1 class="input_atte_value">
  96.       <tr>
  97.       <th>&lt;input accept="audio/*"=></th><td><input type="file" name="atte_accept_audio" value="atte_accept_audio" accept="audio/*"/></td>
  98.       </tr>
  99.       <tr>
  100.       <th>&lt;input accept="video/*"=></th><td><input type="file" name="atte_accept_video" value="atte_accept_video" accept="video/*"/></td>
  101.       </tr>
  102.       <tr>
  103.       <th>&lt;input accept="image/*"=></th><td><input type="file" name="atte_accept_video" value="atte_accept_video" accept="image/*"/></td>
  104.       </tr>
  105.       <tr>
  106.       <th>&lt;input accept="MIME_type"=></th><td><input type="file" name="atte_accept_MIME_type" value="atte_accept_MIME_type" accept="text/html"/></td>
  107.       <!--MIME_type => http://www.iana.org/assignments/media-types/ -->
  108.       </tr>
  109.         </table>
  110.         
  111.      <p><b>예제 - &lt;align&gt;속성(css으로[HTML5에선 지원 안해주므로...])</b></p>
  112.       <table border=1 class="input_atte_value">
  113.       <tr>
  114.       <th>&lt;input style="align:right;"=></th><td style="width:250px;"><input type="image" style="float:right;" name="atte_align" value="atte_align" src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/roydest_log.jpg" alt="log"/>
  115.       <span style="clear:right; "> </span>
  116.       </td>
  117.       </tr>
  118.         </table>
  119.         
  120.      <p><b>예제 - &lt;alt&gt;속성(원래 아래 그림처럼 나와야 하는데 <br />
  121.       설정에서 이미지 없으면 다른 그림이 나오게 해놔서;;)<br /></b></p>
  122.       <table border=1 class="input_atte_value">
  123.       <tr>
  124.       <th>&lt;input alt="텍스트이미지"=></th><td><input type="image" name="atte_align" value="atte_align" src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/noturl.jpg" alt="텍스트이미지"/></td>
  125.       </tr>
  126.         </table>
  127.         
  128.      <p><b>예제 - &lt;checked&gt;속성(체크된 상태)<br /></b></p>
  129.       <table border=1 class="input_atte_value">
  130.       <tr>
  131.       <th>&lt;input  type="checkbox" checked=></th><td>checkbox1<input type="checkbox" name="atte_checkbox" value="atte_checkbox" />checkbox2<input type="checkbox" name="atte_checkbox" value="atte_checkbox" checked/></td>
  132.       </tr>
  133.         </table>
  134.         
  135.      <p><b>예제 - &lt;disabled&gt;속성(선택불가)<br /></b></p>
  136.       <table border=1 class="input_atte_value">
  137.       <tr>
  138.       <th>&lt;input  type="text" disabled=></th><td><input type="text" name="atte_disabled" id="atte_disabled" value="atte_disabled" disabled/></td>
  139.       </tr>
  140.         </table>
  141.         
  142.      <p><b>예제 - &lt;maxlength&gt;속성(문자길이제한)<br /></b></p>
  143.       <table border=1 class="input_atte_value">
  144.       <tr>
  145.       <th>&lt;input  type="text"  maxlength="17"=></th><td><input type="text" name="atte_maxlength" id="atte_maxlength" value="atte_maxlength" maxlength="17" onkeydown="javascript:if(this.value.length == 17 && event.keyCode!=8) alert('17문자길이제한입니다.');"/></td>
  146.       <!-- 문자17길이체크와 event.keyCode가 백스페이스 인지 확인 후 알림창 -->
  147.       </tr>
  148.         </table>
  149.         
  150.      
  151.      <p><b>예제 - &lt;size&gt;속성(요소 화면 크기 지정)<br /></b></p>
  152.       <table border=1 class="input_atte_value">
  153.       <tr>
  154.       <th>&lt;input  type="text"  size="12"=></th><td><input type="text" size="12" name="atte_size" id="atte_size" value="atte_size" /></td>
  155.       </tr>
  156.         </table>
  157.         
  158.      <p><b><a href=#image_top>예제 - &lt;src&gt;속성(URL) 이미지일때 쓰는 속성 생략...<br />위 이미지 참고[&lt;input type="image" src="URL"=>]<br /></a></b></p>
  159.      <p><b>예제 - &lt;name&gt;속성(이름지정)이건 생략...무진장 썼기 때문<br /></b></p>
  160.      <p><b>예제 - &lt;value&gt;속성(값지정)이건 생략...무진장 썼기 때문<br /></b></p>
  161.     
  162.           &lt;form&gt; - &lt;label&gt; 사용법<br />
  163.     <b>&lt;label&gt; &lt;input&gt;요소에 대한 레이블을 정의합니다.</b><br /><br />
  164.         <br />
  165.         <hr />
  166.         <br />
  167.           ( 속성-for )( HTML5추가 속성-form )<br />
  168.      사용자에 대한 특별한 아무것도 렌더링하지 않습니다. <br />
  169.      사용자가 &lt;label&gt; 요소 내의 텍스트를 클릭하면 <br />
  170.      제어를 전환하기 때문에 마우스 사용감 개선을 제공합니다.<br />
  171.      태그의 속성들을 함께 결합하는 관련 요소의 id 속성과 같아야합니다.<br />
  172.         &lt;label&gt; 태그는 직접 해보셔야 이해가 빠릅니다. <br /> 
  173.         <br />
  174.         <hr />
  175.         <p><b>예제 - &lt;label&gt;속성(&lt;input&gt;요소에 대한 id 레이블)<br /></b></p>
  176.       <table border=1 class="input_atte_value">
  177.       <tr>
  178.       <th>&lt;label  for="id_value"=></th><td><label for="atte_checkbox_label1">체크1</label> <label for="atte_checkbox_label2">체크2</label></td>
  179.       </tr>
  180.       <tr>
  181.       <th>&lt;input  type="checkbox" =></th><td>checkbox1<input type="checkbox" name="atte_checkbox_label1" id="atte_checkbox_label1" value="label1" />checkbox2<input type="checkbox" name="atte_checkbox_label2"  id="atte_checkbox_label2" value="label2"/></td>
  182.       </tr>
  183.         </table>
  184.       </form>
  185.     </div>
  186.   </body>
  187. </html>

--------------------------------------------------------------------------------------------

위 소스 예제 보기


<input>, <input />

<label></label>


<input> 사용자가 데이터를 입력 할 수있는 입력 필드를 지정합니다.

속성-type, accept, align, alt, checked, disabled, maxlength, name, size, src, value

HTML5추가 속성-autocomplete, autofocus, formactionN, formenctype, formmethod, 

                        formtarget,height, multiple, placeholder, width

                        브라우저가 덜 지원하는 속성(HTML5추가 속성)

                        form, formnovalidate, list, max, min, pattern, required, step, required

속성-type값 리스트(속성값이 많음;;)

button, checkbox, file, hidden, image, password, radio, reset, submit, text

(HTML5추가 - color, date, datetime, datetime-local, email


<label> <input>요소에 대한 레이블을 정의합니다.

속성-for, HTML5추가 속성-form


위 소스에서는 HTML5추가 속성은 생략했습니다.

그외 XHTML 소스의 예제는 위에서 보기로 보시고

아래 버튼 클릭하시면 설명이 나옵니다.

태그 속성 보기(접어두었습니다.)


Global Attributes 지원합니다.


:
BLOG main image

공지사항

카테고리

분류 (356)
main (1)
php5 (218)
HTML (36)
javascript (93)
IT 이론과 퍼온정보 (8)
깨작일상 (0)
곧 추가할 내용 (0)
추후 알아볼것들... (0)

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

달력

«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Total :
Today : Yesterday :