霸气側漏的HTML5--之--强大的form表单
今天学习了一下html5,发现他真的太强大了,暂不说新增的画布,通信,本地存储等的炸天功能,就连表单也是异常的好用。忍不住发一篇博客和大家分享一下。原谅我标题党了。以后的html5的学习记录博文就以“霸气側漏的html5...”为题了。哈哈哈。
曾经html4中的表单非常easy。一个表单相应一个action。仅仅能传一个url,要是想传多个的话用javaScript+ajax的方式倒也能够,只是代码就非常罗嗦了。
并且表单验证什么的都要在js里面写,当然用前台框架的话验证可能会非常easy,也就一句话的事情,但却避免不了浏览器载入慢等等的问题。所以曾经的html4的表单实际使用的时候非常依赖js,用起来不是非常方便。
如今好了,html5告诉我们能够不用那么依赖js了,种种问题自己都能够攻克了。
首先介绍一下 form表单相关的新增的属性:
1、form属性。
html4的表单属性必需要写在表单的里面,但在html5中,属性能够声明在不论什么地方。这样就能够统一管理表单,想要加入的时候像加样式表一样方便了。使用例如以下:
<form id = "testform">
<textarea form="testform"></textarea>
2、formaction和formethod属性
这两个新属性实现了form表单action的多向跳转。formaction属性值为跳转路径,formmethod属性值是get or post方式。例如以下例:
<form id = "testform" action="1.jsp" method="post">
<input type = "submit" name="s1" value="v1" formaction="2.jsp">提交到s1
<input type = "submit" name="s2" value="v2" formaction="3.jsp">提交到s2
<input type = "submit" name="s3" value="v3" formaction="4.jsp">提交到s3
<input type = "submit">
</form>
3、placeholder属性
文本框未输入前提示文字,属性值为提示内容。
4、autofocus
输入框自己主动获取焦点。
<input type="text" placeholder="请输入username" autofocus>
5、关于input添加的属性:
input标签添加了大量的type种类,并进行自己主动验证。如email,url,numble,空....等
不须要在使用js自己写提交验证了。方便了很多,笔者最喜欢这个功能了,假设认为它给了验证错误信息
不人性化的话。也能够自己在js中改动。大概和改UI框架中的几乎相同。
来两张效果图吧:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZnJpZ2h0aW5nZm9yYW1iaXRpb24=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
只是现阶段,html5在各大浏览器中的显示效果还不是非常好,笔者測试的ie11,火狐,chrome中,chrome的效果最好。基本都能显示,ie11和火狐略差,希望各大浏览器能尽快适应html5的所有功能啊,那绝对是前端程序猿的福音啊。
霸气側漏的HTML5--之--强大的form表单的更多相关文章
- html5中新增的form表单属性
html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...
- html5之table嵌入form表单布局(务必注意:table标签必须在form表单内部,不能再form表单外部!)
切记:用table标签来布局form表单元素,table标签必须放在form表单内部,否则可能会出现各种bug 原文地址:https://blog.csdn.net/weixin_43343144/a ...
- html5图片异步上传/ 表单提交相关
1 form 表单 get/post提交时候. action地址(或者啥ajax的url地址) 会涉及到跨域问题 常见跨域问题http://www.cnblogs.com/rainman/archiv ...
- HTML5的form表单属性
form:HTML4中,表单内的从属元素必须书写在<form></form>之内,但是在HTML5中,表单的从属元素可以处于页面的任何位置,然后为其添加form属性,属性值为f ...
- 读书笔记:《HTML5开发手册》Web表单
这是补充HTML5基础知识的第五篇内容,其他为: 一.HTML5-- 新的结构元素 二.HTML5-- figure.time.details.mark 三.HTML5-- details活学活用 四 ...
- jquery validate强大的jquery表单验证插件
jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...
- # 详细了解HTML5中的form表单
4.规范使用 <form>元素用于组织所有表单部件(也称为控件或字段),负责告诉浏览器把数据提交到哪里,方法是在action属性中提供一个URL.加入你只是想在客户端使用JavaScrip ...
- Html5中input新增的表单元素和属性介绍。
input标签主要用于Web表单的创建交互,以便接受来自用户的数据. 我们通过更改type属性的值,来实现不同的输入类型.在以前的写法中表单元素必须放在form元素所包含的里面,而在html5中,我们 ...
- HTML5 web Form表单验证实例
HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...
随机推荐
- azkaban-executor启动时出现conf/global.properties (No such file or directory)的问题解决(图文详解)
问题详情 // :: INFO [FlowRunnerManager] [Azkaban] Cleaning recently finished // :: INFO [FlowRunnerMana ...
- spring编程框架
spring boot, spring data, spring framework spring / spring boot @Profile('prod'|'dev'|'other')(伴随@Be ...
- 整合springboot,angular2,可以前后台交互数据
改造了一下angular2官方文档中的hero项目,让其可以进行后台的交互, https://github.com/DACHUYIN 源码在上面...博客就不写了....
- 实例分割:MaskXRCnn 与Visual Genome数据集
一.VG数据集 机器学习领域的突破突然让计算机获得了以未曾有的高精度识别图像中物体的能力--几乎达到了让人惊恐的程度.现在的问题是机器是否还能更上层楼,学会理解这些图片中所发生的事件. Visual ...
- js常用方法和技巧
随着AJAX的流行,js又得到了很多人的重视,js最大的优势就是它能够对html上的所有元素进行操作,包括创建标签元素,更改元素属性等,这样就使得我们能够利用js来实现很多的动态效果,来提供给用户更强 ...
- 在centos安装 sql server
主要参考官方文档https://docs.microsoft.com/en-us/sql/linux/sql-server-linux-setup-red-hat
- centos7安装个人网盘owncloud
现在个人资料越来越重要,网络速度也已经满足日常需要,网盘已经是生活着存取个人数据不可缺少的工具. 下面在linxu centos7下面安装owncloud搭建自己私人网盘: 1.新建一个账号用来安装个 ...
- CodeCombat代码全记录(Python学习利器)--Kithgard地牢代码1
Kithgard地牢注意:在调用函数时,要在函数的后面加上括号内容,否则在python中,将不会认为你在调用这个函数内容,而你的英雄将像木头一样站在原地不会执行上左下右的移动!!! hero.move ...
- BZOJ 3572 [HNOI2014]世界树 (虚树+DP)
题面:BZOJ传送门 洛谷传送门 题目大意:略 细节贼多的虚树$DP$ 先考虑只有一次询问的情况 一个节点$x$可能被它子树内的一个到x距离最小的特殊点管辖,还可能被管辖fa[x]的特殊点管辖 跑两次 ...
- rsync全网备份
rsync备份企业方案 企业有Linux服务器又有windows服务器,备份用rsync(服务端),Linux(客户端),Windows(客户端,cwrsync,旧版本有免费版)打包压缩数据往服务器上 ...