HTML5 양식의 새로운 요소 및 속성
- PHPz원래의
- 2017-03-12 15:56:091244검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.