1.HTML5表单新特性之——新的input type

<input type=" ">

HTML5之前已有的input type:

text、password、radio、checkbox、file、submit、reset、button、image、hidden

HTML5新增的input type:

1.Email:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示矿口(可定制内容不能定制样式)

<input type="email">

2.url:URL地址输入域。在表单提交时提供简单的URL地址格式验证,并弹出一个提示窗口

<input type="url">

3.number:数字输入域,在表单提交时提供简单的数字格式验证,并弹出一个提示窗口

<input type="number" min="" max="" step="">

4.tel:电话号码输入域,在手机浏览器中弹出数字键盘

<input type="tel">

5.search:搜索输入域,在手机浏览器中右下角呈现搜索按键

<input type="search">

6.range:范围选择控件,帮助用户在一定范围内选择一个数字

<input type="range" min="" max="" step="">

(7)color:颜色选择控件,浏览器并未自己实现颜色选择框,而是使用操作系统自带的颜色选择控件

<input type="color">

(8)date:日期选择控件,FF没有实现,推荐使用第三方插件代替,如jQueryUI-datepicker、laydate等

<input type="date">

(9)month:月份选择控件,FF没有实现

<input type="month">

(10)week:星期选择控件,FF没有实现

<input type="week">

HTML5新特性之表单新特性——新的表单元素

HTML5之前FORM可以有的标签——用于数据提交:

INPUT、TEXTAREA、SELECT/OPTION、BUTTON

HTML5新增表单元素——用于信息提示,不能用于数据提交

(1)datalist:数据列表,配合option使用,本身为不可见元素,为普通的input提供输入建议列表

<datalist id="l"><option>XXX</option></datalist>

<input type="text" list="l">

(2)progress:进度条,未指定value属性则显示为“进行中”样式;若指定了value(默认在0~1之间)就可以控制其显示的进度

<progress value="0.5"></progress>

(3)meter:刻度尺/度量衡,用红黄绿三色表示出一个数值所处的范围:不可接受/可以接受/最优范围

<meter min="最小可能值" max="最大的可能值" low="合理的下限" high="合理的上限" optimum="最优值" value="实际值"></meter>

(4)output:输出,用于描述表单中的计算结果,语义标签,样式与SPAN无异。

<output>xxx</output>

HTML5新特性表单新特性——表单元素新的属性——重点

HTML5之前表单元素可用的属性:

id、class、title、style、type、name、value、checked、selected、disabled、readonly

HTML5之前表单元素新增的属性:

(1)autocomplete:on/off,自动补全,是否自动记录之前提交的数据,以用于下一次输入建议

<input autocomplete="off">

(2)placeholder:站位符,用于在输入框中显示提示性文字,与value不同,不能被提交

<input placeholder="提示性文字">

(3)autofocus:false/true,自动获得输入焦点

<input autofocus>

(4)multiple:false/true,是否允许多个输入值,若声明了该属性,输入框中(如email)就允许输入用逗号分隔的多个值

<input type="email" multiple>

(5)form:为一个元素指定form属性,值为某个表单的ID,则此输入域可以放到表单的外部

<form id="f"></form>

<input form="f">

========上述五个属性是新的通用属性===========

=======上述六个属性是输入验证相关属性========

(6)required:false/true,必需的/必填项,在表单提交时会验证是否有输入,没有输入则弹出提示消息

<input required>

(7)maxlength:最大长度,在有输入的情况下,限定输入域中字符的个数

<input maxlength="9">

(8)minlength:最小长度,在有输入的情况下,限定输入域中字符的个数,不是HTML5标准属性,仅部分浏览器支持(如Chrome)

<input minlength="6">

(9)min:限定输入的数字的最小值

<input min="">

(10)max:限定输入的数字的最大值

<input max="">

(11)step:限定输入的数字的步长,与min属性连用

<input step="">

(12)pattern:指定一个正则表达式,对输入进行验证

<input pattern="1[3578]\d{9}">

注意:上述正则表达式可以省略^和$

