本文内容
HTML 5表单的组织方式
HTML 5表单的新增特性
访问表单控件及响应表单控件事件
HTML 5表单的组织方式
★ 将表单字段及其标签关联起来
<label>标签为input元素定义标注(标记)
给label元素添加一个for属性,将其与某输入控件关联起来,这种方式已被普遍使用。
- <!--绑定方式 1-->
<label for="fName">请输入</label>
<input type="text" id="fName">
<!--label元素的for属性值,应该与相关联的input元素id属性值一致-->
<!--绑定方式 1-->
<label>请输入<input="text"></label>
值得注意的是,不要为类型“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中新增的表单属性
autofocus |
当页面装载时,此元素应该拥有焦点 |
autocomplete |
此元素应该“记住”以前输入的值,同时能够自动提示 |
pattern |
指定用户输入的值,必须满足指定的正则表达式 |
placeholder |
显示于输入控件中的“灰色提示信息” |
novalidate,formnovalidate |
通知浏览器不要验证指定的元素或窗体的数据有效性 |
required |
此空间中必须有值 |
△ 自动完成功能 autocomplete
功能描述:当下次输入时,鼠标左键双击输入控件将会自动显示上次输入的文本;当输入时,输入内容和之前相符合将会显示之前的输入文本;
<formmethod="get"action="">
<label>Field: <inputtype="text"autocomplete="on"placeholder="支持自动完成"name="name"></label>
<!--注意为text类型的input添加name属性或id属性,可以更便捷的获取text的值,完成文本自动提示-->
<inputtype="submit"value="Submit">
</form>
△ 正则表达式验证 pattern
使用正则表达式完成对输入内容的验证
<formmethod="get"action="">
<inputtype="text"name="patternTest"
placeholder="请输入5为有效数字"title="请输入5为有效数字"pattern="^[0-9]{5}$">
<inputtype="submit">
</form>
△ 禁用数据验证功能 novalidate 或 formvalidate
使用novalidate属性或formnovalidate属性可以在整个窗体或控件范围内禁用数据验证功能。这一功能使用的典型场景是允许用户“暂存”当前状态(如邮箱保存到草稿箱),直到正式提交时再开始数据验证功能。
◇ 在form标签中添加novalidate属性实现禁用数据验证
<formmethod="get"action=""novalidate>
<!--在form标签中添加novalidate属性,表示对该form中的输入内容不作验证-->
<inputtype="text"name="patternTest"
placeholder="请输入5为有效数字"title="请输入5为有效数字"pattern="^[0-9]{5}$">
<inputtype="submit">
</form>
◇ 在submit提交按键中添加formnovalidate实现禁用数据验证
<formmethod="get"action="">
<inputtype="text"name="patternTest"
placeholder="请输入5为有效数字"title="请输入5为有效数字"pattern="^[0-9]{5}$">
<inputtype="submit"formnovalidate>
<!--在submit控件中添加formnovalidate属性,
表示对该form中的输入内容不作验证--></form>
◇ 文本选择
使用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"><!--size属性,定义input控件的宽度,单位为px-->
<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>
◇ “搜索”文本框 search
当前,各个版本的桌面浏览器都把它作为普通文本框处理。搜索字段的外观与常规的文本字段无异!
<inputtype="search"placeholder="这是一个搜索框!">
但在当下,Web前端的一切事物都是因“机”而已!对于移动设备,会显示“搜索”输入面板供用户输入。
◇ “电子邮件” 输入框 email
在桌面浏览器中,当用户输入无效的邮件地址时,部分浏览器会有提示:
另外,在手机等移动终端设备上,则会显示相应的输入面板
◇ “数据列表”控件 datalist
通过指定一个列表,可以在输入时给与用户相应,类似于提示“自动完成”功能。
示例
<inputtype="text"list="suggestions">
<!--此处list的属性值应该与datalist id的属性值一致-->
<datalistid="suggestions">
<option>my 1</option>
<option>my 2</option>
<option>my 3</option>
<option>others</option>
</datalist>
注意
在HTML中与datalist效果相近的另一个标签是select。
区别在于,select标签是只能在指定的选项中选择,而datalist可直接填入,也可以在给定的选项中选择。
◇ 进度控制条 progress
<progressvalue="50.0"max="200.0">1/4</progress>
<!--progress标签没有min属性-->
提示: IE 11也能够较好的支持progress属性。
◇ 定义度量衡(仅适用于已知最大和最小值的度量) meter
注释:Internet Explorer 不支持 meter 标签。
示例
<metervalue="20.0"
min="0"max="100.0"
low="20.0"high="90.0"
optimum="60.0">
1/5
</meter>
◇ 显示计算机结果控件 output
<output> 标签作为计算结果输出显示(比如执行脚本的输出)。
示例
<formoninput="z.value=parseInt(x.value)+parseInt(y.value)">0
<inputtype="range"min="0"max="100.0"id="x">100
+<inputtype="number"id="y"value="50">
=
<outputname="z"for="x y"></output>
</form>
<!--其中控件使用name属性或id属性作为标识都是可以的-->
<!--
规范的标识应该是output控件使用name属性做标识,input控件使用id属性做标识
-->
提示:IE对onput,number控件的支持并不好。
访问表单控件及响应表单控件事件
使用代码访问表单控件
document的forms属性包容页面上的所有表单
为form元素指定其name属性,之后就可以通过name访问它。
document.forms.formName //formName是form自定义的name属性值
另外,放在表单中的所有控件,也可以通过名字访问它。
document.form.formName.elementName
响应表单事件
表单事件实际上就是对元素获得或失去焦点的动作进行控制。可以利用表单事件来改变获得或失去焦点的元素样式,这里所指的元素可以是同一类型,也可以是多个不同类型的元素,
在开发中,经常需要处理以下两种类型的事件:
1.控件获得与失去焦点事件;
2.表单提交与重置事件;
onfocus事件
获得焦点事件(onfocus)是当某个元素获得焦点时触发事件处理程序;
失去焦点事件(onblur)是当前元素失去焦点时触发事件处理程序;在一般情况下,这两个事件是同时使用的。
示例
<script>
function txtFocus(txtColor){
txtColor.style.backgroundColor ="#ff00ff";
}
function txtBlur(txtColor){
txtColor.style.backgroundColor ="#ffffff";
}
</script>
<formmethod="get"action="">
Username:<inputtype="text"onblur="txtBlur(this)"onfocus="txtFocus(this)">
Password:<inputtype="text"onblur="txtBlur(this)"onfocus="txtFocus(this)">
</form>
onchange事件
失去焦点修改事件(onchange)是当前元素失去焦点并且元素的内容发生改变时触发事件处理程序。该事件一般在下拉文本框中使用。
<formname="form1">
<inputtype="text"value="通过表单事件响应事件更改样式"
name="txtField"size="50">
<selectonchange="turnColors(this.value)">
<optionvalue="red">turn red</option>
<optionvalue="green">turn green</option>
<optionvalue="blue">turn blue</option>
</select>
</form>
<script>
function turnColors(color){
/*form1.txtField.style.color = color;
//简写对form1的访问*/
document.forms.form1.txtField.style.color = color;
//全写对form1的访问
}
</script>
提交与重置事件
提交submit
表单提交事件(onsubmit)是在用户提交表单时(通常使用“提交”按钮,也就是将按钮的type属性设为submit),在表单提交之前被触发 。
该事件的处理程序通过返回false值来阻止表单的提交。该事件可以用来验证表单输入项的正确性。
重置onreset
表单重置事件(onreset)与表单提交事件的处理过程相同,该事件只是将表单中的各元素的值设置为原始值。一般用于清空表单中的文本框信息。
示例
<script>
function checkData(f){
if(f.txtField.value ==""){
//注意此处是判断txtField的值是否为空,因此应该用‘==’符号
alert("商品名称不能为空");
returnfalse;
}else{
returntrue
}
}
</script>
<formmethod="post"action=""onsubmit="checkData(this)">
<inputname="txtField"type="text"placeholder="请输入商品名称">
<inputtype="submit">
</form>
相关示例:应用样式表美化表单