HTML5 表单的补充+注意事项
input标签中
type="image" 与 type="submit"属性 的区别 (下文简写image和submit)
1.这两者都可以响应请求;
2.不同之处是当 method="GET" 时,当鼠标点击image时,除了能正常请求URL,还能把鼠标点击图片时的焦点坐标(注意:
这个焦点坐标是相对于点击的图片说的)作为参数出现在url里。 http://passport.cnblogs.com/login.aspx?uname=%D5%C5%C8%FD&pwd=123&x=168&y=21
表单中的只读和禁用属性
1. 只读:服务器方不希望用户修改数据,只是要求这些数据在表单中显示。例如注册或交易协议,商品价格等。
2. 禁用:只有满足某个条件后,才能使用某项功能。例如,只有用户同意注册协议后才允许单击”注册“按钮。播放器空间在播放状态不能再单击”播放“按钮等。
label标签
label 元素不会向用户呈现任何特殊的样式。如果用户点击 label 元素内的文本,则会切换到控件本身。
<label> 标签的 for 属性值应该等于相关元素的 id 属性值,以便将它们捆绑起来。
实例
<form>
<label for="male">男</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="sex" id="female" />
</form>
解释:
点击男就会选择男的按钮,点击女就会选择女的按钮
get post区别
表单用来接受用户的输入,并将用户的输入以“name=value值对”集合的形式提交到服务器进行处理。
表单form的一些属性
1、id:表单的唯一标识
2、name:表单的名字
3、method:定义表单提交的方法,有两种方法:Post方法和Get方法
4、action:用于处理表单的服务器端页面(以URL 形式表示)
表单中的控件有两个属性是非常重要的:name属性和value属性,每一个控件的这两个属性将构成“name-value对”提交到action属性所定义的页面进行处理
post方法提交的表单,数据将以数据块的形式提交到服务器,表单数据不会出现在浏览器的URL中,所以用这种方式提交的表单数据是安全的。如果表单数据中包含类似于密码等数据,建议使用post方法。
Get方法是发送表单数据的默认方法,这种方法会以“?name1=value1&name2=value2”的形式,将表单数据附加到浏览器中URL的后面,提交到服务器处理,这种方法安全性当然不如post方法,因为表单数据会暴露在URL中,但是它的处理效率要比post方法高。如果表单中的数据没什么隐私数据,建议使用get方法,它的效率较高。
总结:
get:提交的数据量要小于1024字节,表单提交时表单域数值(表单请求的信息:账号、密码…)将在地址栏显示。
HTML <form> 标签的 enctype 属性
实例
在下面的例子中,表单数据会在未编码的情况下进行发送:
<form action="form_action.asp" enctype="text/plain">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
定义和用法
enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。
默认地,表单数据会编码为 "application/x-www-form-urlencoded"。就是说,在发送到服务器之前,所有字符都会进行编码(空格转换为 "+" 加号,特殊符号转换为 ASCII HEX 值)。
语法
<form enctype="value">
属性值
|
值 |
描述 |
|
application/x-www-form-urlencoded |
在发送前编码所有字符(默认) |
|
multipart/form-data |
不对字符编码。 在使用包含文件上传控件的表单时,必须使用该值。 |
|
text/plain |
空格转换为 "+" 加号,但不对特殊字符编码。 |
的
HTML5 表单的补充+注意事项的更多相关文章
- html5表单重写
html5表单重写 一.总结 一句话总结: 表单重写用于在提交按钮上指定表单提交的各种信息,比如action <input type="submit" value=" ...
- jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
- 完善: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 ...
随机推荐
- SpringBoot01——Framework Introduced and Helloworld
1.介绍 SpringBoot主要解决的是在微服务的架构下简化配置(有快速配置).前后端分离.快速开发 优点: l 提供了快速启动入门 l 开箱即用.提供默认配置 l 内嵌容器化web项目 l 没有冗 ...
- 摘抄 <关于 作为>
出路在哪里?出路在于思路! 其实,没有钱.没有经验.没有阅历.没有社会关系,这些都不可怕.没有钱,可以通过辛勤劳动去赚:没有经验,可以通过实践操作去总结:没有阅历,可以一步一步去积累:没有社会关系,可 ...
- Java并发编程实战 第4章 对象的组合
Java监视器模式 java监视器模式就是在将共享的数据封装在一个类里面,然后然后所有访问或者修改这些数据的方法都标注为synchronize. 车辆追踪模拟: 使用监视器模式: CarTracker ...
- TeXstudio设置中文和编码问题
1 菜单中文显示 2 针对内容中文乱码问题 永久 临时
- 【NOIP2016提高A组五校联考4】ksum
题目 分析 发现,当子段[l,r]被取了出来,那么[l-1,r].[l,r+1]一定也被取了出来. 那么,首先将[1,n]放入大顶堆,每次将堆顶的子段[l,r]取出来,因为它是堆顶,所以一定是最大的子 ...
- Mapnik使用postgres中的栅格数据
XML: <?xml version="1.0" encoding="utf-8"?> <Map background-color=" ...
- shell练习--PAT题目1008:数组元素循环右移问题 (失败案例,运行超时)
一个数组A中存有N(>)个整数,在不允许使用另外数组的前提下,将每个整数循环向右移M(≥)个位置,即将A中的数据由(A0A1⋯AN−1)变换为(AN−M⋯AN−1A ...
- CodeChef DGCD Dynamic GCD
CodeChef题面 Time limit 210 ms Code length Limit //内存限制也不说一下,真是的-- 50000 B OS Linux Language limit C, ...
- 【bzoj3223】Tyvj 1729 文艺平衡树
题目描述: 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4]的话,结果是5 2 3 4 1 输入 ...
- Task的用法
创建任务 无返回值的方式 方式1: var t1 = new Task(() => TaskMethod("Task 1")); t1.Start(); Task.WaitA ...