1、基本格式：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5. </head>
  6. <body>
  7.   <form>
  8.     。
  9.     。
  10.     。
  11.   </form>
  12. </body>
  13. </html>

2、表单控件的常用属性：

name 指定控件的名称，可重复 — 给后台获取数据使用
id 指定标签的唯一识别（类似身份证）
value 输入的控件的值（收集，设置） — 用于传递到后台使用的
checked 复选框（单选）默认被选中的项目
selected 列表框默认被选中的项目
src 图片框的图片来源
onclick 鼠标的单击事件 — JavaScript脚本的事件
disabled 禁用该控件
multiple 允许多选（适用于普通列表框）

action

相对路径，绝对路径地址或者文件，作用是为了传递到后台，收集数据传递到后台进行响应 —

method

1、post 表示隐式的提交，对安全信息保护的比较好
2、get 表示显示的提交，对信息的保护不是特别好，会将数据显示在url地址上

label

1、此标签可以放置纯文本，专门用于显示文字使用的，和不加此标签效果一样，用来包裹文字用的；
2、后期可以对此文本进行css样式的设置

radio的name属性

1、name是一样的话会被认为是一组单选框，意味着只能选中一个；
2、name值不一样，表示他们不是一组，可以同时选中；

按钮解析

image.png
1、button普通按钮回和后面的JavaScript联动使用
2、submit则是具有提交的功能
3、file具有上传的功能
4、placeholder可以为填写框内添加提示文字
5、radio是单选按钮，每个选项的name值要相同
6、checkbox是多选按钮

3、表单的其他控件

  1. 普通列表框(非下拉列表框)
  2. 隐藏域 — 虽然是隐藏的，但是主要作为前台不方便被其他人看到，但是需要传递到后台的数据
  3. 上传控件 — 选择文件和后台脚本联动上传
  4. 多行文本域 — 用于论坛发帖，长文档的输入

4、拓展

分组下拉菜单 — optgroup
image.png