form表单

> 1、post 和 get 方式提交数据有什么区别？

get意为获得得到，通过向服务器发送特定请求获取到相应数据；其会将提交的请求数据拼接成url（通过？和&连接）向服务器发送请求，请求数据完全暴露在url中，故安全性较低，同时当请求文档较长时，拼接成的url长度超过限制会被浏览器自动截断，导致无法请求导数据。

post大意为发送，其可以向服务器提交较大文档请求，可实现文档的传输，同时请求不会在url中显示，安全性较高。

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

在form表单中，浏览器是通过name+value的形式向后台提交数据的，没有name属性的input根本不会向后台提交数据。

> 3、radio 如何分组？

radio用来构造单选，但是多个分组中单选怎么来分别呢？

radio中通过设置input的name属性来分组，相同name的即为一个分组，该分组中只能选择一个选项。

如：

```

<label>sex</label>

<input type="radio" name="sex">male

<input type="radio" name="sex">female

<label>hobby</label>

<input type="radio" name="hobby">run

<input type="radio" name="hobby">music

```

> 4.placeholder属性有什么作用？

placeholder属性用来为input输入框提供提示信息，如：

```

<input type="password" placeholder="请输入密码">

```

即可实现在密码输入框中输入提示内容“请输入密码”。

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

<input type="hidden" name="name" value="val">可以在页面埋下一个name=val字段，用户完全看不见，但后端能够看到。其作用主要有：

1. 暂存数据。我们在页面埋下的name=val下次要用的时候可直接定位到这个元素，进行利用。

2. 作为一个安全验证信息保证安全。如：当我们在form表单中埋下<input type="hidden" name='csrf' value='45435463'>时，用户在提交了相关信息之后，csrf=45435463字段（相当于验证码）会同时被提交到后台，此时后端服务器可通过验证该验证码来验证用户提交信息真伪，确保了信息安全。

> 6、label 有什么作用？如何使用？

label标签用来为input输入框添加名称，告诉用户改输入框该输入什么信息，如：

```

<div>

            <label>姓名</label>

            <input id="name" type="text" name="username">

        </div>

```

会在输入框前面加上“姓名”字段。另外，label后面如果加上for + id可实现点击该label内容实现对应输入框的focus，如：

```

<div>

            <label for="name">姓名</label>

            <input id="name" type="text" name="username">

        </div>

```

此时，点击姓名即可开始输入框的输入。

> 7、以下input有何作用？

`<input type="submit" value="提交">`

`<input type="submit" value="提交">`能构造一个提交按钮，点击后能够提交对应form表单下的数据。与此类似的还有

```

<input type="reset" value="reset">

```

可构造一个按钮，点击实现该表单下输入内容的重置。