`
haiyupeter
  • 浏览: 426146 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

HTML5 Forms

阅读更多
表单元素类型
常用:tel, email, date, url, search, range, datetime

Chrome26.0浏览器下测试
email: 只做最基本的校验 *@*.*
url: 链接类型的判断 *:*(居然只做冒号的校验,输入a:a可正常提交
date: chrome日期类型控件

time: 支持小时和分钟的显示
week: 一年中的第几周, value表示为2013-W16(一年中的第16周)
month: 一年中的第几月, value表示为2013-04
tel: chrome浏览器暂未支持tel标签,应该是有手机和固话的原因
range: range支持是1-100的显示
search: search类型,支持点叉叉,将已有文本删除
color: 颜色选择
number: 控件右边提供加,减按钮,可以对数值进行加减
datetime-local: 日期时间组件,可同时选择日期和日间

浏览器根据不同的元素类型决定相应的展现面板,比如日期时间,需要下拉日历及时间等,同时需要对其进行校验

测试代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Html5 Form 表单测试</title>
</head>
<body>
    <form action="aa.co" method="get">
        <span>Email类型:</span><input type="email" name="email"><br/>
        <span>Url类型:</span><input type="url" name="url"><br/>
        <span>Date类型:</span><input type="date" name="date_begin"><br/>
        <span>Tel类型:</span><input type="tel" name="tel"><br/>
        <span>Range类型:</span><input type="range" name="range" value="8"><br/>
        <span>Search类型:</span><input type="search"><br/>
        <span>Time类型:</span><input type="time"><br/>
        <span>Week类型:</span><input type="week" id="week"><br/>
        <span>Month类型:</span><input type="month" id="month"><br/>
        <span>Color类型:</span><input type="color"><br/>
        <span>Number类型:</span><input type="number"><br/>
        <span>DateTime类型:</span><input type="datetime-local"><br/>
        <button type="submit">提交</button>
    </form>
</body>
</html>


新属性
常用:

placeholder:在html5中这个非常的有用,旧的实现用一个浮层div盖在input元素上面

autocomplete:表单输入自动提示,若你要自己做自动提示组件,则autocomplete属性要设置成false或者是off

required:有输入值才能提交表单


不常用:

autofocus

list和datalist

min和max

step

valueAsNumber


表单验证
required

maxLength

minLength

min

max


表单验证,涉及用户交互,系统行为,表单本身不宜涉及太多,现有很多校验代码,API抽象也不错,可以直接使用,暂时没有必要部分依赖于html5的表单校验

参考:
HTML5之表单新功能详解
  • 大小: 24.3 KB
分享到:
评论

相关推荐

    完整版《HTML5高级程序设计》5

    7.1.3 HTML5 Forms的浏览器支持情况 140 7.1.4 输入型控件目录 141 7.2 使用HTML5 Forms API 144 7.2.1 新的表单特性和函数 144 7.2.2 表单验证 147 7.2.3 验证反馈 151 7.3 构建HTML5 Forms应用 152 7.4 小结 157 ...

    HTML5高级程序设计

    从第2 章起,分别围绕构建令人神往的富web 应用,逐一讨论了html5 的canvas、geolocation 、communication、websocket、forms、web workers、storage 等api 的使用, 辅以直观明了的客户端和服务器端示例代码,让...

    完整版《HTML5高级程序设计》2

    7.1.3 HTML5 Forms的浏览器支持情况 140 7.1.4 输入型控件目录 141 7.2 使用HTML5 Forms API 144 7.2.1 新的表单特性和函数 144 7.2.2 表单验证 147 7.2.3 验证反馈 151 7.3 构建HTML5 Forms应用 152 7.4 小结 157 ...

    HTML5.Quick.Markup.Reference

    This book is a condensed ...Chapter 15: HTML5 Forms: Creating Forms Using HTML5 Tags Chapter 16: HTML5 Position: Document Layout and Text Spanning Chapter 17: HTML5 Scripting: Using JavaScript and

    HTML5程序设计(第2版).[荷]Peter Lubbers(带详细书签).pdf

    从第 2章起,分别围绕构建令人神往的富Web 应用,逐一讨论了HTML5的Canvas、Geolocation、Communication、WebSocket、Forms、WebWorkers、Storage等API的使用,辅以直观明了的客户端和服务器端示例代码,让开发人员...

    完整版《HTML5高级程序设计》4

    7.1.3 HTML5 Forms的浏览器支持情况 140 7.1.4 输入型控件目录 141 7.2 使用HTML5 Forms API 144 7.2.1 新的表单特性和函数 144 7.2.2 表单验证 147 7.2.3 验证反馈 151 7.3 构建HTML5 Forms应用 152 7.4 小结 157 ...

    HTML5高级程序设计.part5

    7.1.3 HTML5 Forms的浏览器支持情况 140 7.1.4 输入型控件目录 141 7.2 使用HTML5 Forms API 144 7.2.1 新的表单特性和函数 144 7.2.2 表单验证 147 7.2.3 验证反馈 151 7.3 构建HTML5 Forms应用 152 7.4 小...

    完整版《HTML5高级程序设计》3

    7.1.3 HTML5 Forms的浏览器支持情况 140 7.1.4 输入型控件目录 141 7.2 使用HTML5 Forms API 144 7.2.1 新的表单特性和函数 144 7.2.2 表单验证 147 7.2.3 验证反馈 151 7.3 构建HTML5 Forms应用 152 7.4 小结 157 ...

    HTML5高级程序设计.part4

    7.1.3 HTML5 Forms的浏览器支持情况 140 7.1.4 输入型控件目录 141 7.2 使用HTML5 Forms API 144 7.2.1 新的表单特性和函数 144 7.2.2 表单验证 147 7.2.3 验证反馈 151 7.3 构建HTML5 Forms应用 152 7.4 小...

    HTML5高级程序设计.part1

    7.1.3 HTML5 Forms的浏览器支持情况 140 7.1.4 输入型控件目录 141 7.2 使用HTML5 Forms API 144 7.2.1 新的表单特性和函数 144 7.2.2 表单验证 147 7.2.3 验证反馈 151 7.3 构建HTML5 Forms应用 152 7.4 小...

    HTML5高级程序设计.part2

    7.1.3 HTML5 Forms的浏览器支持情况 140 7.1.4 输入型控件目录 141 7.2 使用HTML5 Forms API 144 7.2.1 新的表单特性和函数 144 7.2.2 表单验证 147 7.2.3 验证反馈 151 7.3 构建HTML5 Forms应用 152 7.4 小...

    HTML5高级程序设计.part3

    7.1.3 HTML5 Forms的浏览器支持情况 140 7.1.4 输入型控件目录 141 7.2 使用HTML5 Forms API 144 7.2.1 新的表单特性和函数 144 7.2.2 表单验证 147 7.2.3 验证反馈 151 7.3 构建HTML5 Forms应用 152 7.4 小...

    forms builder 安装步骤

    - 硬盘空间:至少 5GB 可用空间。 - Java 运行环境:JDK 1.4.2 或更高版本。 3. **软件环境准备**: - 确保已安装正确的 JDK 版本。 - 配置好 Oracle 数据库环境,包括监听器和实例。 #### 三、安装步骤 1. *...

    HTML5 For Web Designers

    The HTML5 spec is 900 pages and hard to read. HTML5 for Web Designers is 85 pages and fun to read. Easy choice. HTML5 is the longest HTML specification ever written. It is also the most powerful, and...

    html5入门代码大全(源码)audio、video、canvas 、communication、forms、geolocation

    html5入门代码大全(源码) 包含audio、video、canvas 、communication、forms、geolocation、intro、offline、storage、websocket、workers

    forms-7.1.2-API文档-中文版.zip

    赠送jar包:forms-7.1.2.jar;...使用方法:解压翻译后的API文档,用浏览器打开“index.html”文件,即可纵览文档内容。 人性化翻译,文档中的代码和结构保持不变,注释和说明精准翻译,请放心使用。

    CrystalDecisions.Windows.Forms

    "CrystalDecisions.Windows.Forms"是水晶报表(Crystal Reports)的一部分,这是一个由SAP公司开发的强大的报告生成工具,广泛应用于Windows应用程序中,用于设计、创建和展示数据的复杂报告。这个命名空间主要用于...

    CrystalDecisions.Windows.Forms.dll

    4. **报表操作**:用户可以通过`CrystalReportViewer`进行各种操作,如打印报表、导出报表到不同格式(如PDF、Excel、HTML等)。 三、集成与应用 在.NET应用程序中使用`CrystalDecisions.Windows.Forms.dll`,首先...

    forms-7.1.2-API文档-中英对照版.zip

    使用方法:解压翻译后的API文档,用浏览器打开“index.html”文件,即可纵览文档内容。 人性化翻译,文档中的代码和结构保持不变,注释和说明精准翻译,请放心使用。 双语对照,边学技术、边学英语。

Global site tag (gtag.js) - Google Analytics