- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!-- 현재 작성하고 있는 파일은 UTF-8 DOS파일입니다.-->
- <html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- </head>
- <body>
- <form> - <input> 사용법<br />
- <b><input> 사용자가 데이터를 입력 할 수있는 입력 필드를 지정합니다.</b><br /><br />
- ( 속성-type, accept, align, alt, checked, disabled, maxlength, name, size, src, value) <br />
- ( HTML5추가 속성-autocomplete, autofocus, formactionN, formenctype, formmethod, <br />
- <span style="padding-left:140px;"></span> formtarget,height, multiple, placeholder, width, <br />
- <span style="padding-left:140px;"></span>-> 브라우저가 덜 지원하는 속성 <br />
- <span style="padding-left:140px;"></span>form, formnovalidate, list, max, min, pattern, required, step, required ) <br />
- <br />
- 속성-type값 리스트(속성값이 많음;;)<br />
- button, checkbox, file, hidden, image, password, radio, reset, submit, text <br />
- (HTML5추가 - color, date, datetime, datetime-local, email, <br />
- <span style="padding-left:105px;">month, number, range, search, tel, time, url, week)<br />
- <br />
- <input> 사용자가 데이터를 입력 할 수 입력 컨트롤을 <br />
- 선언하는 <form>요소 내에서 사용됩니다. <br />
- 입력 필드의 유형 특성에 따라 여러 가지 방법으로 변화 할 수있습니다.<br />
- align은 HTML 4.01, 속성이 사용되지 않고 HTML5에서 지원되지 않지만, CSS 대신할수 있습니다.<br />
- <input> 태그는 직접 해보셔야 이해가 빠릅니다. <br />
- XHTML에서 <input> 태그가 제대로이 <input의 />처럼 닫아야합니다.<br />
- <br />
- <hr />
- <div id="ex_view2">
- <script type="text/javascript" language="javascript">
- <!--
- /* 텍스트상자 클릭시 빈칸으로 초기화 */
- function input_type_getfocus(btn_value){
- switch(btn_value){
- case "atte_password": document.input_type.atte_password.value = "";
- /* case "atte_password": document.global_attributes_from.atte_password.value = ""; */
- break;
- case "atte_text": document.input_type.atte_text.value = "";
- /* case "atte_text": document.global_attributes_from.atte_text.value = ""; */
- break;
- }
- }
- /* 버튼 클릭시 메세지 알림창 */
- function btn_click_massage(){
- alert("이르지 마셈 안되요~ㅋㅋ");
- return;
- }
- //-->
- </script>
- <style type="text/css">
- <!--
- .input_atte_value{ border-collapse:collapse; }
- .input_atte_value th{ text-align:left; }
- .input_atte_value td{ padding-left:10px; }
- -->
- </style>
- <form name="input_type" id="input_type" method="post" >
- <!-- 예제 박스에선 안됨 => form태그안에 form태그있으면 지워짐~ㅠ.ㅠ -->
- <p><b>예제 - <input>속성 type값 리스트</b></p>
- <table border=1 class="input_atte_value">
- <tr>
- <th><input type="button"=></th><td><input type="button" name="atte_button" value="atte_button" /></td>
- </tr>
- <tr>
- <th><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>
- </tr>
- <tr>
- <th><input type="file"=></th><td><input type="file" name="atte_file" value="atte_file" /></td>
- </tr>
- <tr>
- <th><input type="hidden"=></th><td><input type="hidden" name="atte_hidden" value="atte_hidden" /></td>
- </tr>
- <tr><a id="image_top" style="visibility:hidden;">이미지 책갈피</a>
- <th><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>
- </tr>
- <tr>
- <th><input type="password"=></th><td><input type="password" name="atte_password" id="atte_password" value="atte_password" onfocus="input_type_getfocus(this.value);" /></td>
- </tr>
- <tr>
- <th><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>
- </tr>
- <tr>
- <th><input type="reset"=></th><td><input type="reset" name="atte_reset" value="atte_reset" /></td>
- </tr>
- <tr>
- <th><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>
- </tr>
- <tr>
- <th><input type="text"=></th><td><input type="text" name="atte_text" id="atte_text" value="atte_text" onfocus="input_type_getfocus(this.value);" /></td>
- </tr>
- </table>
- <p><b>예제 - <accept>속성</b></p>
- <table border=1 class="input_atte_value">
- <tr>
- <th><input accept="audio/*"=></th><td><input type="file" name="atte_accept_audio" value="atte_accept_audio" accept="audio/*"/></td>
- </tr>
- <tr>
- <th><input accept="video/*"=></th><td><input type="file" name="atte_accept_video" value="atte_accept_video" accept="video/*"/></td>
- </tr>
- <tr>
- <th><input accept="image/*"=></th><td><input type="file" name="atte_accept_video" value="atte_accept_video" accept="image/*"/></td>
- </tr>
- <tr>
- <th><input accept="MIME_type"=></th><td><input type="file" name="atte_accept_MIME_type" value="atte_accept_MIME_type" accept="text/html"/></td>
- <!--MIME_type => http://www.iana.org/assignments/media-types/ -->
- </tr>
- </table>
- <p><b>예제 - <align>속성(css으로[HTML5에선 지원 안해주므로...])</b></p>
- <table border=1 class="input_atte_value">
- <tr>
- <th><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"/>
- <span style="clear:right; "> </span>
- </td>
- </tr>
- </table>
- <p><b>예제 - <alt>속성(원래 아래 그림처럼 나와야 하는데 <br />
- 설정에서 이미지 없으면 다른 그림이 나오게 해놔서;;)<br /></b></p>
- <table border=1 class="input_atte_value">
- <tr>
- <th><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>
- </tr>
- </table>
- <p><b>예제 - <checked>속성(체크된 상태)<br /></b></p>
- <table border=1 class="input_atte_value">
- <tr>
- <th><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>
- </tr>
- </table>
- <p><b>예제 - <disabled>속성(선택불가)<br /></b></p>
- <table border=1 class="input_atte_value">
- <tr>
- <th><input type="text" disabled=></th><td><input type="text" name="atte_disabled" id="atte_disabled" value="atte_disabled" disabled/></td>
- </tr>
- </table>
- <p><b>예제 - <maxlength>속성(문자길이제한)<br /></b></p>
- <table border=1 class="input_atte_value">
- <tr>
- <th><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>
- <!-- 문자17길이체크와 event.keyCode가 백스페이스 인지 확인 후 알림창 -->
- </tr>
- </table>
- <p><b>예제 - <size>속성(요소 화면 크기 지정)<br /></b></p>
- <table border=1 class="input_atte_value">
- <tr>
- <th><input type="text" size="12"=></th><td><input type="text" size="12" name="atte_size" id="atte_size" value="atte_size" /></td>
- </tr>
- </table>
- <p><b><a href=#image_top>예제 - <src>속성(URL) 이미지일때 쓰는 속성 생략...<br />위 이미지 참고[<input type="image" src="URL"=>]<br /></a></b></p>
- <p><b>예제 - <name>속성(이름지정)이건 생략...무진장 썼기 때문<br /></b></p>
- <p><b>예제 - <value>속성(값지정)이건 생략...무진장 썼기 때문<br /></b></p>
- <form> - <label> 사용법<br />
- <b><label> <input>요소에 대한 레이블을 정의합니다.</b><br /><br />
- <br />
- <hr />
- <br />
- ( 속성-for )( HTML5추가 속성-form )<br />
- 사용자에 대한 특별한 아무것도 렌더링하지 않습니다. <br />
- 사용자가 <label> 요소 내의 텍스트를 클릭하면 <br />
- 제어를 전환하기 때문에 마우스 사용감 개선을 제공합니다.<br />
- 태그의 속성들을 함께 결합하는 관련 요소의 id 속성과 같아야합니다.<br />
- <label> 태그는 직접 해보셔야 이해가 빠릅니다. <br />
- <br />
- <hr />
- <p><b>예제 - <label>속성(<input>요소에 대한 id 레이블)<br /></b></p>
- <table border=1 class="input_atte_value">
- <tr>
- <th><label for="id_value"=></th><td><label for="atte_checkbox_label1">체크1</label> <label for="atte_checkbox_label2">체크2</label></td>
- </tr>
- <tr>
- <th><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>
- </tr>
- </table>
- </form>
- </div>
- </body>
- </html>
--------------------------------------------------------------------------------------------
위 소스 예제 보기
<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 지원합니다.
'HTML > xhtml문법' 카테고리의 다른 글
<button></button> 클릭 할 수 있는 버튼 생성 (0) | 2014.01.24 |
---|---|
<textarea></textarea> 여러 줄 텍스트 입력 (0) | 2014.01.22 |
<form></form> 폼 양식 속성 설명 (0) | 2014.01.22 |
<table> - 부가기능 태그들 사용법(<caption><colgroup><col><span><thead><tbody><tfoot>) (0) | 2014.01.22 |
<table>-<tr>-<th></th><td></td> 테이블 헤더셀과 기본셀 (0) | 2014.01.22 |