HTML表单用法

含义：表单是一个包含表单元素的区域，表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素

<input>标签

image.png
PS：type说明数据类型是文本，name表示这个数据是什么，提交数据给服务器时就是user=value

<form>标签
表单数据必须被<form>标签包裹，不然无法提交
form标签是表单的外壳，主要属性有4个
1.action属性：表单提交的地址
2.method属性：提交表单的方法，有get和post两种
get类型向服务器发送请求实例，图中url为请求，get方式只是数据的简单组合，形成新的url

image.png
post类型使用实例
image.png

对比&总结：

• get类型url简单组合，复杂；post类型url简介，安全
• get类型适合提交数据量少的，例如在服务器搜索一篇论文
• post类型适合安全性要求高的，或者像提交一片文章这样数据量大的

3.target：在何处打开action
4.enctype：编码方式

image.png

举例

image.png

<label>标签

• 给输入框前加上文字
• label for：在点击输入框前的文字时，对应输入框进入输入状态，需要与input中id的值对应

<input>标签中type的值
所有input都要加上name，不然会无法传输数据
text：普通的文本框，单行输入

password：字符变为黑色小圆点

radio：单选框，对于radio，name属性一样，则所有的选项为一组，只能选中一个
checkbox：复选框
PS：单复选框勾选状态默认都是on，需要在属性中加上value，才能向服务器发送对应的信息

file：页面出现按钮，点击后出现文件夹，让你选择文件上传，其中的accept规定了文件类型

select：下拉菜单。选项用option标签包裹，传输值为value中的值，加上selected的选项是下拉菜单的默认选项。

<textarea>标签：多行文本框，直接在开始和闭合标签中间部分输入内容，就相当于value值，与input不同

type的hidden：csrf攻击？

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

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

  
  image.png
  image.png

image.png

reset：清空用户所填数据
submit：提交

placeholder

image.png
image.png