H5表单新特性的更多相关文章

  1. HTML5 十大新特性(二)——表单新特性

    H5的表单新特性可以分为两大类. 一.10个input的type值 1.email:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示窗口. 2.url:地址输入域,在表单提交时提供简单的 ...

  2. HTML5_01之表单新特性

    1.WebStorm快捷键: Ctrl+Alt+(向下方向键):快速复制当前行 Alt+(向上/下方向键):移动当前行 Ctrl+D:删除当前行 Ctrl+/:快速(取消)注释当前行 Ctrl+Alt ...

  3. HTML5基础知识汇总_(2)自己定义属性及表单新特性

    自己定义属性data-* 说起这个属性,事实上如今非经常见了;怎么说呢,由于在一些框架都能看到他的身影!!! 比方Jquery mobile,里面非常频繁的使用了这个属性; 这个属性是哪里来的-.当然 ...

  4. html5表单新特性

    type=range 值区域范围 默认值(0-100) type=data  选择日期 type=color value='初始值' 颜色选择器控件 type=search 搜索框效果 type=im ...

  5. H5表单

    H5表单 HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. 本章全面介绍这些新的输入类型: email url number range ...

  6. 完善:HTML5表单新特征简介与举例——张鑫旭

    一.前言一撇 其实关于HTML5的表单特征早在去年“你必须知道的28个HTML5特征.窍门和技术”一文中就有所介绍(在第十一项),不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦 ...

  7. 基于react hooks,zarm组件库配置开发h5表单页面

    最近使用React Hooks结合zarm组件库,基于js对象配置方式开发了大量的h5表单页面.大家都知道h5表单功能无非就是表单数据的收集,验证,提交,回显编辑,通常排列方式也是自上向下一行一列的方 ...

  8. HTML5表单新属性

    HTML5表单新属性 autofocus  自动聚焦 <input type="text" autofocus> placeholder占位文本 tel         ...

  9. HTML5新表单新功能解析

    HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. <!DOCTYPE ...

随机推荐

  1. 从Windows转mac遇到的一些坑

    本屌由于运气,分了一台imac来办公,由于以前一直都在用windows,现在用Mac有很多不适应的地方.下面介绍一下Mac与Windows有明显区别的地方: mac与windows鼠标滑轮方向不同. ...

  2. C/C++中回调函数【重要】

    参考学习:https://www.cnblogs.com/xuelisheng/p/9339924.html 1. 回调函数定义 回调函数就是一个通过函数指针调用的函数. 如果你把 函数的指针(地址) ...

  3. SharpGL学习笔记(一) 平台构建与Opengl的hello World (转)

    (一)平台构建与Opengl的hello World OpenGL就是3d绘图的API,微软针和它竞争推出D3D,也就是玩游戏时最常见的DirectorX组件中的3d功能. 所以不要指望windows ...

  4. Swift4.0复习错误处理

    1.Swift中错误的表示: “在Swift中如果我们要定义一个表示错误的类型非常简单,只需遵循 Error 协议即可.我们通常用枚举或结构体类型来表示错误类型,当然枚举可能用得更多些,因为它能更直观 ...

  5. dockerfile里面的内容编写顺序,必须严格按照顺序编写,否则编译不成

    完整文档请参照https://www.cnblogs.com/effortsing/p/10480972.html 这里只介绍dockerfile里面的步骤顺序 cat>/home/jenkin ...

  6. 【编程基础】CppLint工具使用过程

    前言 coding最好要形成一定的编程风格,一般常用的开源风格有google code style,可以使用cpplint工具检查是否符合该编程风格. 目录 1. linux系统使用过程: 2. wi ...

  7. .Net Core 程序报错 在上一个操作完成之前,在此上下文上启动了第二个操作。

    错误一: 程序完整报错: A second operation started on this context before a previous operation completed. This ...

  8. WPF 使用winform的webbrowser

    首先要添加如下引用: WindowsFormsIntegration System.Drawing System.Windows.Forms 然后在xaml中添加引用 xmlns:winform=&q ...

  9. XML字符串和JAVA对象之间的转化

     1.JAXB中相关的注解.类和接口说明 JAXB 中主要的一些注解 - shenyunsese 的专栏 - CSDN 博客 注:教程很全面很详细.但是仅供参考. 主要疑问区分和说明:  1.1 @X ...

  10. android基础---->传感器的使用

    现在每部Android 手机里面都会内置有许多的传感器,它们能够监测到各种发生在手机上的物理事件,而我们只要灵活运用这些事件就可以编写出很多好玩的应用程序.今天我们开始简单的传感器使用的学习. 目录导 ...