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 表单的补充+注意事项的更多相关文章

  1. html5表单重写

    html5表单重写 一.总结 一句话总结: 表单重写用于在提交按钮上指定表单提交的各种信息,比如action <input type="submit" value=" ...

  2. jQuery html5Validate基于HTML5表单验证插件

    更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...

  3. 完善:HTML5表单新特征简介与举例——张鑫旭

    一.前言一撇 其实关于HTML5的表单特征早在去年“你必须知道的28个HTML5特征.窍门和技术”一文中就有所介绍(在第十一项),不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦 ...

  4. 实现跨浏览器html5表单验证

    div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...

  5. html5表单验证

    表单验证为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化. 下面展现浏览器自带的验证功能也可在移动端中查看: HTML部分: <!DOCTYPE html> <html ...

  6. Ideal Forms – 帮助你建立响应式 HTML5 表单

    Ideal Forms 是建立和验证响应式 HTML5 表单的终极框架.它刚刚发布 V3 版本,更小,更快,更具可扩展性.它支持实时验证,完全自适应(适应容器,没有 CSS 媒体查询需要),键盘支持, ...

  7. HTML5学习总结-05 HTML5表单

    一 HTML5 新的类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. email url number range Date pickers (date, month ...

  8. html5 表单样式 表单验证1 2 3

    html5 表单样式 ie9以下不支持 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  9. HTML5跨浏览器表单及HTML5表单的渐进增强

    HTML5跨浏览器表单 http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-f ...

随机推荐

  1. UI 设计中的渐变

    简评: 渐变是通过两种或多种不同的色彩来绘制一个元素,同时在颜色的交界处进行衰减变化的一种设计.从拟物到扁平再到渐变,人们慢慢发现它能创造出从未有过的一种色彩感觉 -- 独特.现代和清爽.(本文译者@ ...

  2. idea 添加静态注释和live Templates

    静态注释 /** * @Description * @Author wzz * @Date ${DATE} ${TIME} */ Live Templates 1.新建一个自己的添加组如图:Mygro ...

  3. BZOJ[3252]攻略(长链剖分)

    BZOJ[3252]攻略 Description 题目简述:树版[k取方格数] 众所周知,桂木桂马是攻略之神,开启攻略之神模式后,他可以同时攻略k部游戏.今天他得到了一款新游戏<XX半岛> ...

  4. java高并发实战Netty+协程(Fiber)|系列1(续)|事件驱动模式和零拷贝

    上次讲到事件驱动模式,今天我们来好好分析下netty的事件模式的几个类型. 先从NIO讲起, JAVA NIO方面Selector给Reactor模式提供了基础,Netty结合Selector和Rea ...

  5. 【洛谷P2922】Secret Message

    题目大意:给定 N 个字符串组成的字典,有 M 个询问,每次给定一个字符串,求字典中有多少个单词为给定字符串的前缀或前缀是给定的字符串. 题解:在 trie 上维护一个 tag 表示有多少字符串以当前 ...

  6. SpringMVC @PathVariable注解

    下面用代码来演示@PathVariable传参方式 @RequestMapping("/user/{id}") public String test(@PathVariable(& ...

  7. 测试工具Telerik Test Studio发布R2 2019|支持VS 2019

    Telerik Test Studio是一个用于功能性Web.桌面和移动测试的直观测试自动化工具,它能轻松地实现自动化测试.同时会为GUI.性能.加载和API测试提供完整的自动化测试解决方案. |更多 ...

  8. java数据结构2--集合总论

    集合类 0.1.为什么出现集合类? 面向对象语言对事物的体现都是以对象的形式,所以为了方便对多个对象的操作,就对对象进行存储,集合就是存储对象最常用的一种方式(容器)Java中集合也是类,真正用来存储 ...

  9. C++ fstream 用法

    #include <fstream> #include <iostream> main() { int a,b,c,d; std::ifstream infile (" ...

  10. ubuntu中查看AMD GPU 状态的办法

    lshw -c video 运行命令:glxinfo | grep rendering 如果结果是“yes”,证明显卡驱动已经成功安装. 如果提示有问题,可能是系统里面没有安装mesa-utils,安 ...