html5表单新特性

学习的笔记，记录备忘。

效果图：

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name = "viewport" content="width=device-width,inital-scale=1,user-scalable=no"></meta><title>form表单</title><style>form{width:300px;line-height: 38px;}input{width:180px;height:27px;border-radius: 3px;border:1px solid #ABA9A9;font-size: 14px;padding-left: 6px;}input[type="color"],input[type="submit"]{width:90px;}#form_content,#article_content{float: left;}#article_content{padding-left: 50px;}</style></head><body><section id="form_content"><form>用户名 : <input type="text" placeholder="Please enter username" autofocus="autofocus" required/><br />邮箱 : <input type="email" required/><br />个人主页：<input type="url" required/><br />生日：<input type="date" required/><br />完善程度：<input type="range" max="10" min="0" value="2" step="2"/><br />查找：<input type="search" results=s/><br />选择颜色：<input type="color" /><br /><input type="submit" value="提交" formaction="OneController.java" formmethod="post"/><input type="submit" value="取消" formaction="TwoController.java" formmethod="post"/></form></section><section id="article_content"><hgroup><h2>表单新特性</h2></hgroup><article><p>①type添加了很多新内容自行尝试，其验证效果没有Jquery.validate效果好</p><p>②placeholder 提示信息</p><p>③autofocus 聚焦</p><p>④required 必填内容、pattern正则表达式验证</p><p>⑤重写form属性formation指向action，formmethod请求方法</p><p>⑥autocomplete="on/off" 打开或关闭自动补齐</p></article></section></body>
</html>

个人主页： http://www.itit123.cn/ 更多干货等你来拿

html5表单新特性相关推荐

html5表单验证没有效果,HTML5表单验证特性(知识点小结)
前台提交信息到后台一般两种常见提交方式: Form表单提交和 Ajax无刷新页面提交 placeholder 不是所有的input都支持,比如input date就不支持解决方案: 可以在date ...
html 表单自定义属性,HTML5基础知识汇总_(2)自定义属性及表单新特性
自定义属性data-* 说起这个属性,其实现在很常见了;怎么说呢,因为在一些框架都能看到他的身影!!! 比如Jquery mobile,里面非常频繁的使用了这个属性; 这个属性是哪里来的-.当然是跟随 ...
html5表单新功能解析,解析HTML5表单新功能-HTML5
本文我们将详细介绍一下HTML 5中对表单功能的更新.希望能帮助更多的前端人学习这门毋庸置疑是新趋势的技术. 一.表单结构更自由 XHTML中需要放在form之中的诸如inpu/button/sele ...
HTML5有哪些表单新特性
21. 检测属性支持除了Modernizr之外我们还可以通过javascript简单地检测一些属性是否支持,如: 22. Mark元素把元素看做是高亮的作用,当我选择一段文字的时候,javascr ...
HTML5新的解析顺序,HTML5新表单新功能解析
HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. HTML5表单新功能解析 ...
html5密码确认属性,HTML5表单及其验证【html自带属性验证】
HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其API,方便我们做更复杂的应用,而不用借助其它Javascript框架, ...
html5表单密码验证及提示,HTML5表单及其验证(示例代码)
1.输入型控件 Input type 用途说明 email 电子邮件地址文本框 url 网页URL文本框 number 数值的输入域属性值描述 max number 规定允许的最大值 min ...
HTML的表格标签，列表标签，表单标签，HTML5有哪些新特性
HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页: ...
html5表单新增的输入类型,HTML5之表单新增类型介绍
1.html5的input标签的type类型新增介绍: 2.表单新增属性介绍: 3.代码示例: 1970 1980 1990 默认值: form="register" /> ...

html5表单新特性

html5表单新特性

html5表单新特性相关推荐

最新文章

热门文章