html5表单控件（html常见表单控件及特点）

今天给各位分享html5表单控件的知识，其中也会对html常见表单控件及特点进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、HTML5中表单验证的好处
• 2、h5是什么意思？
• 3、HTML5表单标签，与浏览器交互
• 4、HTML5重点内容总结
• 5、表单有哪些html5新控件?
• 6、HTML5中表单内置验证规则是什么，有哪些内置验证规则呢？

HTML5中表单验证的好处

HTML5中表单验证有如下好处：

1、可判断用户是否已填写表单中的必填项目。

2、可判断用户输入的邮件地址是否合法。

3、可判断用户是否已输入合法的日期。

4、可判断用户是否在数据域(numeric field)中输入了文本。

表单验证通常采用策略模式的思想，把一个个验证规则封装成一个函数，比如非空规则、最大长度规则等，不同的输入框选择某一个或者某几个规则进行验证。

扩展资料：

HTML表单一直都是Web的核心技术之一，有了它才能在Web上进行各种各样的应用。HTML5 Forms新增了许多新控件及其API，方便做更复杂的应用，而不用借助其它Javascript框架。

表单有以下几个基本知识点：

1、表单仍是以form元素作为容器，可在其中设置基本的提交特性。

2、当用户提交页面时，表单仍然向服务器发送表单控件的值。

3、之前老版本中的表单控件，如text radio checkbox等等，都可以按原有方式使用，尽管增加了新的功能。

4、仍然可以使用javascript操作表单控件。

h5是什么意思？

h5为html5简称，即超文本标记语言修订版5，是万维网内容的结构和表示的标记语言。HTML5支持传统的HTML和XHTML样式语法以及其标记，新API，XHTML和错误处理中的其他新功能。

html5是指万维网的核心语言、 标准通用标记语言下的一个应用 超文本标记语言（ HTML）的第五次重大修改。2014年10月29日， 万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。

HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式，包括新的解析规则增强了灵活性、新属性、淘汰过时的或冗余的属性等。

HTML5 的新功能包括：•新的解析规则不是基于 SGML，而是面向灵活的解析和兼容性。•支持在 text / html 中使用内联标量矢量图形（SVG）和数学标记语言（MathML）。•新的可用元素包括文章，旁边，音频，bdi，画布，命令，datalist，细节，嵌入，figcaption，图，页脚，标题，hgroup，keygen，标记，米，导航，输出，进度，rp，rt，红宝石，部分，来源，摘要，时间，视频和 wbr。•新的可用类型的表单控件包括日期和时间，电子邮件，URL，搜索，数字，范围，电话和颜色。•meta 上的 charset 和脚本上的异步的新可用属性。•可应用于包含 id，tabindex，hidden，data- *或 customer 数据属性的每个元素的全局属性。

H5有哪些优势？

H5的最显著的优势在于跨平台性，用H5搭建的站点与应用可以兼容PC端与移动端、Windows与Linux、安卓与IOS。它可以轻易地移植到各种不同的开放平台、应用平台上，打破各自为政的局面。这种强大的兼容性可以显著地降低开发与运营成本，可以让企业特别是创业者获得更多的发展机遇。

此外，H5的本地存储特性也给使用者带来了更多便利。基于H5开发的轻应用比本地APP拥有更短的启动时间，更快的联网速度，而且无需下载占用存储空间，特别适合手机等移动媒体。而H5让开发者无需依赖第三方浏览器插件即可创建高级图形、版式、动画以及过渡效果，这也使得用户用较少的流量就可以欣赏到炫酷的视觉听觉效果。

H5主要应用于哪些方面？

我们经常在朋友圈、各种群看到的炫酷页面就是使用H5制作，而网站技术发展到今天，崇尚技术的公司也使用了H5制作网站，譬如米拓企业建站系统，所有的模板都是采用H5制作，无论电脑、平板、手机访问都能非常友好的展示。

HTML5表单标签，与浏览器交互

1、form表单：网址与用户交互，把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

语法： form method="传送方式" action="服务器文件"

          form ： 标签是成对出现的，以开始，以/form结束。

          action   ： 浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

          method   ：  数据传送的方式（get/post）。

2、文本输入框、密码输入框

语法：

form

  input type="text/password" name="名称" value="文本" /

/form

type：

当type=" text "时，输入框为 文本 输入框 ;

当type=" password "时, 输入框为 密码输入框。

name： 为文本框命名，以备后台程序ASP 、PHP使用。

value： 为文本输入框设置默认值。(一般起到提示作用)

3、占位符placeholder,属性，有时候需要提示用户输入框需要输入框的内容

     4、input标签中的数字框number类型

       input type="number"/  ：输入框中只能输入数字，输入其他字符无效，输入框右侧会有加减符号，可以调整输入数字的大小，浏览器不同表现不一致。

5、input标签中的网址框url类型

input type="url"/： 数字框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示

6、input标签中的邮箱框的email类型

    input type="email" / ： 表示该输入框的类型为邮箱；数字框的值必须包含@；数字框的值@之后必须有内容,否则会报错误提示。

7、textarea标签创建文本域

      语法：  textarea rows=" 行数" cols=" 列数" 文本/textarea

