您的位置：首页 > Web前端 > HTML

HTML 5表单应用小结

2016-11-06 20:12 253 查看

本文内容
HTML5表单的组织方式
HTML5表单的新增特性
访问表单控件及响应表单控件事件

HTML5表单的组织方式
★将表单字段及其标签关联起来
<label>标签为input元素定义标注（标记）
给label元素添加一个for属性，将其与某输入控件关联起来，这种方式已被普遍使用。

<labelfor="fName">请输入</label>

<inputtype="text"id="fName">

<!--label元素的for属性值，应该与相关联的input元素id属性值一致-->

<label>请输入<input="text"></label>

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

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

<h2>按逻辑组织表单字段</h2>

<hr/>

<p>使用fieldset将表单中的各控件进行分组，每组可以加一个legend元素用作分组的标题</p>

<form>

<fieldset>

<legend>MovieRating</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）。（关于这方面的示例，我写了几个都没有实现理想的效果，作为大牛的你，分享下吧！）

HTML5表单的新增特性
HTML5新增的表单方法HTML5新增表单的伪类（pseudo-classes）

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

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

HTML5中新增的表单属性

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="ILoveChina!ILoveChina!ILoveChina!ILoveChina!">

起始<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>

functionselectBE(){

varinput=document.getElementById("textBox");

input.selectionStart=parseInt(document.getElementById("start").value);

input.selectionEnd=parseInt(document.getElementById("end").value);

functionselectRange(){

varinput=document.getElementById("textBox");

varstart=parseInt(document.getElementById("start").value);

varend=parseInt(document.getElementById("end").value);

input.setSelectionRange(start,end);

functiondisplaySelected(){

varinput=document.getElementById("textBox");

alert("Start:"+input.selectionStart+"\n"+"End:"+input.selectionEnd);

</script>

◇“搜索”文本框search

当前，各个版本的桌面浏览器都把它作为普通文本框处理。搜索字段的外观与常规的文本字段无异！

<inputtype="search"placeholder="这是一个搜索框！">

但在当下，Web前端的一切事物都是因“机”而已！对于移动设备，会显示“搜索”输入面板供用户输入。

◇“电子邮件”输入框email
在桌面浏览器中，当用户输入无效的邮件地址时，部分浏览器会有提示：

另外，在手机等移动终端设备上，则会显示相应的输入面板

◇“数据列表”控件datalist

通过指定一个列表，可以在输入时给与用户相应，类似于提示“自动完成”功能。

示例

<inputtype="text"list="suggestions">

<!--此处list的属性值应该与datalistid的属性值一致-->

<datalistid="suggestions">

<option>my1</option>

<option>my2</option>

<option>my3</option>

<option>others</option>

</datalist>

注意

在HTML中与datalist效果相近的另一个标签是select。
区别在于，select标签是只能在指定的选项中选择，而datalist可直接填入，也可以在给定的选项中选择。

◇进度控制条progress

<progressvalue="50.0"max="200.0">1/4</progress>

<!--progress标签没有min属性-->

提示：IE11也能够较好的支持progress属性。

◇定义度量衡（仅适用于已知最大和最小值的度量）meter

注释：InternetExplorer不支持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="xy"></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>

functiontxtFocus(txtColor){

txtColor.style.backgroundColor="#ff00ff";

functiontxtBlur(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">turnred</option>

<optionvalue="green">turngreen</option>

<optionvalue="blue">turnblue</option>

</select>

</form>

<script>

functionturnColors(color){

/*form1.txtField.style.color=color;

//简写对form1的访问*/

document.forms.form1.txtField.style.color=color;

//全写对form1的访问

</script>

提交与重置事件

提交submit
表单提交事件（onsubmit）是在用户提交表单时（通常使用“提交”按钮，也就是将按钮的type属性设为submit），在表单提交之前被触发。
该事件的处理程序通过返回false值来阻止表单的提交。该事件可以用来验证表单输入项的正确性。
重置onreset
表单重置事件（onreset）与表单提交事件的处理过程相同，该事件只是将表单中的各元素的值设置为原始值。一般用于清空表单中的文本框信息。
示例

<script>

functioncheckData(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>

相关示例：应用样式表美化表单

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航