So Beautiful 旅程 ——HTML5表单相关元素和属性

        由于国庆长假，本篇文章的更新延迟在今天晚上，给大家道个歉。看过上篇文章大家的评论，从本篇文章开始，篇幅中会增加相关的代码和预览效果图，敬请期待！！！

 

 

 

第二章HTML5表单相关元素和属性

一、HTML原有表单及表单控件

1，表单元素

<form.../>元素用于生成输入表单，该元素不会生成可视化部分。

form的相关属性：

action---表单被提交到哪个地址

method--GET/POST请求类型

enctype---对表单内容编码所采用的字符集

  ---application/x-www-form-urlencoded（默认编码方式，URL编码格式）

  ---multipart/form-data（二进制方式处理表单--文件上传）

  ---text/plain（直接通过表单发送邮件）

name---指定表单唯一名称

target---打开目标URL方式

有name属性的会生成请求参数，否则不会生成；

表单属性设置为disabled则不会被提交

2，input元素

<input.../>元素是表单控件元素中功能最丰富的。

size指定元素宽度，maxlength指定最大输入字符数

3，label元素

<label.../>元素用于在表单元素中定义标签，这些标签可以对其他可生成请求参数的表单控件元素（如单行文本框、密码框等）进行说明。

当用户单击<label>元素所生成的标签时，该标签关联的表单控件元素会获得焦点

让标签和表单控件关联有两种方式：

隐式关联：使用for属性

显式关联：将表单元素直接放在<label>标签中（IE不支持）

4，button元素

<button.../>元素用于定义一个按钮，在<button.../>元素的内部可以包含普通文本、文本格式化标签、图像等内容。

比<input type="button">功能更强大、更丰富

不要在button标签之间放置图像映射，会干扰表单按钮的行为

5，列表框和下拉列表

<select.../>元素用于创建列表框或下拉菜单，该元素必须和<option.../>元素结合使用，每个<option.../>元素代表一个列表项或者菜单项。

<select>生成的是下拉列表还是列表框完全由是否指定size或multiple属性来决定，只要指定了其中一个属性，就会生成列表框

6，使用textarea指定文本域

<textarea.../>元素用于生成多行文本域，可以指定onclick事件属性。由于textarea的特殊性，他可以接收用户输入，用户可以选中文本框内的文本，所以还可以指定onselect‘、

onchange两个属性，分别用于响应文本域内文本被选中、文本被修改事件。

textarea元素不能指定value属性

代码：

预览效果：

 

 

二、HTML5新增属性和元素

1，html5为表单控件新增的属性

form属性：可以让表单控件在<form>元素之外，提高了灵活性，用于定义该表单控件所属的表单，该属性的值应该是它所属表单的id。

formaction属性：处理表单内包含了多个按钮，不同按钮提交到不同action的场景

formxxx属性：与formaction相似，用于指定formenctype、formmethod、formtarget等属性

autofocus属性：为某个表单添加该属性后，浏览器打开页面时会自动获得焦点（整个页面最多只能定义一个）

placeholder属性：单行文本框、多行文本域显示的提示信息

list属性：用于实现下拉框和文本框结合实现自动补全功能，需要与datalist标签配合使用

autocomplete属性：主要用于和list组合，当开发者不希望某些用户看到下拉菜单，可通过设置autocomplete来实现，on表示显示下拉菜单，off表示不显示（目前只有Opera支持）

代码：

预览效果：

2，功能丰富的input元素

前面介绍<input.../>元素时已经讲解了可以通过type属性让该元素生成文本框、单选按钮、多选按钮、提交按钮、重设按钮等多种表单控件，而HTML5则进一步丰富了type属性的类型，从而允许通过<input.../>元素来生成各种不同的表单控件。

代码：

预览效果：

Chrome支持部分input属性

Opera支持较好：

3，HTML5新增表单属性：

HTML5新增了一个<output>表单控件，用于显示输出，比如计算结果或者脚本输出

<output>必属于某个表单，要么定义在某个表单内部，要么指定form属性

 

代码：

预览效果：

三、HTML增强的文件上传域

1，FileList对象和File对象

type="file"的<input.../>元素增加了如下两个属性：

accept：指定上传文件类型（指定MIME类型）

不要单靠accept过滤文件，这只是客户端过滤，很脆弱，如果要过滤，还需要在服务器端设置过滤

multiple：允许上传多个文件

javascript通过files属性访问上传文件返回一个FileList对象，FileList对象相对于一个数组，开发者可以通过类似访问数组的方式访问每一个File对象

File对象包含如下属性：name、type、size等

如果要访问文件具体内容（二进制数据），需要借助FileReader等对象

代码：

预览效果：

2，使用FileReader读取文件内容

FileReader同样是一个js对象，开发者可以通过该对象在客户端读取文件上传域所选择的文件内容。

提供了三个读取文件的方式：

readAsText(file,encoding),以文本文件的方式读

readAsBinaryString(file)，以二进制方式读取

readAsDataURL(file)，以base64方式把文本内容编码成DataURL格式字符串

代码：

 

 

 

预览效果：

 

显示进度条：

预览效果：

四、HTML5新增的客户端校验（HTML5额外增加了一些输入校验属性）

1，使用校验属性执行校验

<required>：指定该控件必须填写

<pattern>：指定该控件必须符合的正则表达式

min/max/step：只对数字类型、日期类型有效

代码：

 

预览效果：

2，调用checkValidity方法进行校验

 

代码：

 

预览效果：

 

除此之外，HTML5为所有表单、表单控件提供了一个validity属性，该属性的值是一个ValidityState对象，该对象代表了表单、表单控件的输入校验状态，其中ValidityState的valid属性可以表示该表单、表单控件是否通过输入校验

 

3，自定义错误提示

setCustomValidity()方法

调用了某个控件的该方法意味着该表单控件没有通过输入校验。因此只有当表单控件本身没有通过输入校验时才能调用该方法，而不能随便直接调用该方法，否则可能导致本来可以通过校验的表单控件也变成了不能通过校验了

 

代码：

 

预览效果：

 

4，关闭校验

为<form>元素增减novalidate属性，该属性的值要么是novalidate要么是省略属性值

为<input>或<button>元素设置formnovalidate属性，该属性的值要么是novalidate要么是省略属性值

第一种方式将会关闭表单的输入校验功能，第二种方式则是指定的按钮或表单失去校验检验

 

 

 

注：以上代码摘录于《疯狂HTML5/CSS3/JavaScript讲义》；

       这篇文章主要是对这些章节进行了分类和归纳，如果您需要更加详细的信息，可以查阅《疯狂HTML5/CSS3/JavaScript讲义》这本书，或登陆登陆：http://www.crazyit.org