网站建设
网站备案流程
本机IIS服务器的创建
Win7下配置本机IIS服务器
建网站需要学习的内容
使用表格布局网页
定义网页头文件元素
制作弹出网页
制作网页宣传窗
Div+CSS布局网页
CSS的常见选择器
CSS设置文本样式
CSS设置背景颜色与图像
CSS设置表格样式
HTML中使用CSS的方法
CSS3新增的部分属性1
CSS3新增的部分属性2
CSS3动画与渐变
网页显示MySQL数据库中汉字的乱码问题
HTML5的新特性
HTML5的API
HTML5音视频API
HTML5表单
HTML5表单API
HTML5画布canvas
HTML5拖放API
HTML5地理位置API
HTML5离线应用API
HTML5 Workers多线程
HTML5跨源通信
HTML5 WebSocket通信
HTML5的Web存储API
HTML5本地数据库
HTML5其他一些API
Node.js功能和使用
常用Web前端工具
WebGL编程
GLSL ES语言
使用ThreeJs库3D编程
XML可扩展标记语言
表单是与用户交互的页面，HTML5将用于处理用户计算机中表单的代码库标准化，提供了新的属性、元素和完整的API。
1.表单元素：
表单没有太大的改动，其结构仍然保持不变，但HTML5增加了新的元素、输入类型和属性，可以根据需要进行扩展。
1）<form>元素：
创建一个基本的表单模板：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Forms </title>
</head>
<body>
<section id="form">
<form name="myform" id="myform" method="get">
<input type="text" name="name" id="name">
<input type="submit" value="Send">
</form>
</section>
</body>
<html>
<form>元素除一些常见属性，也有一些扩展属性。
·autocomplete：可以添加on和off两个值，默认是on。如果设为off，表单所包含的<input>元素就不会显示作为可选值的文字。<form>和其他独立的<input>元素都支持这个属性。
·novalidate：HTML5内置了验证功能，如果不想使用这个行为，可以使用属性novalidate。
2)<input>元素：
表单中最重要的元素是<input>，使用type属性可以改变元素性质。HTML5扩大了选择范围，还规定了浏览器对所接收信息的处理方式，从而增强了元素的功能。Type属性与其他属性一起，可以帮助浏览器实时限制和控制用户输入。
⑴电子邮件类型：
几乎每个表单都会使用输入域接收电子邮件地址，但目前唯一支持这种数据的输入类型是text。Text表示一般文字，而非特殊字符，所以必须使用JavaScript控制输入数据，确认所插入内容是一个有效的电子邮件地址。
现在有了email类型，浏览器会检查输入域中插入的文字，验证其是否为合法的电子邮件地址。如果验证失败，表单就不会发送。示例：
<input type="email" name="myemail" id="myemail">
各种浏览器有不同的无效输入响应方式。例如，在表示错误信息时，一些浏览器会在<input>元素周围显示红色框，另一些浏览器则显示蓝色框。也可以定制错误响应方式。
⑵搜索类型：
Search类型不能控制输入，作用是指示浏览器。示例：
<input type="search" name="mysearch" id="mysearch">
有一些浏览器会修改元素的默认设计，向用户提示域的用途。
⑶URL类型：
这种类型的作用与email完全相同，但主要针对网址。只接受绝对URL，如果输入无效URL会显示错误信息。示例：
<input type="url" name="myurl" id="myurl">
⑷电话号码类型：
这种类型主要针对电话号码。Tel类型没有规定特殊的语法，作用是指示浏览器，该应用程序需要根据不同的设备进行调整。示例：
<input type="tel" name="myphone" id="myphone">
⑸数字类型：
Number类型只能接受数字值。这个域还可以使用其他一些新属性：
·min：这个属性决定了域所能接受的最小值
·max：这个属性决定了域所能接受的最大值
·step：这个属性值决定了域所能接受值递增或递减的步长。例如，如果步长设置为5，最小值为0，最大值为10，那么浏览器就不允许输入0~5和5~10之间的值。示例：
<input type="number" name="mynumber" id="mynumber" min="0" man="10" step="5">
不一定要同时设置min和max，step的默认值是1。
⑹范围类型：
这是一种新增域类型。这种新控件允许用户选择一个范围的数值，通常会显示为滑块或箭头，用于增大或缩小数值，但目前还没有标准设计。
Range类型使用属性min和max，设置范围的下限值和上限值，此外还可以设置属性step，声明设置该值递增或递减的步长。示例：
<input type="range" name="mynumbers" id="mynumbers" min="0" max="0" step="5">
使用旧的value属性，可以设置元素的初始值；使用JavaScript可以在屏幕上显示数值。
⑺日期类型：
这是一种新控件，用来创建一个日期输入域。浏览器使用日历实现这个功能，用户可以单击域选择时间。用户可以选择日历中的一天，浏览器会将它与其他日期一同插入输入框中。示例：
<input type="date" name="mydate" id="mydate">
标准并没有规定它的页面设计，每一种浏览器都有不同的界面，并且有时候会根据应用程序所运行的设备不同而调整设计。通常，这个控件值的格式是：year-month-day。
⑻周类型：
这种类型提供一种与date类类似的界面，但是只能选择周。通常，这个控件值的格式是：2016-W50，其中2016是年份，50是周数。示例：
<input type="week" name="myweek" id="myweek">
⑼月份类型：
这种类型与周类型类似，但是只能选择一个月份。通常，这个控件值的语法是：year-month。示例：
<input type="month" name="mymonth" id="mymonth">
⑽时间类型：
Time类型与date类型，但是只能选择时间。它的格式包括小时和分钟，但其具体行为取决于不同浏览器的实现。通常，它的值的格式为：hour:minutes:seconds，但也可以是：hour:minutes。示例：
<input type="time" name="mytime" id="mytime">
⑾日期与时间类型：
Datetime类型支持输入完整的日期和时间，其中还包括时区。示例：
<input type="datetime" name="mydatetime" id="mydatetime">
⑿本地日期与时间类型：
datetime-local类型是一种不带时区的datetime类型。示例：
<input type="datetime-local" name="mylocaldatetime" id="mylocaldatetime">
⒀颜色类型：
Color类型具有预定义的颜色拾取界面。通常，这个域的预期值是十六进制数，如#00FF00。示例：
<input type="color" name="mycolor" id="mycolor">
HTML5没有规定标准的color界面，但是浏览器都会使用一组包含基本颜色的网格界面。
2.新属性：
有一些输入类型要求使用特定的属性才能够达到显示效果，也有一些输入类型需要使用一些属性来改进其性能。
1)Placeholder属性：
Placeholder属性通常用于文本框输入类型，也可以用在search等，表示一个简短提示、单词或词汇，可用于帮助用户输入正确的内容。示例：
<input type="search" name="mysearch" id="mysearch" placeholder="type your search">
这个属性可以显示一些提示内容，当该输入文本框获取焦点时提示信息就会消失。
2)Multiple属性：
Multiple属性也必须设置布尔值，可以用在一些输入类型中，如email或file，从而支持在同一域中输入多个值。所插入的值必须用逗号分隔。示例：
<input type="email" name="myemail" id="myemail" multiple>
3)autofocus属性：
autofocus属性会使网页加载后强制聚焦到所选元素上，每个页面只允许出现一个autofocus属性的input元素。但会考虑目前的状况，如果用户已经在网页上聚焦到某个元素，那么不会改变聚焦状态。示例：
<input type="search" name="mysearch" id="mysearch" autofocus>
以前，开发人员通常使用JavaScript的focus()方法来实现这个特性。
4)autocomplete属性：
可用于form元素和输入型的input元素，用于表单自动完成。autocomplete属性会把输入的历史记录下来，当再次输入时，会把输入的历史记录显示在一个下拉列表中，以实现自动完成输入。示例：
<input type="search" name="key" id="key" autocomplete="on" />
autocomplete属性有"on"、"off"和""等3个值。使用""时，使用浏览器的默认值。
5)form属性：
可用于在<form>标记之外声明表单元素。示例：
<nav>
<input type="search" name="mysearch" id="mysearch" form="myform">
</nav>
以前，必须使用标记<form>才能创建表单，然后在标记之间声明各个表单元素。HTML5支持在文档的任意位置插入元素，然后使用form属性通过名称引用表单。
6)formaction属性：
表单可以通过action属性把内容提交到另外一个页面。HTML5中，为不同的提交按钮添加formaction属性，该属性可以覆盖action属性，将表单提交至不同页面。示例：
<form id="form1" method="post">
<input name="name" type="text" form="form1" />
<input type="submit" value="提交到Page1" formaction="?page=1" />
<input type="submit" value="提交到Page2" formaction="?page=2" />
<input type="submit" value="提交到Page3" formaction="?page=3" />
<input type="submit" value="提交" />
</form>
7)formmethod、formentype、formnovalidate、formtarget属性：
使用方法与formaction一致，设置在提交按钮上，可以覆盖表单的相应属性。formmethod覆盖method属性，formentype覆盖entype属性，formnovalidate覆盖novalidate，formtarget覆盖target。
8)list属性：
与datalist元素配合使用，可以为某个可输入的input元素定义一个选值列表。见datalist。
3.新的表单元素：
1)<datalist>元素：
datalist元素使用list属性，可以为某个可输入的input元素定义一个选值列表。使用datalist元素构建选值列表，设置input元素的list属性为datalist元素的id值，实现二者的绑定。示例：
<input name="email" type="email" list="emaillist" />
<datalist id="emaillist">
<option value="test1@test.com">test1@test.com</option>
<option value="test1@test.com">test1@test.com</option>
</datalist>
目前只有Opera和Firefox Beta实现了<datalist>元素。
2)<progress>元素：
这是一个表单特有的元素，表示一个任务完成的进度。通常这些任务都在表单中启动和处理，因此可以添加到表单元素组中。
<progress>元素使用两个属性设置其状态和限制，value属性表示任务执行的进度，max声明任务完成后达到的值。
3)<meter>元素：
<meter>元素可用于显示刻度，而非进度，可用于表示一个已知范围，例如带宽使用。
<meter>元素有一些相关属性，min和max可用于设置范围边界，value可用于确定测量的值，而low、high和optimum可用于将范围划分为不同的部分和设置最佳位置。
4)<output>元素：
用于不同类型的输出，如用于计算结果或脚本的输出等，必须从属于某个表单，即写在表单内部，通常用于显示表单处理的结果值。示例：
<form name="myform" id="myform" oninput="x.value=volume.value">
<input type="range" name="volume" value="50" />
<output name="x"></output>
</form>
由于range类型的input元素表现为一个滑块，不显示数值，因此使用output元素协助显示其值。使用for属性可以将<output>与参与计算的源元素相关联。但这个元素通常是在JavaScript代码中引用和修改。
5）Keygen元素：
提供一种安全的方式验证用户。该元素有密钥生成的功能，当提交表单时，会分别生成一个私人密钥和一个公共密钥，其中私人密钥保存在客户端，公共密钥则通过网络传输至服务器。这种非对称加密方式，为网页的数据安全提供了更大的保障。示例：
<form name="myform" id="myform" action="">
<input type="text" name="name" /><br />
Encryption:
<keygen name="security" /><br />
<input type="submit" />
</form>
Keygen元素提供了中级和高级的加密算法，显示的是一个类似select元素的下拉框，可以选择加密等级。