html5 智能表单介绍

最新推荐文章于 2023-08-21 16:34:37 发布
最新推荐文章于 2023-08-21 16:34:37 发布
阅读量742 收藏 1
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yushuai12345/article/details/8683832
版权

智能表单介绍

1、XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素，在HTML5中完全可以放在页面任何位置，然后通过新增的form属性指向元素所属表单的ID值，即可关联起来。


<FORM id=foo>

…

</FORM>

<INPUT … form="foo">


2、HTML5提供了多样的输入类型和风格，让设计界面更加丰富



智能表单使用与规范


1
2
3
4
5
6
7
8
9
10
11
12
13
14
< input type = "text" list = "mydata" />
  
< datalist id = "mydata" >
         < option label = "Top1" value = "让子弹飞" >
         < option label = "Top2" value = "非诚勿扰2" >
         < option label = "Top3" value = "大笑江湖" >
         < option label = "Top4" value = "赵氏孤儿" >
         < option label = "Top5" value=“PHP100">
</ datalist >
新属性介绍：
autofocus       载入时自动获得焦点
required        必填项目
placeholder     点击input内容消失
pattern         验证正则表达式


智能表单的浏览器支持



实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
< head >
< meta charset = utf -8>
< title >HTML5视频教程-canvas</ title >
</ head >
< body >
< form action = "" method = "get" id = "foo" >
邮件< input type = "email" placeholder = "请输入正确mail地址" >< br >
网址< input type = "url" >< br >
日期< input type = "date" >< br >
月份< input type = "month" >< br >
  周 < input type = "week" >< br >
时间< input type = "time" >< br >
数字< input type = "number" >< br >
滑动< input type = range  min = "0" max = "3" step = "1" >< br >
搜索< INPUT type = search results = "n"  value = "搜索" >< br >
颜色< INPUT type = color >< br >
正则测试< input type = "text" pattern = "[789]+" required />
< input type = "text" list = "mydata" />
     < datalist id = "mydata" >
         < option label = "Top1" value = "656463" >
         < option label = "Top2" value = "HTML5" >
         < option label = "Top3" value = "Javascript" >
         < option label = "Top4" value = "赵氏孤儿" >
         < option label = "Top5" value = "初恋这件小事" >
