HTML 5表单应用小结

本文内容

HTML 5表单的组织方式

HTML 5表单的新增特性

访问表单控件及响应表单控件事件

HTML 5表单的组织方式

★ 将表单字段及其标签关联起来

<label>标签为input元素定义标注（标记）

给label元素添加一个for属性，将其与某输入控件关联起来，这种方式已被普遍使用。

值得注意的是，不要为类型“hidden”的表单字段关联label元素，因为这是无意义的。

★ 按逻辑组织表单字段

使用fieldset将表单中的各控件进行分组，每组可以加一个legend元素用做分组的标题。

<h2>按逻辑组织表单字段</h2>
<hr/>
<p>使用fieldset将表单中的各控件进行分组，每组可以加一个legend元素用作分组的标题</p>
<form>
<fieldset>
<legend>Movie Rating</legend>
<inputtype="radio"id="Rating1"name="Rating">Excellent<br/>
<inputtype="radio"id="Rating2"name="Rating">Good<br/>
<inputtype="radio"id="Rating3"name="Rating"><labelfor="Rating3">Fair</label><br/>
<label><inputtype="radio"id="Rating4"name="Rating">Poor</label>
</fieldset>
</form>

拓展：

fieldset元素是可以嵌套。因此，还可以添加一个disable属性标明禁用它（需要时可以通过删除此属性再激活fieldset）。（关于这方面的示例，我写了几个都没有实现理想的效果，作为大牛的你，分享下吧！）

HTML 5表单的新增特性

HTML 5新增的表单方法 HTML 5新增表单的伪类（pseudo-classes）

名称		名称
select		:valid
selectionStart		:invalid
selectionEnd		:required
setSelectionRange(start,end)

注意：此处，valid为有效的，合法的，invalid为无效的，非法的；

HTML 5中新增的表单属性

△ 自动完成功能 autocomplete

功能描述：当下次输入时，鼠标左键双击输入控件将会自动显示上次输入的文本；当输入时，输入内容和之前相符合将会显示之前的输入文本；

<formmethod="get"action="">
<label>Field: <inputtype="text"autocomplete="on"placeholder="支持自动完成"name="name"></label>

<inputtype="submit"value="Submit">
</form>

△ 正则表达式验证 pattern

使用正则表达式完成对输入内容的验证

△ 禁用数据验证功能 novalidate 或 formvalidate

使用novalidate属性或formnovalidate属性可以在整个窗体或控件范围内禁用数据验证功能。这一功能使用的典型场景是允许用户“暂存”当前状态（如邮箱保存到草稿箱），直到正式提交时再开始数据验证功能。

◇ 在form标签中添加novalidate属性实现禁用数据验证

◇ 在submit提交按键中添加formnovalidate实现禁用数据验证

◇ 文本选择

使用selectionStart，selectionEnd和setSelectionRange方法可以很方便地选择文本控件中的文本。

<inputtype="text"id="textBox"size="40"value="I Love China!I Love China!I Love China!I Love China!">
起始<inputtype="text"id="start"value="0"size="3">
结束<inputtype="text"id="end"value="15"size="3">
<buttononclick="selectBE()">以起始与结束位置方法确定选择选中内容</button>
<buttononclick="selectRange()">以Range方法确定选中内容</button>
<buttononclick="displaySelected()">显示选中信息</button>
<script>
function selectBE(){
var input = document.getElementById("textBox");
input.selectionStart = parseInt(document.getElementById("start").value);
input.selectionEnd = parseInt(document.getElementById("end").value);
}
function selectRange(){
var input = document.getElementById("textBox");
var start = parseInt(document.getElementById("start").value);
var end = parseInt(document.getElementById("end").value);
input.setSelectionRange(start, end);
}
function displaySelected(){
var input = document.getElementById("textBox");
alert("Start:"+ input.selectionStart +" "+"End:"+ input.selectionEnd);
}
</script>