1. form表单有什么作用?有哪些常用的input 标签,分别有什么作用?
- 表单的作用是搜集用户的输入,向服务器传输数据,从而实现用户与web服务器的交互。
- Input表示Form表单中的一种输入对象,根据Type类型可分为文本输入框、密码输入框、单选/复选框、提交/重置按钮等等。
在HTML5中,规定的 input type 属性值如下: - 一些type值及其作用(最后有详细版)
- button: 定义可点击按钮
- checkbox: 复选框
- email : 定义用于e-mail地址字段,提交时会验证
- file : 上传文件
- hidden : 定义隐藏字段
- image : 定义图像为提交按钮
- color : 定义拾色器,定义后出现颜色调板
- date: 定义 date 控件(包括年、月、日,不包括时间)
2. post 和 get 方式的区别?
- GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感信息。 GET参数通过URL传递,POST放在Request body中。
- GET请求在URL中传送的参数是有长度限制的,而POST理论上是不受限制的。
- GET在浏览器回退时是无害的,而POST会再次提交请求。
- GET和POST本质上就是TCP链接,并无差别。但是由于HTTP的规定和浏览器/服务器的限制,导致他们在应用过程中体现出一些不同。对于GET方式的请求,浏览器会把http header和data一并发送出去(一个包),服务器响应200(返回数据);而对于POST,浏览器先发送header,服务器响应100 continue,浏览器再发送data(两个包),服务器响应200 ok(返回数据)。”
3. 在input里,name 有什么作用?
name 属性规定 input 元素的名称。
name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。
注释:只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
4. radio 如何 分组?
设置相同的name属性值.
5. placeholder 属性有什么作用?
<input type="text" name="first_name" placeholder="你的姓名..." />
placeholder 属性提供可描述输入字段预期值的提示信息(hint)。
该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
注释:placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password。
6. type=hidden隐藏域有什么作用? 举例说明
- 隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。
- 有些时候我们要给用户一信息,让他在提交表单时提交上来以确定用户身份,如sessionkey,等等.当然这些东西也能用cookie实现,但使用隐藏域就简单的多了.而且不会有浏览器不支持,用户禁用cookie的烦恼。
- 有些时候一个form里有多个提交按钮,怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢?我们就可以写一个隐藏域,然后在每一个按钮处加上onclick="document.form.command.value="xx""然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。
- 有时候一个网页中有多个form,我们知道多个form是不能同时提交的,但有时这些form确实相互作用,我们就可以在form中添加隐藏域来使它们联系起来。
- javascript不支持全局变量,但有时我们必须用全局变量,我们就可以把值先存在隐藏域里,它的值就不会丢失了。
- 还有个例子,比如按一个按钮弹出四个小窗口,当点击其中的一个小窗口时其他三个自动关闭.可是IE不支持小窗口相互调用,所以只有在父窗口写个隐藏域,当小窗口看到那个隐藏域的值是close时就自己关掉。
简单介绍 HTML 表单的用法
HTML表单是一个包含表单元素的区域, 表单使用<form> 标签创建。注意,<form >元素是块级元素。
1.表单属性
- action:规定当提交表单时,向何处发送表单数据。action取值为:第一,一个URL(绝对URL/相对URL),一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理。第二,使用mailto协议的URL地址,这样会将表单内容以电子邮件的形式发送出去。这种情况比较少见的,因为它要求访问者的计算机上安装和正确设置好了邮件发送程序。第三,空值,如果action为空或不写,表示提交给当前页面。
- method:该属性定义浏览器将表单中的数据提交给服务器处理程序的方式。关于method的取值,最常用的是get和post。
- target:该属性规定在何处显示action属性中指定的URL所返回的结果。取值有_blank(在新窗口中打开)、_self(在相同的框架中打开,默认值)、_parent(在父框架中打开)、_top(在整个窗口中打开)和framename(在指定的框架中打开)。
- title:设置网站访问者的鼠标放在表单上的任意位置停留时,浏览器用小浮标显示的文本。
- enctype:规定在发送到服务器之前应该如何对表单数据进行编码。取值:默认值为 "application/x-www-form-urlencoded",在发送到服务器之前,所有字符都会进行编码;“multipart/form-data”:不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。
- name:表单的名称。注意和id属性的区别:name属性是和服务器通信时使用的名称;而id属性是浏览器端使用的名称,该属性主要是为了方便客户端编程,而在css和JavaScript中使用的。
2. 表单元素
- 单行文本框<input type="text"/>(input 的type 属性的默认值就是"text")
- 密码框<input type="password"/>
- 单选按钮<input type="radio"/>。表单提交时,选中项的value和name被打包发送
- 复选框<input type="checkbox"/>。表单提交时,选中项的value和name被打包发送
- 隐藏域<input type="hidden"/>。隐藏域通常用于向服务器提交不需要显示给用户的信息
- 文件上传<input type="file"/>。使用file,则form的enctype必须设置为multipart/form-data,method属性为POST
- 下拉框<select>标签
- 多行文本<textarea></textarea>。<textarea>没有value属性
- <label></label>标签。在<input type=“text”>前可以写普通的文本来修饰,但是单击修饰文本的时候input并不会得到焦点,而用label则可以,for属性指定要修饰的控件的id
- 提交按钮<input type="submit"/>。当用户单击<inputt type="submit"/>的提交按钮时,表单数据会提交给<form>标签的action属性所指定的服务器处理程序。中文IE下默认按钮文本为“提交查询”,可以设置value属性修改按钮的显示文本。
- 重置按钮<input type="reset"/>。当用户单击<input type="reset"/>按钮时,表单中的值被重置为初始值。在用户提交表单时,重置按钮的name和value不会提交给服务器。
- 图像按钮<input type="image" src="bg.jpg"/>。图像按钮的src属性指定图像源文件,它没有value属性。
参考自