8、label为input标签穿上衣服：如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）

        语法：label for="控件id名称" （标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。）

9、单选框、复选框

    input type="radio/checkbox" value="值" name="名称" checked="checked"/

    type:    当  type="radio"  时，控件为 单选框

                当  type="checkbox"  时，控件为 复选框

     value： 提交数据到服务器的值（后台程序PHP使用）

     name： 为控件命名，以备后台程序 ASP、PHP 使用

     checked： 当设置 checked="checked" 时，该选项被默认选中

        注意： 同一组 的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。

10、使用select option创建下拉菜单 （select标签里面只能放option标签，表示下拉列表的选项）

        设置selected="selected"属性，则该选项就被默认选中。

    11、提交/重置 按钮

      语法：input type="submit"value="提交"

                input  type="reset"  value="重置"

HTML5重点内容总结

一、 HTML5新增的标签

（1）header nav main  footer  section article hgroup  figure figcaption  aside 

    video  audio canvas

                （2）如何让新标签兼容低版本浏览器：  html5shiv.js

二、 HTML5新增的表单控件

    一、表单控件的新属性

            input type="text"  placeholder=""  required  autofocus  pattern="abc"

    二、新增的表单控件

    （1）input type="email"

    （2）input type="url"

      （3）数字控件：  type="number"

      (4)  滑动组件：  type="range"

      (5)  拾色器：      type="color"

      (6)  日期控件：    type="date"

三、本地存储

    1、 三种本地存储 ：  cookie webStorage(localStorage  sessionStorage)

    2、localStorage的API

      (1)写入：  localStorage.setItem(键，值);  //值只能是字符串

        localStorage.user = "123" localStorage["user"] = "123"

      （2）读取  var user = localStorage.getItem("user")

                  var user = localStorage.user;

        (3)删除：  localStorage.removeItem("user")    localStorage.clear()

        （4）修改：  localStorage.setItem("user","890")

    3、sessionStorage的API

sessionStorage.setItem(键，值);

        sessionStorage.getItem(键);

        sessionStorage.removeItem(键);

sessionStorage.clear();

    **********重点**********

      4、cookie webStorage(localStorage  sessionStorage)三者的区别

四、离线存储

    （1） *.manifest  (*.appcache) 

          index.html  html manifest="*.manifest"

    (2) 理解离线存储的更新方式

五、移动端的布局思路：

1、设备像素比（倍率）  逻辑像素尺寸 （360px  320px  375px  414px）

            window.devicePixelRatio

        2、 meta name="viewport" content="width=device-width,maximum-

scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no""

3、使用rem单位

六、地理定位

if (navigator.geolocation){ 

            navigator.geolocation.getCurrentPosition(success,error,{

                timeout: 5000

            });

            function success(pos){

                纬度:  pos.coords.latitute

                经度：  pos.coords.longtitude

            }

        }

        navigator.geolocation.watchPosition(success);

七、地理定位和百度地图API的结合

八、视频，音频  video autoplay="autoplay" controls="controls" loop="loop" poster=""

preload="preload"  audio

九、移动端事件： 

(1) ontouchstart  ontouchmove  ontouchend

(2) 如何判断是否为移动端：  if ("ontouchstart" in document){}

        (3) 移动端事件的事件对象及常用属性

          e.touches[0].clientX  e.touches[0].clientY  e.touches[0].target

        (4) 移动端常见问题及解决方案：

a、 click事件 300ms的延迟：  1zepto的tap事件  （2） fastclick.js

b、 zepto的tap事件有点透问题 ：  （1） fastclick.js

        (5) zepto的touch模块：  tap  singleTap  doubleTap  longTap 

                swipeLeft  swipeRight  swipeUp  swipeDown

十、swiper.js的使用  （参考官网）

十一、 canvas

(1)  canvas width="600" id="can"/canvas    300*150

        (2)  var can = document.getElementById("can");

      var cxt = can.getContext("2d");

  cxt.beginPath();

  cxt.moveTo(100,200);

  cxt.lineTo(200,400);

              cxt.strokeStyle = '#f00';

  cxt.stroke();

                  cxt.clearRect(0,0,200,300);

                  context.globalCompositeOperation="destination-out";  (了解)

表单有哪些html5新控件?

表单中新增的控件(type属性)

email: 提交表单时检测值是否是一个电子邮件格式

url: 提交表单时检测值是否是一个url格式

date: 年-月-日格式的控件

time: 时:分格式的控件

datetime: 年-月-日 时:分 格式的控件（UTC时间）

datetime-local: 年-月-日 时:分 格式的控件（本地时间）

month: 年-月格式的控件

week: 年-周数格式的控件

number: 数字输入框

input type="number" name="" id="" value="60" max="100" min="0" /

range: 选择区域

input type="range" name="" id="" value="60" max="100" min="0" /

tel: 电话输入框

search: 用于搜索

color: 调用系统选色器

新增控件属性：

placeholder: 占位符，输入框提示信息

input type="text" autofocus placeholder=''/

required: 该input为必填项

autofocus: 在页面加载时，域自动地获得焦点

