一 HTML5 新的类型

　　HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

  • email
  • url
  • number
  • range
  • Date pickers (date, month, week, time, datetime, datetime-local)
  • search
  • color

1 Input 类型 - email

　　email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。

　　例子：

E-mail: <input type="email" name="user_email" />

提示：iPhone 中的 Safari 浏览器支持 email 输入类型，并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项），Android也同样适用。

2 Input 类型 - url

　　url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。

　　例子：

Homepage: <input type="url" name="user_url" />

提示：iPhone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 .com 选项）。

3 Input 类型 - number

　　number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定：

　　例子：

Points: <input type="number" name="points" min="1" max="10" />

　　number类型的属性列表：

属性  值 描述
max number 规定允许的最大值
min number 规定允许的最小值
step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value number 规定默认值

4 Input 类型 - range

　　range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。还能够设定对所接受的数字的限定。

　　例子：

<input type="range" name="points" min="1" max="10" />

　　下面的属性来规定对数字类型的限定：

 属性 值 描述
max number 规定允许的最大值
min number 规定允许的最小值
step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value number 规定默认值

5 Input 类型 - Date Pickers（日期选择器）

　　HTML5 拥有多个可供选取日期和时间的新输入类型：

  • date - 选取日、月、年
  • month - 选取月、年
  • week - 选取周和年
  • time - 选取时间（小时和分钟）
  • datetime - 选取时间、日、月、年（UTC 时间）
  • datetime-local - 选取时间、日、月、年（本地时间）

　　例子：

Date: <input type="date" name="user_date" />

Month: <input type="month" name="user_date" />

Week: <input type="week" name="user_date" />

Time: <input type="time" name="user_date" />

Date and time: <input type="datetime" name="user_date" />

Date and time: <input type="datetime-local" name="user_date" />

6 Input 类型 - search

　　search 类型用于搜索域，比如站点搜索或 Google 搜索。search 域显示为常规的文本域。
　　例子：

<input type=“search” name=“inputSearch” results=“n”  />

二 HTML5 表单元素

1 datalist 元素　　

　　datalist 元素规定输入域的选项列表。列表是通过 datalist 内的 option 元素创建的。如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：

　　例子：

<!DOCTYPE HTML>

<html>

<body>

<form action="/example/html5/demo_form.asp" method="get">

Webpage: <input type="url" list="url_list" name="link" />

<datalist id="url_list">

    <option label="W3School" value="http://www.w3school.com.cn" />

    <option label="Google" value="http://www.google.com" />

    <option label="Microsoft" value="http://www.microsoft.com" />

</datalist>

<input type="submit" />

</form>

</body>

</html>

提示：option 元素永远都要设置 value 属性。

2 output 元素

　　output 元素用于不同类型的输出，比如计算或脚本输出;

　　例子：

<!DOCTYPE HTML>

<html>

    <head>

        <meta charset="utf-8" />

        <script type="text/javascript">

            function resCalc() {

                numA = document.getElementById("num_a").value;

                numB = document.getElementById("num_b").value;

                document.getElementById("result").value = Number(numA) + Number(numB);

            }

        </script>

    </head>

    <body>

        <p>使用 output 元素的简易计算器：</p>

        <form onsubmit="return false">

            <input id="num_a" /> +

            <input id="num_b" /> =

            <output id="result"  ></output>

            <br />

            <button onclick="resCalc()"  >计算结果</button>

        </form>

    </body>

</html>

三 HTML5 表单属性

　　HTML5 的新的表单属性，主要是 <form> 和 <input> 元素的新属性。

1 新的 form 属性

1）autocomplete 属性
　　autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text,
search, url, telephone, email, password, datepickers, range 以及 color。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
　　实例：

<!DOCTYPE HTML>

<html>

    <header>

        <meta charset="utf-8" />

    </header>

    <body>

        <form action="#" method="get">

            姓氏：<input type="text" name="LastName" value="" autocomplete="on" /><br />

            名字：<input type="text" name="FirstName" value="" autocomplete="off" /><br />

            <input type="submit" />

        </form>

    </body>

</html>

2) autofocus 属性
　　autofocus 属性规定在页面加载时，域自动地获得焦点。autofocus 属性适用于所有 <input> 标签的类型。

　　例子：

<!DOCTYPE HTML>

<html>

    <body>

        <form action="/example/html5/demo_form.asp" method="get">

             First Name: <input type="text" name="first_name"   />     <br />

             Last name: <input type="text" name="last_name" autofocus="autofocus" /><br />

            <input type="submit" />

        </form>

    </body>

