知识点
相关文章
更多最近更新
更多HTML5 智能form表单新属性
2019-03-12 18:41|来源: 领悟书生
内容摘要:HTML5 智能form表单新属性，主要包括智能表单介绍和智能表单使用与规范。但在不同支持HTML5的浏览器效果有所差异，使用的时候要注意
智能表单介绍
1、XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素，在HTML5中完全可以放在页面任何位置，然后通过新增的form属性指向元素所属表单的ID值，即可关联起来。
<FORM id=foo>
…
</FORM>
<INPUT … form="foo">
2、HTML5提供了多样的输入类型和风格，让设计界面更加丰富
智能表单使用与规范
<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 验证正则表达式智能表单的浏览器支持
实例
<!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>本文链接：HTML5 智能form表单新属性 ，由领悟书生原创
转载请注明出处【http://www.656463.com/article/335】
相关问答
更多-
html5有对应的js版本吗？[2021-10-18]
没有，但有新的 HTML5 DOM 规范，加多很多DOM属性和方法，可以关注一下。 还有数据本地存储也是HTML5一个新技术。 -
HTML5都有哪些新特性呢？[2022-02-15]
1、离线缓存。可以在关闭浏览器后再次打开时恢复数据，以减少网络流量。 2、音频视频自由嵌入，多媒体形式更为灵活。 3、地理定位。地理位置定位，让定位和导航不再专属导航软件，地图也不用下载非常大的地图包，可以通过缓存来解决，到哪儿下哪儿，更灵活。 4、Canvas绘图，提升移动平台的绘图能力。使用Canvas API可以简单绘制热点图收集用户体验资料，支持图片的移动、旋转、缩放等常规编辑。 5、丰富的交互方式。提升互动能力：拖拽、撤销历史操作、文本选择等。 6、开发及维护成本低，这个相对于原生APP开发来说。 ... -
触发HTML5表单验证(Triggering HTML5 Form Validation)[2022-02-23]
您不能触发本机验证UI，但您可以轻松地利用任意输入元素的验证API： $('input').blur(function(event) { event.target.checkValidity(); }).bind('invalid', function(event) { setTimeout(function() { $(event.target).focus();}, 50); }); 一旦它失去焦点，第一个事件会在每个输入元素上触发checkValidity ，如果该元素invalid ... -
使用新的HTML5标签(Using New HTML5 Tags)[2022-02-22]
在你的css中添加下面的代码： header,footer,article,section,aside,nav { display:block; } 我用jsfiddle更新了你的代码。 Add this code in your css: header,footer,article,section,aside,nav { display:block; } I updated your code in jsfiddle. -
只需添加novalidate到您的
-
HTML5和frameborder(HTML5 and frameborder)[2023-09-22]
HTML 5不支持诸如frameborder，scrolling，marginwidth和marginheight等属性（HTML 4.01中支持）。 相反，HTML 5规范已经引入了无缝属性。 无缝属性允许内联框架看起来像呈现为包含文档的一部分。 例如，边框和滚动条不会出现。 资源 关于html5 iframe和无缝的更多信息，你可以在这里找到。 互联网浏览器8不支持html5的所有功能，因此您将使用iframe，htm5，即一起使用问题。 HTML 5 doesn't support attribute ... -
PHP是一种服务器端语言，它不会在客户端级别进行任何检查，只能在服务器上进行。 HTML 5在语义上更正确，使用
而不是使用带有ID标头的 提供更好的SEO ，网页抓取工具更容易找到，并提供更好的可访问性（即屏幕阅读器或其他设备可以轻松关联什么headers ， footers ， sections代表）。 PHP is a server side language, it will not do any checking at the client level, only at th ...HTML5，那是什么呢？(HTML5, what's that all about then?)[2022-05-22]
那里有很多问题但是： HTML5在现今的大多数现代浏览器中都得到了很好的支持，并且通常可以安全地使用它。 脚本以提高兼容性？ 你的意思是Javascript可以检测浏览器的年龄，并根据答案显示HTML 4.01或5？ 好吧也许又一次，它已经到了不再需要它的时候了。 是的： w3schools很酷。 所有这些都说明了HTML 5仍在开发中，而不是完成交易。 一些领域仍在实施中，但速度很快，这不是开始用HTML 5开发页面的问题。 这个网站 - html5医生是一个非常有用的资源，你可以浏览，寻找实现的地方和方 ...今天HTML5可以使用什么？(What can be used of HTML5 today?)[2023-01-03]
有一个名为“ 我何时可以使用...”的站点，其中列出了各种HTML5，CSS3和其他现代Web标准，并指出了哪些浏览器版本支持它。 您是否可以使用功能取决于您的用户是谁。 如果您的目标是最先进的网络开发人员，那么您可能会依赖他们拥有更多版本的浏览器，而不是针对企业会计。 因此，您需要确定必须支持哪些浏览器版本，并执行适当的渐进增强或回退以支持旧浏览器，同时引入不支持的新功能。 一些HTML5，CSS3和其他功能可以在旧版浏览器中使用“polyfill”，这是使用JavaScript，Flash，专有功能等缺 ...IE下的HTML5问题(HTML5 under IE questions)[2021-11-13]
IE不会让你设置新标签的样式，除非你告诉它，尝试HTML5垫片 。 基本上，IE忽略了它不知道的标签的任何样式信息，但如果你只是通过JavaScript创建一个元素： document.createElement('section'); ...即使你然后抛弃那个元素，这使得IE意识到“哦， section是一种元素”，然后它将应用样式规则。 这就是垫片脚本的作用。 在将相关元素添加到DOM之前，您需要确保执行此操作（因此，填充脚本基本上必须进入head ，您不能进行经常看到的底部优化放置） 。 当然，这取 ...