HTML表单问题

发表于 | 分类于 ，

HTML表单问题

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

1. 提交方式的不同

在get提交请求中通常会把用户信息显示在地址栏当中用？割开URL和参数信息，多个参数使用&链接。而post提交请求则是把用户信息放在HTTP包的包体当中且地址栏不会改变。

2. 数据限制方式不同

在get请求中通常会把参数显示在url后，当参数过多时有些浏览器和服务器就会对url进行截断。，因此get提交数据时会因为URL长度受到限制。然而post因为不会将参数显示在url后，理论上是不受限制的，但也会受到服务器接收数据大小的限制。

3. 安全性的不同

post安全性高于get，get请求会将数据清楚的显示在地址栏，登陆页面可能被浏览器缓存，历史记录可能被他人查看，且get提交数据容易受到CRF攻击。

  • 建议：

    若符合下列任一情况，则用POST方法：

    • 请求的结果有持续性的副作用，例如，数据库内添加新的数据行。
    • 若使用GET方法，则表单上收集的数据可能让URL过长。
    • 要传送的数据不是采用7位的ASCII编码。

    若符合下列任一情况，则用GET方法：

    • 请求是为了查找资源，HTML表单数据仅用来帮助搜索。
    • 请求结果无持续性的副作用。
    • 收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符。

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

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

3. radio 如何分组？

radio分组通过控制name属性值来实现，相同的name属性值为一组。

例如：

1
2
<input type"radio" name="sex" value="male">男
<input type"radio" name="sex" value="female">女
1
2
<input type"radio" name="sex1" value="male">男 
<input type"radio" name="sex1" value="female">女

4. label 有什么作用？如何使用？

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。标签的 for 属性应当与相关元素的 id 属性相同。

1
2
<label for="User">Click me</label>
<input type="text" id="User" name="Name" />

5. 一些常用的input标签

1
2
3
4
5
6
<input type="text" name="">：普通文本框 
<input type="password" name="">：密码框 
<input type="file" name="">：上传文件 
<input type="button" name="">：普通按钮 
<input type="radio" name="">：单选框 
<input type="checkbox" name="">：复选框

6. 提交的三种方式

  • <button>提交</button>双标签内可以放置其他内容，如图片。
  • <a class="btn" href="#">提交</a>这个通过样式来控制变成按钮样式，得用js来实现数据交互。
  • <input type="submit" value="提交">放在form表单内，可以打包form表单内的数据。