web前端开发技术之浅谈对HTML5 智能表单的理解

tml5新增input的form属性，用于指向特定form表单的id，实现input无需放在form标签之中，即可通过表单进行提交。

…

</FORM>

type新增属性：

email、URL、date、time、month、week、number、range、color

input元素的新增属性：

Autocomplete：自动完成功能.记录用户之前输入的内容，并在下次输入时自动提示完成输入。

>>> 属性值： on/off

>>> 可以在form表单上使用，对整张表单的所有控件进行自动完成的开关

也可以在input上使用，对特定输入框进行修改。

>>> 绝大部分浏览器，默认开启。

Autofocus：自动获得焦点. autofocus="autofocus",只能设置input元素自动获得焦点。

Form：所属表单。通过form表单的id，确定此input输入哪张表单。

Required：必填.required="required" 设置input必填，否则阻止提交。

Pattern：使用正则表达式验证input的模式.

数字类型

跟数字强相关的类型，其中number、range在移动端开发时，会弹出数字键盘，而range是一个范围滑动块。

日期和时间类型

web表单常见的字段就是日期和时间，html5以此来收集这类信息

其他类型：email、url、color、search

其中一些类型在不同的设备上都会有不同的显示。

placeholder 占位符文本，以前我们用js来模拟，获得焦点的时候，文本消失，失去焦点并且内容为空时，文本重现，现在html5自带了这一项功能。

html结构：

如果想要修改placeholder中的文本样式，那么我们只要给浏览器设置一些样式即可，css结构：

::-webkit-input-placeholder{

color:red;

font-size:14px;

}

::-moz-placeholder{

color:red;

font-size:14px;

}

autofocus 自动聚焦 ,autofocus属性可以让表单在加载完成时，会有一个表单域被默认聚焦或者选中，但是尽量不要在一个页面上在多个表单域上使用autofocus,在一些低版本浏览器上会默认聚焦最后一个含有autofocus的表单域，在大多数浏览器中会聚焦第一个含有autofocus的表单域，这会造成跨浏览器的混乱。还有我们通常用空格键来滚动页面，如果页面上有autofocus的表单域会阻止这一浏览器的默认行为。

autocomplete 自动完成，很多浏览器默认提供自动完成功能，帮助用户输入上次提交过的内容，autocomplete有两个必备的条件才能够工作，一是一定要有form元素，二个是表单域上必须要有name属性和name属性值。但是，有些时候我们为了保护隐私，需要避免自动完成这项功能，我们开启和关闭这项功能，只需给它赋值on或者off ,如果不赋值，默认就是on,表示功能开启。

用过Delphi的程序员，对Form这个词应该比较熟悉。在Delphi中，Form被翻译为“窗体、窗口”，作用是：为用户提供界面，供用户输入信息，向用户展示处理结果。

HTML5中也有Form，功能与Delphi中的Form差不多，用于接收用户输入，和服务器进行交互。不过HTML5中的Form，中文一般译为“表单”。

1、Web前端与Web后端的交互

Web前端，指浏览器上展示的HTML文件，以及HTML文件使用的CSS文件及JavaScript脚本。

Web后端，指运行在服务器上的，为Web前端提供服务的软件，Web后端也常常被称为Web服务器。

在HTML5中，Web前端与Web后端交互的流程一般如下：

（1）Web前端向Web后端发起HTTP请求；

（2）Web后端收到HTTP请求后，进行业务处理；

（3）Web后端向Web前端返回HTTP响应。

到目前为止，我们在HTML5中碰到的Web前端发起HTTP请求的方式有两种：

第1种：HTML页面通过<a>元素向用户提供超级链接，用户点击该链接时，会向服务器发起请求；

第2种：HTML页面通过表单为用户提供输入界面，用户提交表单时，会向服务器发起请求。

2、GET请求和POST请求

HTTP请求有八种，对Web前端开发者来说，最常用的是GET请求和POST请求。

GET请求：向Web后端请求指定的页面；GET请求携带的数据，以URL参数的形式提供；

POST请求：向Web后端提交数据，请求Web后端对数据进行处理；POST请求携带的数据，在请求消息体中提供。

在HTML5中，用户点击链接地址，Web前端向后端发起GET请求；

在HTML5中，用户提交表单，Web前端可以向后端发起GET请求，也可以发起POST请求。

说明：由于目前没有和后端服务器对接，为了便于对表单设计进行展示，下面的例子HTML文档，都是用GET请求来提交数据。

3、表单的主要元素

<form>元素：表示表单；

<input>元素：表单中的输入控件，输入控件可以是文本框、单选框、复选框、按钮等等；

<label>元素：表单中的标签控件；

<button>元素：表单中的按钮控件；

<select>与<option>元素：用于实现列表框和下拉菜单；

<textarea>元素：多行文本控件。

4、表单提交文本框的输入

下面是一个可以提交文本框输入的HTML文档：

