日常积累

form 表单

2018-01-26  本文已影响41人  苦瓜_6

主要内容: form表单的作用及常用的input 标签介绍,GET和 POST的区别。

form表单的作用及常用的input 标签

form表单的作用

HTML <form> 元素 表示了文档中的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息,拥有以下属性

常见的Input标签

<input> 元素是最重要的表单元素 ,<input> 标签用于搜集用户信息。
常见的Input标签主要由type属性控制。如果这个属性没有指定,默认的类型是 text。
根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。常见的 input 标签如下 :

类型 描述
text <input type="text"> 定义常规文本输入 (文本字段的默认宽度是 20 个字符 )。单行字段,换行会将自动从输入的值中移除。
placeholder <input placeholder="text"> 提供可描述输入字段预期值的提示信息(hint);该提示会在输入字段为空时显示,并会在字段获得焦点时消失(placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password)
password <input id="userPassword" type="password">一个值被遮盖的单行文本字段。使用 maxlength 指定可以输入的值的最大长度
radio 单选按钮。必须使用 value 属性定义此控件被提交时的值。使用checked 必须指示控件是否缺省被选择。在同一个”单选按钮组“中,所有单选按钮的 name 属性使用同一个值; 一个单选按钮组中是,同一时间只有一个单选按钮可以被选择。
checkbox <input type="checkbox ">定义复选框 , 必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。也可以使用 indeterminate 指示复选框在一种不确定状态(大多数平台上,显示为一条穿过复选框的水平线)
submit <input type="submit">定义提交按钮(提交表单)
button 无缺省行为按钮。<input type="button" value="Click me" onclick="msg()" >定义可点击的按钮(大多与 JavaScript 使用来启动脚本)
file <input type=" file "> 此控件可以让用户选择文件。使用 accept 属性可以定义控件可以选择的文件类型。
image <input type=" image " > image 输入类型将图像定义为提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。
reset <input type=" reset ">定义重置按钮(清除文本区域内容,重置所有表单值为默认值)
hidden <input type=" hidden " name =" " value=" "> hidden 输入类型定义隐藏字段, 不显示在页面上的控件,但它的值会被提交到服务器。
color HTML5 用于指定颜色的控件
date HTML5 用于输入日期的控件(年,月,日,不包括时间)
datetime HTML5 基于 UTC 时区的日期时间输入控件(时,分,秒及几分之一秒)。
datetime-local HTML5 用于输入日期时间控件,不包含时区。
email HTML5 用于编辑 e-mail 的字段。 合适的时候可以使用 :valid 和 :invalid CSS 伪类。
file 此控件可以让用户选择文件。使用 accept 属性可以定义控件可以选择的文件类型。
month HTML5 用于输入年月的控件,不带时区。
number HTML5 用于输入浮点数的控件。
range HTML5 用于输入不精确值控件
reset 用于将表单所内容设置为缺省值的按钮。
search HTML5用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
tel HTML5 用于输入电话号码的控件;换行会被自动从输入的值中移除A。可以使用属性,比如 pattern 和 maxlength 来约束控件输入的值。恰当的时候,可以应用 :valid 和 :invalid CSS 伪类。
time HTML5 用于输入不含时区的时间控件。
url HTML5 用于编辑URL的字段。 换行会被自动从输入值中移除。可以使用如:pattern 和 maxlength 样的属性来约束输入的值。 恰当的时候使可以应用 :valid 和 :invalid CSS 伪类。
week HTML5 用于输入一个由星期-年组成的日期,日期不包括时区。
关于input的几个重要补充
1. 在input里,name 的作用

由于表单提交的数据一般都是以key:value的方式提交,所以input中的name属性主要用来标识提交的数据的key值,好让服务器处理程序分辨。

例如:

<input name=name value=Adam>
<input name=age value=18>

则服务器在后台收到的数据格式可能是这样的:

{
name:adam,
age:18
}
2. 分组

