今天学习了一下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表单的更多相关文章

  1. html5中新增的form表单属性

    html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...

  2. html5之table嵌入form表单布局(务必注意:table标签必须在form表单内部,不能再form表单外部!)

    切记:用table标签来布局form表单元素,table标签必须放在form表单内部,否则可能会出现各种bug 原文地址:https://blog.csdn.net/weixin_43343144/a ...

  3. html5图片异步上传/ 表单提交相关

    1 form 表单 get/post提交时候. action地址(或者啥ajax的url地址) 会涉及到跨域问题 常见跨域问题http://www.cnblogs.com/rainman/archiv ...

  4. HTML5的form表单属性

    form:HTML4中,表单内的从属元素必须书写在<form></form>之内,但是在HTML5中,表单的从属元素可以处于页面的任何位置,然后为其添加form属性,属性值为f ...

  5. 读书笔记:《HTML5开发手册》Web表单

    这是补充HTML5基础知识的第五篇内容,其他为: 一.HTML5-- 新的结构元素 二.HTML5-- figure.time.details.mark 三.HTML5-- details活学活用 四 ...

  6. jquery validate强大的jquery表单验证插件

    jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...

  7. # 详细了解HTML5中的form表单

    4.规范使用 <form>元素用于组织所有表单部件(也称为控件或字段),负责告诉浏览器把数据提交到哪里,方法是在action属性中提供一个URL.加入你只是想在客户端使用JavaScrip ...

  8. Html5中input新增的表单元素和属性介绍。

    input标签主要用于Web表单的创建交互,以便接受来自用户的数据. 我们通过更改type属性的值,来实现不同的输入类型.在以前的写法中表单元素必须放在form元素所包含的里面,而在html5中,我们 ...

  9. HTML5 web Form表单验证实例

    HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...

随机推荐

  1. InnoDB锁机制之Gap Lock、Next-Key Lock、Record Lock解析

    InnoDB锁机制之Gap Lock.Next-Key Lock.Record Lock解析 有意思,解释的很好

  2. HTML中的行级标签和块级标签 《转换》

    1.html中的块级标签 显示为“块”状,浏览器会在其前后显示折行.常用的块级元素包括: <p>, <ul>,<table>,<h1~h6>等. 2.h ...

  3. spring 415

    不支持的媒体类型 spring mvc 使用@requestBody注解json请求时,jQuery有限制,否则会出现 415 错误 1.使用ajax  $.ajax({                ...

  4. 清除Linux系统多余引导选项

    由于我把系统给升级(update)了,在grub引导模式出现新旧版本(Grub与Grub2)的引导系统分别为正常启动和进入恢复模式各2个引导项,如下图显示:百度找不到相关或类似的教程,只好半夜起来研究 ...

  5. day07-列表类型/元组类型/字典类型/集合类型内置方法

    目录 列表类型内置方法 元组类型内置方法 字典类型内置方法 集合类型内置方法 列表类型内置方法 用来存多个元素,[]内用逗号隔开任意数据类型的元素 1. list()强制类型转换 print(list ...

  6. Python 之web动态服务器

    webServer.py代码如下: import socket import sys from multiprocessing import Process class WSGIServer(obje ...

  7. java关于工作,跳槽之总结

    关于工作中: 如何展示自己项目中的亮点,技术或者难点: 总结我的经历和技术倒是可以,但是我做的项目和我会的技术都很平庸,实在找不到亮点怎么办? 如果知道了你没有亮点,也就是知道了你自己欠缺什么,那么下 ...

  8. python学习笔记--关于函数的那点事1

    函数参数 1.位置参数 类似于java函数的基本参数,按照顺序和结构定义参数 2.默认参数 def method(param,defaultParam=defaultValue) 调用时,可以调用me ...

  9. join 和 left join 和 right join的区别?

    join等价于 inner join 是内连接 ,返回两个表都有的符合条件的行. left join 是左连接,返回坐表中所有的行以及右表中符合条件的行. right join右连接,是返回右表中所有 ...

  10. Shell 脚本编程 基本语法:

    Shell 脚本编程语法: 注: 文章来源 http://www.cnblogs.com/yunquan/p/6821850.html 视频来源:https://www.bilibili.com/vi ...