<!DOCTYPE html>
<html>
<head>
<title>form001</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>请输入您的姓名：</label>
<input type="text" name="name" />
<br/>
<input type="submit"/>
</form>
</body>
</html>

在浏览器中打开该HTML文档时，展示效果如下：

我们可以在文本框中输入信息，例如输入tom：

当我们点击“提交”按钮后，浏览器显示信息如下；

可以看到，数据被提交给process.html页面，并且附带了一个参数name，且值为我们输入的tom。

5、表单提交用户对单选框的选择

下面是一个可以提交单选框被选信息的HTML文档：

<!DOCTYPE html>
<html>
<head>
<title>form002</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>性别：</label>
<br/>
男：<input type="radio" name="gender" value="male" />
女：<input type="radio" name="gender" value="female" />
<br/><br/>
<label>国籍：</label>
<br/>
中国：<input type="radio" name="nationality" value="Chinese" /> <br/>
美国：<input type="radio" name="nationality" value="American" /> <br/>
日本：<input type="radio" name="nationality" value="Japanese" /> <br/>
英国：<input type="radio" name="nationality" value="English" /> <br/>
其它：<input type="radio" name="nationality" value="Other" /> <br/>
<br/>
<input type="submit"/>
</form>
</body>
</html>

在浏览器中打开该HTML文档时，显示效果如下：

我们可以选择性别和国籍，例如我们选择“男”和“中国”：

当我们点击“提交”按钮后，浏览器显示信息如下：

可以看到，我们选择的信息被提交给process.html文件，并且附带了gender参数的值为male，nationality参数的值为Chinese。

6、表单提交用户对复选框的选择

下面是一个可以提交复选框被选信息的HTML文档；

<!DOCTYPE html>
<html>
<head>
<title>form003</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>请选择您的业余爱好：</label>
<br/>
美术：<input type="checkbox" name="hobby" value="Art" /> <br/>
足球：<input type="checkbox" name="hobby" value="Football" /> <br/>
唱歌：<input type="checkbox" name="hobby" value="Singing" /> <br/>
厨艺：<input type="checkbox" name="hobby" value="Cook" /> <br/>
其它：<input type="checkbox" name="hobby" value="Other" /> <br/>
<br/>
<input type="submit"/>
</form>
</body>
</html>

在浏览器中打开该HTML文档时，显示效果如下：

我们可以选择自己的业余爱好，例如我们选择足球、唱歌、厨艺：

当我们点击“提交”按钮后，浏览器显示信息如下：

可以看到，我们选择的信息被提交给process.html文件，并且附带了三个hobby参数，其值分别为Football，Singing和Cook。

7、表单提交用户对下拉菜单的选择

下面是一个可以提交下拉菜单被选信息的HTML文档；

<!DOCTYPE html>
<html>
<head>
<title>form004</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>请选择您的学历：</label>
<br/>
<select name="education">
<option value="primary_school">小学</option>
<option value="junior_high_school">初中</option>
<option value="senior_high_school">高中</option>
<option value="college">大学</option>
</select>
<br/><br/>
<label>请选择您的兴趣爱好：</label>
<br/>
<select name="hobby" multiple="true">
<option value="Art">美术</option>
<option value="Football">足球</option>
<option value="Singing">唱歌</option>
<option value="Cook">厨艺</option>
<option value="Other">其它</option>
</select>
<br/><br/>
<input type="submit"/>
</form>
</body>
</html>

在浏览器中打开该HTML文档时，显示效果如下：

我们可以单选我们的学历，也可以通过按下Shift+鼠标键多选我们的兴趣。例如我们选择“初中”学历，选择“美术”和“厨艺”两项爱好：

当我们点击“提交”按钮后，浏览器显示信息如下：

可以看到，我们选择的信息被提交给process.html文件，并且附带了education参数和两个hobby参数，education的值为junior_high_school，hobby的值为Art和Cook。

上面列举了几种控件的HTML5表单设计方法，其它的控件也大概差不多，把多个控件组合在同一个<form>元素中的方法也是相同的，这里就不再赘述了。

么是HTML5

官方概念：HTML5草案的前身名为Web Applications 1.0，是作为下一代互联网标准,用于取代html4与xhtml1 的新一代标准版本,所以叫html5。它增加了新的标签和属性，加强了网页的标准、语义化与web表现性能，同时还增加了本地数据库等 Web 应用的功能。

广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5，CSS3，Javascript，API在内的一套技术组合

HTML 5发展时间表

由上面图可知：现在的HTML5还不是一个最终统一的版本，所以说HTML5用在手机端的开发。

目前支持HTML5的浏览器

不同的浏览器显示的效果可能不一样。因为HTML5没有一个统一的标准。（现在处在一个推广阶段），但是大部分是一样的。

HTML5的特点

更简单

标签语义化

语法更宽松

多设备跨平台

