有关form表单的一些基础知识

2017-05-13 本文已影响0人李博洋li

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

表单是web页面与服务器交互过程中最重要的信息来源，它会搜集用户的输入，并以提交的方式来传输到服务器上进行处理并可能返回反馈的一个媒介，从而来实现人机交互。
常见的input标签及作用有下面几个

<input type="text">  单行文本输入框
<input type="password">  密码输入框
<input type="checkbox">  复选框
<input type="radio">  单选框
<input type="file">  上传按钮
<input type="submit">  提交按钮
<input type="button">  按钮(也可以写为<button>内容</button>)
<input type="reset">  重置按钮
<select>  下拉单选
  <option></option>
  <option></option>
</select>
<textarea></textarea> 多行文本输入框
<input type="number">  数字输入框
<input type="hidden"> 隐藏域

2、form的method属性get和post的区别是什么？

1.get方法是将提交内容拼成一个字符串进行提交，提交的输入项name和value值会暴露（但我们不能够凭这一点就直接判定post方法比get方法安全），而且在内容非常庞杂的时候，因为浏览器输入域名的位置有字数限制可能会截取一部分，不能完全提交，而post方法就没有这一缺点
2.get请求的URL可以被浏览器缓存；post的请求不能够被浏览器缓存：这涉及到一个使用场景的问题，如果用户的输入不是非常重要机密的信息就比如性别年龄这一种，当下次用户还是使用同一浏览器进行访问这个网站的时候，使用get方法可能会更合适一些。
3.get表达的是一种幂等的，只读的，纯粹的操作，即它除了返回结果不应该会产生其它副作用（如写数据库），因此绝大部分get请求（通常超过90%）都直接被CDN缓存了，这能大大减少web服务器的负担。而post所表达的语义是非幂等的，有副作用的操作，所以必须交由web服务器处理。（关于幂等的概念：Idempotent - 幂等幂等的概念是指同一个请求方法执行多次和仅执行一次的效果完全相同。按照RFC规范，PUT，DELETE和安全方法都是幂等的。同样，这也仅仅是规范，服务端实现是否幂等是无法确保的。）

3、在input中，name有什么作用？

name是作为inout的一个属性存在的，在处理表单时，我们的关注点为用户填写的信息，此时，表单的每一项的name都作为我们提取到的信息的一个”标签“，可以理解为每个分类的一个标签名称，每一个表单项都必须要有name值，否则这个表单无法进行任何操作，相当属于一个废的表单。有一个需要注意的点：在单选按钮组中，我们的需求一般是多个中选择一个合理的，那么这个时候这个单选按钮组无论有几个<input type="radio">它们的name都必须一致。而提交的内容显示形式为：name:value的形式。

4、radio如何分组？

这个问题即为上个问题末尾所说的，一组单选按钮需要选择一个时，那么无论有几个<input type="radio">它们的name都必须一致。以下是个示例：

<label>请选择性别</label>
<input type="radio" value="男"  name="gender">男
<input type="radio" value="女"  name="gender">女

<label>请选择晚饭吃什么</label>
<input type="radio" value="one"  name="dinner">火锅
<input type="radio" value="two"  name="dinner">披萨
<input type="radio" value="three"  name="dinner">烤鱼
<input type="radio" value="four"  name="dinner">沙拉

5、placeholder有什么作用？

我们经常会遇到一些表单没有label提示项，这个时候，表单可以用placeholder来对用户进行提醒，这一个输入框是需要输入什么样的内容，如下图红框内容：

demo.png

6、type=hidden隐藏域有什么作用?

根据我的个人少少的经验所得，一般后端开发会经常使用这个表单项。隐藏域可以存数一些数据,在页面上是不做展示的,这个有一个比较好的作用是可以预防csrf攻击，给这个隐藏域赋一个值，当用户点击提交时后台进行验证隐藏域的内容是否是我们定义的值，如果是，那么这个表单是正常的，如果没有隐藏域或者隐藏域的位置不对，内容不对，那么我们需要警惕是否被攻击。

7、HTML表单的用法

当页面上有表单项的时候，能够提交的前提是这一部分表单必须有<form></form>标签包裹，否则不能提交！！！原因是：表单提交需要有一个提交地址以及提交方式，也就是我们需要给form标签规定其method（提交方式）和action（提交地址）以便服务器能够处理。内容中的input中每一种表单项需要给每一个规定其value值（有一部分value初始值可有可无，比如说<input type="text">；当然<input type="password">是没必要有初始值的也不建议有；select中的option每一个需要有一个value值以便进行处理；<input type="radio">和<input type="checkbox">的value值是必须存在的）和name值（必需）。最后我们需要一个提交按钮，一般是用<input type="submit">来进行提交的。