</html>

3) form 属性
　　form 属性规定输入域所属的一个或多个表单。form 属性适用于所有 <input> 标签的类型。form 属性必须引用所属表单的 id.

　　例子：

<!DOCTYPE HTML>

<html>

<body>

<form action="/example/html5/demo_form.asp" method="get" id="user_form">

First name:<input type="text" name="fname" />

<input type="submit" />

</form>

<p>下面的输入域在 form 元素之外，但仍然是表单的一部分。</p>

Last name: <input type="text" name="lname" form="user_form" />

</body>

</html>

4)表单重写属性
　　表单重写属性（form override attributes）允许您重写 form 元素的某些属性设定。
　　表单重写属性有：

  • formaction - 重写表单的 action 属性
  • formmethod - 重写表单的 method 属性

　　注释：表单重写属性适用于以下类型的 <input> 标签：submit

　　例子：

<!DOCTYPE HTML>

<html>

<body>

<form action="/example/html5/demo_form.asp" method="get" id="user_form">

E-mail: <input type="email" name="userid" /><br />

<input type="submit" value="Submit" /><br />

<input type="submit" formaction="/example/html5/demo_admin.asp" value="Submit as admin" /><br />

</form>

</body>

</html>

5) list 属性

　　list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
　　注释：list 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, date pickers, number, range 以及 color。
　　例子：

Webpage: <input type="url" list="url_list" name="link" />

<datalist id="url_list">

<option label="W3Schools" value="http://www.w3school.com.cn" />

<option label="Google" value="http://www.google.com" />

<option label="Microsoft" value="http://www.microsoft.com" />

</datalist>

6）min、max 和 step 属性
　　min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
　　max 属性规定输入域所允许的最大值。
　　min 属性规定输入域所允许的最小值。
　　step 属性为输入域规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）。
　　注释：min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。
　　下面的例子显示一个数字域，该域接受介于 0 到 10 之间的值，且步进为 3（即合法的值为 0、3、6 和 9）：
　　例子：

Points: <input type="number" name="points" min="" max="" step="" />

7）pattern 属性

　　pattern 属性规定用于验证 input 域的模式（pattern）。
　　模式（pattern） 是正则表达式。您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容。
　　注释：pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
　　下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：

Country code: <input type="text" name="country_code"

pattern="[A-z]{3}" title="Three letter country code" />

8）placeholder 属性
　　placeholder 属性提供一种提示（hint），描述输入域所期待的值。
　　注释：placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
　　提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：

<input type="search" name="user_search"  placeholder="Search W3School" />

9）required 属性
　　required 属性规定必须在提交之前填写输入域（不能为空）。
　　注释：required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

Name: <input type="text" name="usr_name" required="required" />

10) enctype 属性

　　enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码。
　　默认是对表单数据以 "application/x-www-form-urlencoded" 进行编码。这意味着在发送前对所有字符进行编码（把 "+" 转换为空格，把特殊字符转换为 ASCII 十六进制值）。

综合例子

<!DOCTYPE html >

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title></title>

        <meta charset="utf-8" />

        <style>

            * {

                margin: 0px;

                padding: 0px;

            }

            header,

            nav,

            article,

            aside,

            footer {

                border: 1px solid greenyellow;

                padding: 10px;

                //margin: 0px;

            }

            header{

                width: 1070px;

            }

            nav{

                float: left;

                width: 200px;

                height: 500px;

            }

            article{

                float: left;

                width:  500px;

                 height: 500px;

            }

            aside{

                float: left;

                width: 326px;

                 height: 500px;

            }

            footer{

                clear: both;

                width: 1070px;

            }

        </style>

    </head>

    <body>

        <header>

            导航

        </header>

        <nav>菜单

        </nav>

        <article>

            内容</article>

        <aside>

            侧边栏</aside>

        <footer>

            尾部</footer>

    </body>

</html>

计算数据：


-

-

内边框+ 内边距 

外边框   *  = 

 -  -  =

参考资料：

http://www.w3school.com.cn/html5/html_5_form_attributes.asp

http://www.w3school.com.cn/html5/att_form_enctype.asp