<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<input type="radio" name="hobby" value="看书">看书
<input type="radio" name="hobby" value="打羽毛球">打羽毛球
在网页上效果是这样的,

image.png
3. placeholder 属性

placeholder为HTML5的新属性。
placeholder 属性提供可描述输入字段预期值的提示信息(hint);该提示会在输入字段为空时显示,并会在字段获得焦点时消失(placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password)
示例 :
<input id="password" type ="password" name="password" placeholder="请输入密码">
效果如下:

image.png

PS:当两个标签之间有空格时, placeholder的内容将不能被正确的显示(通常删一行才可以看到)。所以当你设置了placeholder属性, 而没有任何变化时, 不妨检查一下空格哦 !

4. type=hidden隐藏域

隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的。当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

在步骤 ② 中,正在更新的记录的ID被保存在隐藏域中。 当表单在步骤 ③ 中提交时,ID将自动发送回具有记录内容的服务器。 ID允许站点的服务器端组件确切地知道需要使用提交的数据更新哪些记录。

举例:

  1. 有些时候我们要给用户一信息,让他在提交表单时提交上来以确定用户身份,如sessionkey等。当然这些东西也能用cookie实现,但使用隐藏域就简单的多了.而且不会有浏览器不支持,用户禁用cookie的烦恼。

  2. 有些时候一个form里有多个提交按钮,怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢?我们就可以写一个隐藏域,然后在每一个按钮处加上onclick=”document.form.command.value=”xx””然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。

  3. 有时候一个网页中有多个form,我们知道多个form是不能同时提交的,但有时这些form确实相互作用,我们就可以在form中添加隐藏域来使它们联系起来。

  4. JavaScript不支持全局变量,但有时我们必须用全局变量,我们就可以把值先存在隐藏域里,它的值就不会丢失了。

  5. 还有个例子,比如按一个按钮弹出四个小窗口,当点击其中的一个小窗口时其他三个自动关闭.可是IE不支持小窗口相互调用,所以只有在父窗口写个隐藏域,当小窗口看到那个隐藏域的值是close时就自己关掉。

form 表单使用

<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么区别?

常见问题

表单中readonly和disabled属性的区别
表单提交文件的正确方式
如何无刷新提交表单
默认情况下,form中的button按钮不声明type属性,则一律视为submit

post 和 get 方式的区别

在客户机和服务器之间进行请求-响应时,两种最常被用到的 HTTP方法 是 GET和 POST。
在form表单中,可以通过设置Method指定提交方式为GET或者POST提交方式,默认为GET提交方式。

GET POST
语义 从指定的资源请求数据 (获取数据 ) 向指定的资源提交要被处理的数据 (提交数据)
缓存 可被缓存 不会被缓存
历史 参数保留在浏览器历史记录中 参数不会保留在浏览器历史记录中
书签 可被收藏为书签 不能被收藏为书签
对数据长度的限制 有限制。当发送数据时,GET 方法向 URL 添加数据;URL 的长度是受限制的(URL 的最大长度是 2048 个字符) 无限制
可见性 数据在 URL 中对所有人都是可见的 查询字符串(名称/值对)是在 GET 请求的 URL 中发送的(使用 GET 时,表单数据在页面地址栏中是可见的, URL 会跟着变化) 查询字符串(名称/值对)是在 POST 请求的 HTTP 消息主体中发送的(使用POST时, URL 不会变化)
安全性 与 POST 相比,GET 的安全性较差,因为所发送的数据是 URL 的一部分。GET 请求只应当用于取回数据 , 不应在处理敏感数据时使用 POST 比 GET 更安全,因为参数不会被保存在浏览器历史或 web 服务器日志中。
幂等性 幂等 非幂等
用途 一般用于获取/查询资源信息 一般用于更新资源信息

GET后退按钮/刷新无害,POST数据会被重新提交(浏览器应该告知用户数据会被重新提交)

其他资料阅读:

上一篇下一篇

猜你喜欢

热点阅读