autocomplete="off/on":可以记录输入信息

必须有name属性 必须提交过

off==关闭 on==打开

input type="tel" name="user" id="" value="" autocomplete="on"/

pattern: 正则验证

input type="tel" pattern="[0-9]{7,12}"/

min/max: input能输入的最小/最大字节的长度

step: 针对number和range类型，每次递增step的值

list: 指定一个datalist，作为下拉提示单

HTML5中表单内置验证规则是什么，有哪些内置验证规则呢？

在HTML5中内置了很多表单的验证规则，这些验证规则会根据用户在input元素中输入的内容返回一个布尔值来告诉我们表单验证的状态。下面我们就来列举一些我们比较常用的内置验证规则吧：

ValueMising规则

示例：input type="text" required value=""

目的：确保表单控件(input元素在页面中是以一个控件的形式呈现的)中的值已填写。

用法：在表单控件中将required属性设置为true。因为required属性的默认值为true所以如示例中所示：在input元素中接添加required属性也是可以的。

详细说明：如果表单控件设置了required特性，那么在用户填写或者通过代码调用方式填值之前，控件会一直处于无效状态。例如，在示例中我们设置该控件的值为空，空的文本输入框无法通过必填检查，除非在其中输入任意文本。输入值为空时，valueMissing会返回true。表示没有通过验证。

typeMismatch规则

示例：input type=“url” value=“miaomiaoxue”/

目的：保证控件值与预期类型相匹配(如numbe、email、URL等)。

用法： 指定表单控件的type特性值为numbe、email、URL等规定文本输入规则的类型。

详细说明: 特殊的表单控件类型不只是用来定制手机键盘,如果浏览器能够识别出来表单控件中的输入不符合对应的类型规则,比如email地址中没有@符号，或者number型控件的输入值不是有效的数字，示例中URL型的空间不是一个标准的链接格式。那么浏览器就会把这个控件标记出来以提示类型不匹配。无论哪种出错情况，typeMismatch将返回true。表示没有通过验证。

patternMismatch规则

示例：input type="text" pattern=“/^[A-z]+$/" value=“1234“/

目的：根据表单控件上设置的格式规则验证输入的文本是否为有效格式

用法：在表单控件上设置pattern特性，井赋予适当的匹配规则。

详细说明：pattern特性向开发人员提供了一种强大而灵活的方式来为表单的控件值设定正则表达式验证机制。当为控件设置了pattern特性后，只要输入控件的值不符合模式规则，如示例中设定的正则表达式规则该控件的值含有字母和$符号，这里设置的值为1234，不符合规则设定，因此patternMismatch就会返回true值。从引导用户和技术参考两方面考虑，

你应该在包含pattern特性的表单控件中设置title特性以说明规则的作用。

tooLong规则

示例：input type=“text” maxlength=“3” value=“hello“/

目的：避免输入值包含过多字符。

用法：在表单控件上设置maxLength特性。

详细说明：如果输入值的长度超过maxLength，示例中最大限制设置为3，但值为hello，操过了3个字符的限制，tooLong规则就会返回true。虽然表单控件通常会在用户输入时限制最大长度，但在有些情况下，如通过程序设置，还是会超出最大值。

rangeUnderflow规则

示例：input type=“text” min=“3” max=“5” value=“0" /

目的：限制数值型控件的最小值。

用法：为表单控件设置min属性，并赋予允许的最小值。

详细说明：在需要做数值范围检查的表单控件中，数值很可能会暂时低于设置的下限，如示例中设置的值为0，而设置的min属性为3。此时，rangeUnderflow属性将返回true。

rangeOverflow规则

示例：input type=“text” min=“3” max=“5” value=“7" /

目的：限制数值型控件的最大值。

用法：为表单控件设置max属性，并赋予允许的最大值。

详细说明：与rangeUnderflow类似，如果一个表单控件的值比max属性值更大，如示例中设置的值为7，而设置的max属性为5。此时，rangeOverflow属性将返回true。

stepMismatch规则

示例：input type=“text” min=“0” max=“100” step=“5” value=“17" /

目的：确保输入值符合min、max及step即设置。

用法：为表单控件设置step特性，指定数值的增量。

详细说明：此约束条件用来保证数值符合min、max和step的要求。换句话说，当前值必须是最小值与step属性值的倍数之和。如示例中设置的数值范围为0到100，step特性值为5，此时就不允许出现17，而可以是“0+5*X”X为（0~20）中任意一个值皆可。否则stepMismatch返回true值。

valid规则

示例：input type=“range” min=“5” max=“20” step=“5” value=“10" /

目的：验证表单控件是否满足所有的表单验证规则

用法：适用于所有的input表单控件。

详细说明：当该表单控件满足所有验证规则时，valid属性就是true，否则，只要有一项验证规则没通过，valid属性会返回false。如示例所示就满足所有验证条件所以valid属性会返回true。注意前面几个验证属性是没有通过的情况下返回true。推荐你去教程网站秒秒学上过一遍相关知识，希望对你有帮助。

html5表单控件的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html常见表单控件及特点、html5表单控件的信息别忘了在本站进行查找喔。