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