HTML5表单教程之Form新属性的应用

在HTML5中增加了许多新的标签和功能属性,那么在HTML5中新加入的这个功能与之前咱们使用的功能区别在哪里呢?请往下看。
假如咱们需要把页面中不同的表单元素提交,而这些表单元素又分布在HTML中的各个位置,那么Form就只能包含所有的Form标签了。
旧方法:
  1. <form id="form1" action="http://www.w3cfuns.com/"> 
  2.         <input id="userName" name="userName" type="text"/> 
  3.         <input id="userPwd" name="userPwd" type="password"/> 
  4.         <input id="userAge" name="userAge" type="text"/> 
  5.         <input type="submit" value="提交"/> 
  6. </form> 
但是在此Form中又包含一些不需要在此From中提交的元素(比如userAge)怎么办呢?貌似只能提交了,让后台程序员不接受此参数或者使用js把所有需要再此表单中提交的内容放入到hidden隐藏区域中,然后提交,你可能会修改成如下
改进后:
  1. <form id="form1" action="http://www.w3cfuns.com/"> 
  2.         <input id="hd_userName" name="userName" type="hidden"/> 
  3.         <input id="hd_userPwd" name="userPwd" type="hidden"/> 
  4. </form> 
  5.  
  6. <input id="userName" name="userName" type="text"/> 
  7. <input id="userPwd" name="userPwd" type="password"/> 
  8. <input id="userAge" name="userAge" type="text"/> 
  9. <input type="submit" value="提交"/> 
嗯,这样整理了一下是不错,可以满足我们的要求,但是js就太多了,浪费网络资源和HTTP请求数据包,增加项目大小,维护起来相对比较麻烦。
HTML5的方法:
  1. <form id="form1" action="http://www.w3cfuns.com/"> 
  2.         <input type="submit" value="提交"/> 
  3. </form> 
  4.  
  5. <input id="userName" name="userName" for="form1" type="text"/> 
  6. <input id="userPwd" name="userPwd" for="form1" type="password"/> 
  7. <input id="userAge" name="userAge" type="text"/> 
这里的for属性=表单的ID,这样一来,这些元素到底归那个表单就一目了然了,这个for属性,你可以理解为label中的for属性,只不过在HTML5中的这种情况下,他就属于fome1的元素了。现在再看代码,干净利索多了,项目文件也不大,易于维护。
例子:
  1. <! doctype html> 
  2. <html> 
  3. <head> 
  4. <style> 
  5. p label { 
  6. width: 180px; 
  7. float: left; 
  8. text-align: right; 
  9. padding-right: 10px 
  10. table { 
  11. margin-left: 80px 
  12. table td { 
  13. border-bottom: 1px solid #CCCCCC 
  14. input.submit { 
  15. margin-left: 80px 
  16. </style> 
  17. </head> 
  18. <body> 
  19. <form action='/register' enctype="application/x-www-form+xml" method="post"> 
  20. <p> 
  21. <label for='name'>ID(请使用Email注册)</label> 
  22. <input name='name' required type='email'></input> 
  23. </p> 
  24. <p> 
  25. <label for='password'>密码</label> 
  26. <input name='password' required type='password'></input> 
  27. </p> 
  28. <p> 
  29. <label for='birthday'>出生日期</label> 
  30. <input type='date' name='birthday' /> 
  31. </p> 
  32. <p> 
  33. <label for='gender'>国籍</label> 
  34. <select name='country' data='countries.xml'></select> 
  35. </p> 
  36. <p> 
  37. <label for='photo'>个性头像</label> 
  38. <input type='file' name='photo' accept='image/*' /> 
  39. </p> 
  40. <table> 
  41. <thead> 
  42. <td><button type="add" template="questionId">+</button> 保密问题</td> 
  43. <td>答案</td> 
  44. <td></td> 
  45. </thead> 
  46. <tr id="questionId" repeat="template" repeat-start="1" repeat-min="1" repeat-max="3"> 
  47. <td><input type="text" name="questions[questionId].q"></td> 
  48. <td><input type="text" name="questions[questionId].a"></td> 
  49. <td><button type="remove">删除</button></td> 
  50. </tr> 
  51. </table> 
  52. <p> 
  53. <input type='submit' value='send' class='submit' /> 
  54. </p> 
  55. </form> 
  56. </body> 
  57. </html> 
这是Opera浏览器的测试。类似于站长的HTML5的表单系统,
这个运用了一些HTML5的新的表单元素,比如email类型的输入框(ID),日期类型的输入框(出生日期)。并且使用了重复模型来引导用户填写保密问题,而在个性头像的上传中,通过限制文件类型,方便用户选择图片进行合乎规范的内容上传。而用户选择国籍的下拉选择输入框中,采用的是外联数据源的形式,外联数据源使用coutries.xml,内容如下:
  1. <select xmlns="http://www.w3.org/1999/xhtml"> 
  2. <option>China</option>  
  3. <option>Japan</option>  
  4. <option>Korea</option> 
  5. </select> 
并且form的enctype是application/x-www-form+xml,也就是HTML5的XML提交。所以一旦form校验通过,form的内容将会以XML的形式提交。你还会发现,在ID输入框如果没有值,或者输入了非email类型的字符串时,一旦试图提交表单,就会有提示错误的信息出现,而这都是浏览器内置的。
本文转载自:http://www.w3cfuns.com/

转载请注明:代码家园 » HTML5表单教程之Form新属性的应用

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)