HTML5技术

HTML5 表单及其他新增和改良元素 - 喵喵喵---

字号+ 作者:H5之家 来源:H5之家 2016-12-20 10:03 我要评论( )

1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了 form id= "testform" input type= "text"/form textarea form= "testform"/textarea 2. 表单内元素的

1. 表单内元素的form属性

在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了

<form id="testform"> <input type="text"> </form> <textarea form="testform"></textarea> 2. 表单内元素的formaction属性
  • 在H4中,表单的提交方式
  • <form action="1.jsp"> </form>

    提交整个表单

  • 在H5中,可以为表单的每一个属性添加提交到的jsp页面
  • <form action="1.jsp"> <input type="submit" action="1-1.jsp">提交到1页面</form> <input type="submit" action="1-2.jsp">提交到2页面</form> <input type="submit" action="1-3.jsp">提交到3页面</form> </form> 3. 表单内元素的formmethod属性

    可以对表单的每一个元素指定提交方法

    <form action="1.jsp"> <input type="submit" action="1-1.jsp" formmethod="post">提交到1页面,post提交方法</form> <input type="submit" action="1-2.jsp" formmethod="get">提交到2页面,get提交方法</form> </form> 4. 表单内元素的formenctype属性

    同上,作用与每一个元素,代码略

    5. 表单的formtarget属性

    同上,作用与每一个元素,代码略

    6.元素的autofocus属性

    为文本框、选择框和按钮控件等加上autofocus属性,画面打开时,将自动获得焦点。

    <input type="text" action="1-3.jsp" autofocus>提交到3页面</form>

    一个页面上只能有一个控件具有autofocus属性,不能滥用

    7. required属性

    可以用在大多数输入用的元素,若输入的值为空则不允许提交,游览器显示文字信息提示用户必须输入内容。

    8. labels属性

    可为表单所有元素添加一个lables属性,属性值为一个NodeList对象,代表该元素所绑定的标签元素所构成的集合。

    <script type="text/javascript"> window.onload = function () { var text = document.getElementById('text'); var btn = document.getElementById('btn'); var form = document.getElementById('form'); btn.onclick = function() { if (text.value.trim() =="") { //alert(text.labels.length) if(text.labels.length==1) { var label = document.createElement("label"); label.setAttribute("for","text"); form.insertBefore(label,btn); text.labels[1].innerHTML = "请输入姓名"; text.labels[1].setAttribute( "style","font-size:9px;color:red"); } } else if(text.labels.length>1) form.removeChild(text.labels[1]); } } </script> <form id="form"> <label id="label" for="text">姓名:</label> <input id="text"> <input id="btn" type="button" value="验证"> </form>

    当用户不输入任何值时,单击验证,文本框旁边会动态的添加一个标签元素,标签元素为“请输入姓名”;当用户在文本框中有输入时,文字为“请输入姓名”的标签将被删除。

    9. 标签的control属性

    可以在标签(label)内部放置一个表单元素,并通过该标签的control属性来访问该表单元素。

    <script type="text/javascript"> function setValue() { console.log(1); var label =document.getElementById("label"); var textbox = label.control; textbox.value = "231456" } </script> <form> <label id="label"> 邮编: <input id="txt_zip" maxlength="6"> <small>请输入6位数字</small> </label> <input type="button" value="设置默认值" onclick="setValue()"> </form>

    在游览器中打开页面,单击“设置默认值”按键,文本框中会显示231456.

    10. 文本框的placeholder属性

    当文本框(text或者textarea)处于为选择状态时输入提示信息(灰色)

    <input type="text" palceholder="hahah"> 11. 文本框的list属性

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • HTML5的新语义化的标签 - Avenstar

      HTML5的新语义化的标签 - Avenstar

      2016-12-17 14:01

    • 《HTML5》 Audio/Video全解 - Samcc

      《HTML5》 Audio/Video全解 - Samcc

      2016-12-14 13:00

    • HTML5 Canvas玩转酷炫大波浪进度图 - 【当耐特】

      HTML5 Canvas玩转酷炫大波浪进度图 - 【当耐特】

      2016-12-14 11:01

    • html5实现GIF图效果 - string卿

      html5实现GIF图效果 - string卿

      2016-12-13 10:01

    网友点评
    "