</ datalist >
< input type = "submit" value = "sub" >
</ form >
</ body >
</ html >
yushuai12345
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
非常实用表单设计器及智能表单引擎(项目源码)
weixin_45121745的博客
06-14 1万+
项目集成了智能表单设计、工作流可视化设计（js源码可直接引用）以及统计的定制设计
html5表单动态添加工作事项代码
11-24
html5表单动态添加工作事项代码
WPS Office AI实战：智能表单，信息收集神器
08-03 1029
前面我们已经介绍了WPS里常用的文字、表格、演示文稿等等，在WPS AI的武装下重新发挥出智能化的威力，今天来聊聊表单的智能化应用会是什么样。金山智能表单进行数据轻松收集，通过对话或拍照创建表单，回收结果还能自动生成数据报告。进入正题，希望读完后能对你有所帮助。使用WPS AI前准备https://ai.wps.cn/ 官方网站如果你已经准备好，请直接跳过这一章节。按以下步骤进行使用WPS Off...
智能表单的运用
Hfeidz的博客
04-23 302
前言 智能表单为HTML5的新增内容 一、智能表单常用的几种属性： value:设置文本框里的默认值 placeholder:占位符（不用删） required:设置必填字段 disabled:禁止用户填写或点击 novalidate:取消表单验证 password:密码框 autofocus：光标聚集 pattern:正则，设置文本框里面的内容所匹配的格式 autocomplete:自动完成 file:文件上传 datetime-local:日期 multiple:支持多选,允许上传多个文件 二、使用
SAP开发——SMARTFORMS(智能表单)
JoneBB的博客
08-21 553
并可以将执行结果通过连接打印机直接输出 采用图形模式来控制报表的格式及位置。SMARTFORMS 维护表单 SMARTSTYLES 维护格式。⑤在表格接口中设置“ 导入 ” 和“ 表 ” 将设置好的结构进行对其的定义。是SAP所提供的一款功能强大的商务报表解决方案，也被称为智能表单 能够。table中的“主要区域”可以通过查找的条目数量而增加行数。⑥ 在全局定义中对“ 全局数据 ” 进行定义。②可在表属性设置页面大小和表格样式。③通过模板将抬头画出来。
html5+css3实现酷炫的form表单
11-10
html5+css3实现酷炫的form表单
html5关闭表单窗口酷炫撕开动画特效
09-08
html5关闭表单窗口酷炫撕开动画特效
html5 css3在线留言表单美化代码
11-05
html5 css3在线留言表单美化代码
HTML5注册表单单页模板下载5114.zip
08-07
HTML5注册表单单页模板下载5114.zip
可视化智能表单流程设计器开发平台及完整ＯＡ办公系统源码
05-29
可视化表单和流程定制开发平台源码（公文oa办公系统项目源码），在开发平台上直接定制出来的oa公文办公系统源码，可以直接部署应用，或者用vs2015打开网站，进行二次开发,c# .net ，可以直接进行移动版开发，已经集成移动版 （所有账号，默认密码都是 1)
html5 canvas点击刷新验证码提交表单
11-06
html5 canvas点击刷新验证码提交表单 html5 canvas点击刷新验证码提交表单
html5简单大气的单选框表单提交代码下载
11-11
html5简单大气的单选框表单提交代码下载 html5简单大气的单选框表单提交代码下载 html5简单大气的单选框表单提交代码下载 html5简单大气的单选框表单提交代码下载 html5简单大气的单选框表单提交代码下载
html 5 新增语义化标签、智能表单 css 渐变、弹性盒相关知识总结 css 3D css 的一些其他属性
08-20
html 5 新增语义化标签、智能表单 css 渐变、弹性盒相关知识总结 css 3D css 的一些其他属性
html5 css3谷歌会员登录表单界面特效
11-11
html5 css3谷歌会员登录表单界面特效
Html5智能表单
weixin_42684143的博客
04-14 425
range类型 <input name=’'range1" type=“range” value=“25” min=“0” step=“5” /> output类型 用于输出计算结果 0100+= atakist 选项列表 新增属性 placeholder属性：文本框处于未输入状态时文本框中显示的输入提示。 autofocus属性：给文本框、选择框...
form的智能表单
weixin_30849403的博客
06-28 99
1.智能表单的介绍 　　其中，（1）中的使用格式使得form不会太臃肿。 　　 2.使用规范 　　 3.新属性 　　 4.举例 　　 二.程序 1.关于邮件的问题 1 <!DOCTYPE html> 2 <head> 3 <meta charset=utf-8> 4 <titl...
基于TinyMce 实现 OA办公系统-自定义表单、智能表单
@/"蜗牛
11-16 3516
OA智能办公系统   OA系统  审批流 自定义表单 的实现 先来一张图 模板设计器 使用的是  TinyMce，下载地址：TinyMce 后面会把 详细的代码及实现思路贴上来   步骤一、集成TinyMce 引入 tinyMce &lt;script type="text/javascript" src="../../../../comm/lib/tinymce/tinymc...
智能表单设计器
teemlink的专栏
10-22 1639
随着信息化的深入发展，智能表单逐渐被大家所认知，使用具有传统纸张特性的数字文档已成为当前趋势。数字文档使原来基于纸张的使用习惯、制度法规、工作方式等都能平滑过渡到数字形态，为推进信息化提供了有力支持，提高人们的工作效率。其中，表单的电子化和智能化也就是智能表单数字文档中一项很重要的内容智能表单最基本的特点应该是：使用方便、操作灵活，很多软件中的智能表单功能让表单创建甚至比Word
html5实现最智能大气的公司年会抽奖
最新发布
01-26
另外，借助HTML5的本地存储和表单验证功能，可以实现抽奖信息的自动保存和员工资格的自动验证，提高抽奖的准确性和公正性。 综上所述，利用HTML5技术可以打造出一个智能化、大气化的公司年会抽奖系统，不仅提升了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值