html5.0表单新增类型,HTML5学习笔记（四）：H5中表单新增元素及改良

方便布局

表单内容可以放在表单标签之外，这样做的好处是方便设计时不用考虑一定要将表单元素放在指定的form标签之下，只要指定元素适用于哪个表单即可，如下：

可指定提交按钮的目标及方法

在HTML5之前，一个表单只能填写一个action及一个method，在HTML5中每个提交按钮都可以指定自己的action及method，如下：

enctype和formenctype

enctype属性规定在发送到服务器之前应该如何对表单数据进行编码。

application/x-www-form-urlencoded：表单数据被编码为名称/值对。这是默认的编码方式(空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值)。

multipart/form-data：不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。

text/plain：空格转换为 "+" 加号，但不对特殊字符编码。

同上，enctype也可以针对每个提交按钮进行指定，使用formenctype即可。

target和formtarget

类似于标签的target属性，form标签的target属性控制提交数据之后，action指向的地址的打开方式，其可填写的值于标签的值意义和写法完全一致，默认为_self。

同上，每个提交按钮也可以配置自己的target，使用formtarget即可。

autofocus

使用该属性，可以在页面打开时将焦点自动设定到设置了该属性的组件上。

required

指示输入字段的值是必需的，如果不填值就提交会出现提示并且也不会有提交的动作发出。

label

在我们使用单选框或复选框时，一般这个后面都会跟上一段文字，但是我们点击这段文字时却是无效的，label可以用来将文字和指定的单选框、复选框或者任意的控件进行绑定，我们可以点击文字就如同点击到对应的控件一般：

请选择这个复选框

请选择这个复选框

标签的control属性

标签的control属性指定了标签包含或指向的控制对象，可以通过获取该属性来拿到对应的控件，如果标签包含了多个控件，则该属性表示第一个控件。

function setDefault() {

var label = document.getElementById("label");

var input = label.control;

input.value = "123456";

}

placeholder

输入框指定了该属性后，会作为一个提示文字在输入框没有输入时显示。

带提示及可输入的文本框

在HTML5中可以通过datdlist来定义一个带有下拉提示的输入框，如下：

HTML5学习

Android学习

IOS学习

除了可以输入预订的信息外，还可以输入任意的信息。

autocomplete

在使用了autocomplete标记的输入框进行过一次提交之后，下一次再次输入会出现上次输入的文本，可以实现快速补齐的功能。

pattern属性

pattern属性可以设定为一个正则表达式，为输入框设定了pattern属性之后，在提交时会对输入的文本进行检查，当发现不能匹配时会进行提示：

上面的示例，只有在输入3个大写字母之后才能进行正确提交。

input元素的新增种类

在HTML5中，对input元素的种类进行了增加，用url类型来作为说明，使用了url类型，则在提交时，会验证填写的内容是否为url地址，实际上是方便了开发者，免去了常用的验证代码的编写。

有个不好的地方是，每个浏览器对新类型的外观设计都是不一样的，所以为了追求统一性，在大网站上，还是需要使用风格统一的类型，比如日期选择器等，个人感觉在编写快速小应用时可以使用到这些新增的类型。

HTML5学习笔记<五>: HTML表单和PHP环境搭建

HTML表单 1. 表单用于不同类型的用户输入 2. 常用的表单标签: 标签 说明

表单 输入域 文本域 &lt ...

HTML5学习笔记<四>: 列表, 块和布局

HTML列表 列表标签 标签 描述

1. 定义有序列表.

• 定义无序列表.
• 定义列表项.

  HTML5学习笔记四 HTML文本格式化

  HTML 格式化标签 HTML 使用标签 与 对输出的文本进行格式, 如:粗体 or 斜体 这些HTML标签被称为格式化标签 通常标签 ...

  HTML5学习笔记四：html5结构

  一.大纲:大纲即文档中各内容区块的结构编排 1. 显示编排内容区块:使用section等元素创建文档结构,每个内容区块使用标题(h1~h6,hgroup); 2. 隐式编排内容区块:根据页面所书写的各 ...

  [html5] 学习笔记-表单新增的元素与属性(续)

  本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

  python3.4学习笔记(四) 3.x和2.x的区别，持续更新

  python3.4学习笔记(四) 3.x和2.x的区别 在2.x中:print html,3.x中必须改成:print(html) import urllib2ImportError: No modu ...

  Html5学习笔记1 元素 标签 属性