自适应网页设计

从头说起——文档的声明

Xhtml1.0的页面架构

Html5的页面架构

HTML5标签的语义化

在以前的html中，盒子用div或span。

在html5中，标签的最大变化是标签都有了语义，以前的div和span都没有语义，仅仅表示一个盒子。

<header> 头标签

<nav> 导航标签

<aside> 侧边栏标签

<article> 文章标签

<footer> 页脚

<section> 章节，页眉，栏目

HTML5新增的表单三个属性

1、required：必填属性

2、placeholder：默认显示内容

3、autofocus：自动获取焦点

Html5中新增input标记的type属性

属性	描述
email	邮件
date	日期
url	网址格式
number	数字
range	范围
color	颜色

完整代码

<form>

邮件：<input type="email" name="email"><br>

日期：<input type="date" name="mydate"><br>

网址：<input type="url"><br>

手机号：<input type="number"><br>

亮度：<input type="range" min="0" max="255"><br>

颜色：<input type="color"><br>

地址：

</optgroup>

</optgroup>

</select><br>

搜索车型：<input type="text" list="car">

</datalist>

</form>

Range调背景色

代码如下：

<!doctype html>

<html>

<head>

<title>无标题文档</title>

//当页面准备完毕的时候

$(document).ready(function(e) {

$('input').change(function(e) {

var red=$('#red').val(); //得到红色的值

var green=$('#green').val(); //得到绿色的值

var blue=$('#blue').val(); //得到蓝色的值

var value=$(this).val(); //当前修改的值

$(this).next().html(value); //将值付给当前修改元素后面的span

$('body').css('background-color','rgb('+red+','+green+','+blue+')');

});

</script>

</head>

<body>

红色：<input type="range" id="red" min="0" max="255" value="255"><span>255</span><br>

绿色：<input type="range" id="green" min="0" max="255" value="255"><span>255</span><br>

蓝色：<input type="range" id="blue" min="0" max="255" value="255"><span>255</span>

</body>

</html>

音频播放

第一种写法

如果声音的格式html5不支持，就显示标记之间的提示信息

第二种写法：

视频播放

使用video标记来插入视频 autoplay表示自动播放，controls表示显示控制面板。

360音乐导航

完整代码如下:

#nav{

list-style-type:none; /*去掉无序列表前面的点*/

margin:50px auto 0px; /*上边界50px,左右居中，下边界为0*/

width:960px; /*整个导航的宽度*/

height:38px;

color:#333;

font-size:14px;

padding:0px; /*填充清0*/

overflow:hidden; /*超出尺寸的部分不显示*/

}

#nav li{

width:105px;

height:36px;

float:left; /*所有的li从左到右排列*/

text-align:center; /*文字居中对齐*/

line-height:38px; /*设置行高，目的是让文字垂直居中*/

border-top:#C9CBCE solid 1px;

border-left:#C9CBCE solid 1px;

border-bottom:#C9CBCE solid 1px;

cursor:pointer; /*光标移动到li上变成手形*/

}

#nav li:last-child{ /*#nav下的最后一个li*/

border-right:#C9CBCE solid 1px;

}

#nav .liclick{

border-top:#54B82A solid 2px;

border-bottom:none;

}

#nav span{

width:100%;

height:38px;

display:block; /*只有块显示标记才能设置宽度和高度*/

position:relative; /*相对定位，目的为了span可以移动*/

z-index:-1; /*设置span上下层的顺序，让它在文字的下面*/

}

</style>

$(document).ready(function(e) {

//点击li

$('#nav li').click(function(e) {

$('.liclick').removeClass('liclick');

$(this).addClass('liclick');

});

//每个li下面添加一个底色

var color=['#B9D329','#C0EBF7','#B9D329','#69BCF3','#79D9F3','#FA5F94','#ACD180','#FAB4CC','#FFAE5B'];

$('#nav li').append('<span>');

$('#nav span').each(function(index, element) {

$(this).css('background-color',color[index]);

});

//移动到li上的时候颜色色块升起

$('#nav li').hover(function(){

$(this).children('span').animate({'top':-38},200);

//获得当前li的索引编号

var index=$(this).index();

$('audio').get(index).play(); //播放第index个音乐

},function(){

$(this).children('span').animate({'top':0},200);

});

</script>

</head>

<body>

</ul>

</body>

相关例题：http://pan.baidu.com/s/1hsDGA8k 密码：55ic

在线咨询

上一篇：HTML编码规范
下一篇：10000套建站模板，5步带你搭建自己的网站，「适合新手」

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

web前端开发技术之浅谈对HTML5 智能表单的理解

1、Web前端与Web后端的交互

2、GET请求和POST请求

3、表单的主要元素

4、表单提交文本框的输入

5、表单提交用户对单选框的选择

6、表单提交用户对复选框的选择

7、表单提交用户对下拉菜单的选择

您的项目需求