前端学习《二》- HTML-form表单

174 阅读5分钟

一、Form表单有什么作用?有哪些常见的input标签,分别有什么作用?

form表单作用:简单理解就像在考试卷上填写答案,最后提交给老师。而form表单则是用于搜集不同类型的用户的输入。表单是一个包含表单元素的区域,表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。

常见input标签及作用:
1、text:定义用户可输入文本的单行输入字段。
2、button:定义可点击的按钮,但没有任何行为。button 类型常用于在用户点击按钮时启动 JavaScript 程序。
3、checkbox:定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项。
4、hidden:定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值,它们的值也可以由 JavaScript 进行修改。
5、image:定义图像形式的提交按钮。
6、password:定义密码字段。密码字段中的字符会被掩码(显示为星号或原点)。
7、radio:定义单选按钮。单选按钮允许用户选取给定数目的选择中的一个选项。
8、reset:定义重置按钮。重置按钮会清除表单中的所有数据。
9、submit:定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。
10、textarea:textarea对象代表 HTML 表单中的多行文本输入域。
11、file:用于文件上传。
参考

二、post和get方式的区别?

post和get是http最常用的method。

1、GET 是从指定的资源请求数据。
GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
GET 请求只应当用于取回数据

2、POST 向指定的资源提交要被处理的数据
POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签
POST 请求对数据长度没有要求
参考

三、在input里,name有什么作用?

name 属性规定 input 元素的名称。
name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。
注释:只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
参考

四、radio如何分组?

radio 使用name属性来分组的,所有name属性相同的radio 使用时,其中只有一个会被选中。

五、 placeholder属性有什么作用?

placeholder 属性提供可描述输入字段预期值的提示信息。该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

六、type= hidden隐藏域有什么作用?请举例说明。

  1. 隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。

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

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

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

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

七、简单介绍 HTML 表单的用法

HTML 表单用于搜集不同类型的用户输入。<form> 元素定义 HTML 表单。HTML 表单包含表单元素。表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

<input> 元素是最重要的表单元素。<input> 元素有很多形态,根据不同的 type 属性,创建不同的对象。例如<input type="text"> 定义用于文本输入的单行输入字段。

单选按钮输入<input type="radio"> 定义单选按钮。单选按钮允许用户在有限数量的选项中选择其中之一。

提交按钮<input type="submit"> 定义用于向表单处理程序(form-handler)提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。表单处理程序在表单的 action 属性中指定,action 属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。通常,表单会被提交到 web 服务器上的网页。

method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):何时使用 GET?何时使用 POST?在第二问中已有解答。

name 属性:如果要正确地被提交,每个输入字段必须设置一个 name 属性。