HTML5 양식의 새로운 요소 및 속성-H5 튜토리얼-php.cn

HTML5 양식의 새로운 요소 및 속성

PHPz

풀어 주다： 2017-03-12 15:56:09

원래의

1274명이 탐색했습니다.

1. 태그 control 속성

HTML5에서는 태그 안에 양식 요소를 배치하고 태그의 컨트롤을 전달할 수 있습니다. 양식 요소에 액세스하는 속성입니다.

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>Document</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9     function setValue(){10         var label=document.getElementById("label");11         var textbox=label.control;12         textbox.value=510006;13     }14 </script>15     <form>16     <label id="label">17     邮编：18         <input id="txt_zip" maxlength="6">19         <small>请输入六位数字</small>20     </label>21     <input type="button" value="设置默认值" onclick="setValue()">22     </form>23 </body>24 </html>

로그인 후 복사

텍스트 상자자리 표시자 속성

자리 표시자는 텍스트 상자가 입력되지 않은 상태일 때를 나타냅니다. 상태에 입력 프롬프트가 표시됩니다. 텍스트 상자가 입력되지 않은 상태이고 커서 포커스가 없으면 입력 프롬프트 텍스트가 흐리게 표시됩니다.

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>Placehoder属性</title> 6 </head> 7 <body> 8     <input type="text" placeholder="请输入用户名"> 9 </body>10 </html>

로그인 후 복사

텍스트 상자목록속성

HTML5에서는 한 줄에 목록이 추가됩니다. 텍스트 상자 속성에서 이 속성의 값은 데이터 목록 요소의 ID입니다. datalist 요소 역시 HTML5에 새로 추가된 요소입니다. 이 요소는 선택 상자와 유사하지만 사용자가 설정하려는 값이 선택 목록에 없는 경우 사용자가 직접 입력할 수 있습니다. 데이터 목록 요소 자체는 표시되지 않지만 텍스트 상자에 포커스가 있을 때 입력 프롬프트로 표시됩니다.

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>List属性</title> 6 </head> 7 <body> 8     <form> 9         <input type="text" name="zkdir" list="zkdir">10         <datalist id="zkdir" style="display: none;">11         <option value="HTML5学习">HTML5学习</option>12         <option value="CSS3学习">CSS3学习</option>13         <option value="JavaScript学习">JavaScript学习</option>14         </datalist>15     </form>16 </body>17 </html>

로그인 후 복사

텍스트 상자 자동 완성 속성

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>文本框AutoComplete属性</title> 6 </head> 7 <body> 8     <form> 9         <input type="text" name="zkdir" autocomplete="on" list="zkdir"> <!--autocomplete有两个值：on&off，不填写取决于当前浏览器的默认值-->10         <datalist id="zkdir" style="display: none;">11         <option value="HTML5学习">HTML5学习</option>12         <option value="CSS3学习">CSS3学习</option>13         <option value="JavaScript学习">JavaScript学习</option>14         </datalist>15     </form>16 </body>17 </html>

로그인 후 복사

텍스트 상자 패턴 속성

텍스트 상자의 선택

방향 속성

체크 상자의 불확정 속성

이미지 제출

버튼의 높이 속성과 너비 속성

위 내용은 HTML5 양식의 새로운 요소 및 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!