HTML5表单那些事
//一般写法
<form method="post" action="http://xxx:port/form"></form>
//高级一点的写法:在header中添加一行base元素
//base元素用于设置表单数据的发送目的地，这个base元素将会影响该页面所有的相对URL，而不只是form元素。
<head>
<base href="http://xxxx:port"/>
</head>
<body>
<form method="post" action="/form">
//code
</form>
</body>
//form表单的数据编码方式，enctype属性
application/x-www-form-urlencoded:在不设置enctype的情况下，默认的enctype属性，不能用于将文件上传到服务器。
multipart/form-data：用于将文件上传到服务器。
text/plain:chrome中使用与application/x-www-form-urlencoded方案一样，现在并没没有确定应该如何编码。总之不要用这种方式就ok。
//form表单的autocomplete自动完成属性,autocomplete属性有两个值：on/off
//表单禁止自动完成功能
<form autocomplete="off"></form>
//表单的其他元素禁止autocomplete属性，指定的元素开启自动完成属性。
<form autocomplete="off">
<input type="text" autocomplete="on"//虽然form表单是off，但是input元素是on。
</form>
//form表单的名称定义用name,用来给表单设置一个独一无二的标识符，以便使用DOM时区区分各个表单。
//name属性与全局适应id不是同一回事,后者多用于CSS选择器。
<form name="fruitvote" id="fruitvote" method="post" action="http://xxxx:port/form>
</form>
//label属性：form表单中的label元素的for属性通常和input元素的id属性一一对应，这样即可将label和input元素关联起来。
//有助于屏幕阅读器和其他残障辅助技术对表单的处理。
<form>
<label for="fave">Fruit:<input id="fave" name="fave/></label>
</form>
//form表单的自动聚焦到某个input元素，浏览器一打开就会聚焦于第一个输入的元素。当多个input元素都使用autofocus属性的时候。
//浏览器自动聚焦于其中的最后一个元素。
<form method="post" action="http://www.baidu.com">
<label for="fave">Fruit:<input autofocus id="fave" name="fave"></label>
<label for="name">Name:<input id="name" name="name"></label>
<button>Submit</button>
</form>
//禁用表单元素用disable
//对表单元素进行编组
<form>
<fieldset>
<label for="name"><input name="name" id="name"></label>
<label for="fave"><input name="fave"></label>
</fieldset>
<fieldset>
<label for="name"><input name="name" id="name"></label>
<label for="fave"><input name="fave"></label>
</fieldset>
</form>
//为分组添加说明，使用legend元素
<form>
<fieldset>
<legend>fieldset1</legend>
<label for="name"><input name="name" id="name"></label>
<label for="fave"><input name="fave"></label>
</fieldset>
<fieldset>
<legend>fieldset2</legend>
<label for="name"><input name="name" id="name"></label>
<label for="fave"><input name="fave"></label>
</fieldset>
</form>
//disable属性用于fieldset元素的时候回禁用fields属性中所有的额input元素。
//form表达的button按钮,button元素有3个type值：submit reset button.type为submit属性的时候又会有很多额外的属性。
//form 指定按钮关联的表单
//formaction 覆盖form元素的action属性
//formenctype覆盖form元素enctype属性
//formmethod覆盖form元素的method属性
//formtarget覆盖form元素的target属性
//formnovalidate是否执行客户端数据有效性的检查。
//button元素type=submit的额外属性
<form>
<label for="fave"><input id="fave" name="fave"></label>
<button type="submit" formaction="http://xxxx:port/form" formmethod="post"></button>
</form>
//button元素type=submit的form属性
<form id="voteform">
<label for="fave"><input id="fave" name="fave"></label>
<button type="submit" formaction="http://xxxx:port/form" formmethod="post"></button>
</form>
<label for="name">Name:<input form="voteform" id="name" name="name"></label>
<button form="voteform" type="submit"></button>
<button form="voteform" type="reset"></button>
HTML5表单那些事的更多相关文章
- 完善：HTML5表单新特征简介与举例——张鑫旭
一.前言一撇 其实关于HTML5的表单特征早在去年“你必须知道的28个HTML5特征.窍门和技术”一文中就有所介绍(在第十一项),不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦 ...
- 实现跨浏览器html5表单验证
div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...
- html5表单验证
表单验证为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化. 下面展现浏览器自带的验证功能也可在移动端中查看: HTML部分: <!DOCTYPE html> <html ...
- Ideal Forms – 帮助你建立响应式 HTML5 表单
Ideal Forms 是建立和验证响应式 HTML5 表单的终极框架.它刚刚发布 V3 版本,更小,更快,更具可扩展性.它支持实时验证,完全自适应(适应容器,没有 CSS 媒体查询需要),键盘支持, ...
- HTML5学习总结-05 HTML5表单
一 HTML5 新的类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. email url number range Date pickers (date, month ...
- html5 表单样式 表单验证1 2 3
html5 表单样式 ie9以下不支持 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- HTML5跨浏览器表单及HTML5表单的渐进增强
HTML5跨浏览器表单 http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-f ...
- HTML5表单提交和PHP环境搭建
HTML5表单提交相关内容和PHP环境搭建需要的软件(只备注) (2)举例介绍 (3)PHP环境搭建
- HTML5表单及其验证
随笔- 15 文章- 1 评论- 115 HTML5表单及其验证 HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...
随机推荐
- Odoo 8.0 new API 之Environment
""" An environment wraps data for ORM records: - :attr:`cr`, the current database cur ...
- websevice中runtime modeler error: Wrapper class com.ws.jaxws.Add is not found问题的解决办法
查询了网上的资料,有以下解决办法: 1> 先用apt命令将主程序进行编译,然后生成一些java文件2> 升级JDK到版本jdk1.6u17或以后 这两种办法我没有试过,但是试了以下这种方法 ...
- 20145205《Java程序设计》课程总结
每周读书笔记链接汇总 20145205 <Java程序设计>第1周学习总结 20145205<Java程序设计>第2周学习总结 20145205 <Java程序设计> ...
- JQuery 实现锚点链接之间的平滑滚动
24. 解决链接锚点的生硬问题 $('.nav .btn[href*=#],.icon2,.icon3').click(function() { if (location.pathname.repla ...
- cocos2d-x test学习[1]
controller.cpp std::function<TestScene*()> callback;//一个是返回值,一个是参数.返回值是TestScene*,参数是()里的东西 Co ...
- Xamarin.Android 应用程序配置
* 在 Xamarin 中 Android 清单文件的内容一般不通过手动编辑,而是由编译器根据 项目属性设置 和 一系列 特性类 自动生成 1. 应用程序在android启动器中显示的名称设置: 主活 ...
- vert.x学习（四），使用模板解析器ClassLoaderTemplateResolver
在vert.x中使用模板解析,可以为我们带来很多方便.我这里学习了一下ClassLoaderTemplateResolver的简单使用.这次工程配置与上篇一样,不需要做任何多的配置.直接编写代码就可以 ...
- windows平台 查看 dll 程序集 PublicKeyToken
打开Developer Command Prompt for VS20** 命令工具 路径:点击开始->所有程序->Microsoft Visual Studio 20** ->Vi ...
- 分析器错误消息: 未能加载类型“Automation.Web.MvcApplication”。
常见原因1 : 可能是自己手动修改了项目 ==>属性==>生成的输出路径 ,导致版本不兼容 常见员因2 : Global的 命名空间 与 项目的命名空间 不一致 常见原因3 : 查看 ...
- iOS上线...踩坑
总结一下上线过程中出现的问题: 1.AppStore不允许app中出现下载别的app的提示 (例如:三方登录的时候,检测到手机未安装QQ,微信,微博,提示你的设备未安装!❌❌❌ 正确的做法:未安装的, ...