繁星H5之旅-HTML5表单新增元素与属性

1、标签control属性
在HTML5中,可以在标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素。
  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="设置默认值" οnclick="setValue()">
  22.     </form>
  23. </body>
  24. </html>
复制代码
文本框placeholder属性
placeholder是指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时,模糊显示输入提示文字。
  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>
复制代码
文本框list属性

在HTML5中,为单行文本框增加了一个list属性,该属性的值为某个datalist元素的id。datalist元素也是HTML5中新增的元素,该元素类似于选择框,但是当用户想要设定的值不在选择列表之内时,允许自行输入。datalist元素本身并不显示,而是当文本框获得焦点时以提示输入的方式显示。
  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>
复制代码
文本框AutoComplete属性
  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>
复制代码
文本框的pattern属性

文本框的SelectionDirection属性

复选框的indeterminate属性

image提交按钮的height属性与width属性

转自解放号社区:http://bbs.jointforce.com/topic/25947

发布了0 篇原创文章 · 获赞 14 · 访问量 18万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览