HTML表单知识点

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

作用

用于搜集不同类型的用户的输入，

和

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

常见的input标签及其作用

（ 元素是最重要的表单元素； 元素有很多形态，根据不同的 type 属性）
举例

image.png

• button：定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。

• checkbox：定义复选框。复选框勾选状态默认都是on，需要在属性中加上value，才能向服务器发送对应的信息

• file：定义输入字段和 "浏览"按钮，供文件上传。页面出现按钮，点击后出现文件夹，让你选择文件上传，其中的accept规定了文件类型

• hidden：定义隐藏的输入字段。（结合CSRF攻击学习）

  • 暂存一些数据，便于后期调用，而用户看不见

  • 安全考虑，后端可对csrf值做校验

    
    
    

    image.png

-image：定义图像形式的提交按钮。举例
必须把src 属性和alt 属性与 结合使用。

-password：password：字符变为黑色小圆点

• radio：单选框，对于radio，name属性一样，则所有的选项为一组，只能选中一个。勾选状态默认都是on，需要在属性中加上value，才能向服务器发送对应的信息
• reset：清空表单数据
• submit：定义提交按钮。提交按钮会把表单数据发送到服务器。
• text：定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

2.post 和 get 方式的区别？（method属性：提交表单的方法，有get和post两种）

get：向服务器发索取数据的一种请求
post：向服务器提交数据的一种请求
区别：

• GET在浏览器回退时是无害的，而POST会再次提交请求。

• GET产生的URL地址可以被Bookmark，而POST不可以。

• GET请求会被浏览器主动cache，而POST不会，除非手动设置。

• GET请求只能进行url编码，而POST支持多种编码方式。

• GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

• GET请求在URL中传送的参数是有长度限制的，而POST没有。
  这里长度产生的限制，并不是说来自get和post请求本身存在对参数长度的限制，http协议中没有对此作规定，而这些限制
  来自浏览器的限制和服务器处理能力的限制。

• 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。

• GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
  这里与其说安全性，更不如说隐蔽性更为准确一点。通过GET提交数据，用户名和密码将明文出现在URL上，因为(1)登录
  页面有可能被浏览器缓存，(2)其他人查看浏览器的历史纪录，那么别人就可以拿到你的账号和密码了，除此之外，使用
  GET提交数据还可能会造成Cross-site request forgery攻击。

• GET参数通过URL传递，POST放在Request body中。
  GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，参数之间以&相连，
  如：login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0%E5%A5%BD。如果数据是英文字母/数
  字，原样发送，如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如：
  %E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII。
  POST把提交的数据则放置在是HTTP包的包体中。
  参考1
  参考2

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

name 属性规定 input 元素的名称，也就是用户填入的数据的名称。

4.radio 如何 分组?

同一组radio单选框的name属性要一直，如果要分组，则不同组的name属性不一致即可。

5.placeholder 属性有什么作用?

提供可描述输入字段预期值的提示信息（hint）,该提示会在输入字段为空时显示，并会在字段获得焦点时消失。例如密码框显示的灰色字体“请输入密码”，在用户输入信息后消失。
placeholder 属性适用于以下的 类型：text, search, url, telephone, email 以及 password。

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

作用：隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
运用实例

• 有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，如sessionkey等。当然这些东西也能用cookie实现，但使用隐藏域就简单的多了．而且不会有浏览器不支持，用户禁用cookie的烦恼。
• 有些时候一个form里有多个提交按钮，怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢？我们就可以写一个隐藏域，然后在每一个按钮处加上onclick=”document.form.command.value=”xx””然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。
• 有时候一个网页中有多个form，我们知道多个form是不能同时提交的，但有时这些form确实相互作用，我们就可以在form中添加隐藏域来使它们联系起来。
• JavaScript不支持全局变量，但有时我们必须用全局变量，我们就可以把值先存在隐藏域里，它的值就不会丢失了。相当于预埋一个值，在后期需要调用时，可直接找到。
• 还有个例子，比如按一个按钮弹出四个小窗口，当点击其中的一个小窗口时其他三个自动关闭．可是IE不支持小窗口相互调用，所以只有在父窗口写个隐藏域，当小窗口看到那个隐藏域的值是close时就自己关掉。
• 安全性 CSRF攻击

7.HTML表单用法

链接

8.制作表单

链接