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

来源：互联网发布：windows 网络编程编辑：程序博客网时间：2024/05/18 18:55

在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/