HTML5学习总结-05 HTML5表单的更多相关文章

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

    HTML表单 1. 表单用于不同类型的用户输入 2. 常用的表单标签: 标签 说明 <form> 表单 <input> 输入域 <textarea> 文本域 < ...

  2. 读书笔记：《HTML5开发手册》Web表单

    这是补充HTML5基础知识的第五篇内容,其他为: 一.HTML5-- 新的结构元素 二.HTML5-- figure.time.details.mark 三.HTML5-- details活学活用 四 ...

  3. html5中新增的form表单属性

    html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...

  4. Bootstrap3.0学习第六轮(表单)

    Bootstrap3.0学习第六轮(表单) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.h ...

  5. Ext JS4 学习笔记之发送表单（Form）时也将表单下的表格（Grid）数据一同发送的方法

    Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...

  6. 感谢各位亲们的大力支持，免费的HTML5学习课程《HTML5网页开发实例具体解释》连载已经结束了！

    感谢各位亲们的大力支持,免费的HTML5学习课程<HTML5网页开发实例具体解释>连载已经结束了.  有兴趣的读者能够看我的博客,也能够看以下的链接逐个学习: 当里个当.免费的HTML5连 ...

  7. HTML5+CSS：02用户注册表单

            新的学期已开始接近两个月了,还记得是在国庆节那几天申请的博客账号,可过了一个月都还没开始写博客,(>_<)有点小偷懒了,不过,学习还是不能落下的,今写一个有点实践运用的关于 ...

  8. html5图片异步上传/ 表单提交相关

    1 form 表单 get/post提交时候. action地址(或者啥ajax的url地址) 会涉及到跨域问题 常见跨域问题http://www.cnblogs.com/rainman/archiv ...

  9. Html5中input新增的表单元素和属性介绍。

    input标签主要用于Web表单的创建交互,以便接受来自用户的数据. 我们通过更改type属性的值,来实现不同的输入类型.在以前的写法中表单元素必须放在form元素所包含的里面,而在html5中,我们 ...

随机推荐

  1. 3到6年的.NETer应该掌握哪些知识？

    我们组的开发人力一直比较紧张,今年春节后,高层终于给了几个headcount,我们可以开始招人了.从三月初我们就开始找简历,渠道有拉钩,内推,我司自己的招聘网站和智联等.简历筛了很多,也打了很多电话, ...

  2. ASP.NET XmlSerializer权限问题

    今天碰到一个奇怪问题.因为在2台服务器上做文件共享,使服务器A能访问服务器B的共享目录.在IIS上使用虚拟目录实现的话,需要给应用程序池指定一个统一的账号.在调试的时候能够使用,但是一部署到服务器上, ...

  3. 利用PhotoShop将Font-Awesome转为图片格式

    介绍如何将Font-Awesome等字体图标转换为图片格式,使用PHOTPSHOP很简单. 网上找了很多,都比较麻烦.别问为什么要这么做,因为你还没遇到需要的时候. 下载Font-Awesome字体库 ...

  4. Linq连接查询之左连接、右连接、内连接、全连接、交叉连接、Union合并、Concat连接、Intersect相交、Except与非查询

    内连接查询 内连接与SqL中inner join一样,即找出两个序列的交集 Model1Container model = new Model1Container(); //内连接 var query ...

  5. keypress，keydown，keyup，charCode，keyCode兼容性问题

    keypress对应的是字符编码,如“ABC”,“123”之类,有大小写之分(有兼容性问题) keydown,keyup对应的是键盘的键码,无大小写之分,每个键盘都有一个键码(无兼容性问题) 使用ke ...

  6. Linux下sysstat工具学习

    Linux下,我们多用ssh链接服务器远程操控.对于系统的监控必不可少,sysstat很不错的监控工具包. sysstat官网:http://sebastien.godard.pagesperso-o ...

  7. ubuntu-16.4TLS安装QQ

    01下载Winqq 下载地址:http://www.ubuntukylin.com/application/show.php?lang=cn&id=27902解压zip unzip wine- ...

  8. 桔子浏览器|1M安装包|hao123专属浏览器

    桔子浏览器是百度为好123打造的首页导航浏览器,体积小.为老年机上网提供便利. 免费下载:http://yunpan.cn/cmKbYXamEVUiY  访问密码 d270

  9. 【The Expendables】团队博客目录

    站立式会议: •[alpha版本]第一次站立式会议  •[beta版本]冲刺计划                •[beta版本]冲刺总结 •[alpha版本]第二次站立式会议  •[beta版本]第 ...

  10. The hierarchy of the type NsRedisConnectionFactory is inconsistent

    The hierarchy of the type is inconsistent 解释为:层次结构的类型不一致 由于我在eclipse里建了两个JAVA PROJECT项目,分别是A projiec ...