前端新手常见问题（二）

一、form表单有什么作用？有哪些常用的input 标签，分别有什么作用？

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：

1、表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
2、表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
3、表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

表单标签

功能：用于申明表单，定义采集数据的范围，也就是

和

里面包含的数据将被提交到服务器或者电子邮件里。

属性解释：

1、action=url: 用来指定处理提交表单的格式.它可以是一个URL地址(提交给程式)或一个电子邮件地址.
2、method=get或post: 指明提交表单的HTTP方法.可能的值为：
post：POST方法在表单的主干包含名称/值对并且无需包含于action特性的URL中.
get：不赞成。GET方法把名称/值对加在action的URL后面并且把新的URL送至服务器.这是往前兼容的缺省值.这个值由于国际化的原因不赞成使用.
3、enctype=cdata: 指明用来把表单提交给服务器时(当method值为"post")的互联网媒体形式.这个特性的缺省值是"application/x-www-form-urlencoded"
TARGET="..." : 指定提交的结果文档显示的位置：
_blank ：在一个新的、无名浏览器窗口调入指定的文档；
_self ：在指向这个目标的元素的相同的框架中调入文档；
_parent ：把文档调入当前框的直接的父FRAMESET框中；这个值在当前框没有父框时等价于_self；
_top ：把文档调入原来的最顶部的浏览器窗口中(因此取消所有其它框架)；这个值等价于当前框没有你框时的_self.

表单域:常用的input 标签

1、type=text
输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，住址等等。当然这也是Input的默认类型。
参数name：同样是表示的该文本输入框名称。
参数size：输入框的长度大小。
参数maxlength：输入框中允许输入字符的最大数。
参数value：输入框中的默认值。
特殊参数readonly：表示该框中只能显示，不能添加修改。

form表单中的input有哪些类型及其用途

2、type=password
输入类型是password，一看就明白的密码输入框，最大的区别就是当在此输入框输入信息时显示为保密字符。参数和“type=text”相类似。

form表单中的input有哪些类型及其用途

3、type=file
当你在BBS上传图片，在Email中上传附件时一定少不了的东西，提供了一个文件目录输入的平台，选择上传文件，参数有name，size。

form表单中的input有哪些类型及其用途

4、type=hidden
非常值得注意的一个，通常称为隐藏域。如果一个非常重要的信息需要被提交到下一页，但又不能或者无法明示的时候。一句话，你在页面中是看不到hidden在哪里。最有用的是hidden的值。

5、type=button
标准的windows风格的按钮，当然要让按钮跳转到某个页面上还需要加入写JavaScript代码。

form表单中的input有哪些类型及其用途

6、type=checkbox
多选框，常见于注册时选择爱好、性格、等信息。参数有name,value及特别参数checked（表示默认选择） 其实最重要的还是value值，提交到处理页的也就是value。（附：name值可以不一样，但不推荐。）

form表单中的input有哪些类型及其用途

7、type=radio
单选框，出现在多选一的页面设定中。参数同样有name,value及特别参数checked。不同于checkbox的是，name值一定要相同，否则就不能多选一。当然提交到处理页的也还是value值。

form表单中的input有哪些类型及其用途

8、type=image
比较另类的一个，可以作为提交式图片按钮，通常采用这种按钮效果更美观。

form表单中的input有哪些类型及其用途

9、type=submit and type=reset
分别是“提交”和“重置”两按钮，submit主要功能是将Form中所有内容进行提交action页处理，reset是快速清空所有填写内容的功能。

form表单中的input有哪些类型及其用途

二、post 和 get 方式的区别？

w3c中的注释：

GET 方法

请注意，查询字符串（名称/值对）是在 GET 请求的 URL 中发送的：
/test/demo_form.asp?name1=value1&name2=value2
有关 GET 请求的其他一些注释：
GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
GET 请求只应当用于取回数据

POST 方法

请注意，查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的：
POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2
有关 POST 请求的其他一些注释：
POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签
POST 请求对数据长度没有要求

总结：两者的区别

GET方式：

1、GET方式是以实体的方式得到由请求URL所指定资源的信息，如果请求URL只是一个数据产生过程，那么最终要在响应实体中返回的是处理过程的结果所指向的资源，而不是处理过程的描述。也就是说，GET的到的信息是资源，而不是资源的处理过程。
2、请的求的数据会附加在URL之后，以？分隔URL和传输数据，多个参数用&连接。URL编码格式采用的是ASCII编码，而不是Unicode，即所有的非ASCII字符都要编码之后再传输。
3、因为URL的长度限制，GET方式传输的数据大小有所限制，传送的数据量不超过2KB。
4、GET方式服务器端用Request.QueryString获取变量的值。
5、GET方式传输的参数安全性低，因为传输的数据会显示在请求的URL中。

POST方式：

1、用来向目的服务器发出请求，要求它接收被附在请求后的实体，并把它当做请求队列中请求URL所指定资源的附加新子项。
2、POST方式将表单内各个字段和内容放置在HTML HEADER中一起传送到Action属性所指定的URL地址，用户是看不到这个过程的。
3、POST方式传送的数据量比较大，一般被默认为没有限制，但是根据IIS的配置，传输量也是不同的。
4、POST方式在服务器端用Request.Form获取提交的数据。
5、POST方式传输的数据安全性较高，因为数据传输不是明显显示的。

三、在input里，name 有什么作用？

标签中name的作用

1、name 属性规定 input 元素的名称。
2、name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。

四、radio 如何 分组?

设置 name 属性，相同的为一组。

五、placeholder 属性有什么作用?

1、placeholder 属性提供可描述输入字段预期值的提示信息（hint）。
2、该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
注释：placeholder 属性适用于以下的 类型：text, search, url, telephone, email 以及 password。

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

1、 隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
​2 、有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，如sessionkey，等等．当然这些东西也能用cookie实现，但使用隐藏域就简单的多了．而且不会有浏览器不支持，用户禁用cookie的烦恼。
3、 有些时候一个form里有多个提交按钮，怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢？我们就可以写一个隐藏域，然后在每一个按钮处加上onclick="document.form.command.value="xx""然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。
4、 有时候一个网页中有多个form，我们知道多个form是不能同时提交的，但有时这些form确实相互作用，我们就可以在form中添加隐藏域来使它们联系起来。

文件域是网页上传文件的控件，为网页上传各种文件提供支持。隐藏域是网页里面一个特殊的空间，它不在网页中显示出来，主要用途是为网页交互时存储一些不需要在网页显示的数据隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。
代码格式：
＜input type="hidden" name="..." value="..."＞
属性解释：
type="hidden"定义隐藏域；
name属性定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
value属性定义隐藏域的值例如：
＜input type="hidden" name="ExPws" value="dd"＞
其实说白了就隐藏域不在前台显视的,跟表单的元素一样.有名字有数值,只是在提交数据是不可见的。