表单介绍

1.什么是表单？ 作用：用于收集用户的信息，进行人机交互的操作；
2.包含元素：文本框，单选，反选，隐藏域，列表框，图片框。。。。同意称为：控件

人机交互

就是手机数据之后将其传递给后台，后台出口i完再次返回响应到前台的过程

如图：
1587524276485-c1d1b899-1fab-44c7-b4f2-0f266e635190.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title><!-- 这是网页标题 -->
  6. </head>
  7. <body><!-- 下面的是网页内容 -->
  8.     <form action="dlcg.html" method="get"><!--action传递到后台的收集数据传递到后台进行相应--里面也可以填写相对路径，绝对路径地址或者文件-->
  9.         <!--method分两种属性post表示隐藏式提交get表示显示式提交会将数据显示在url地址上-->
  10.         <label>请输入姓名：</label>
  11.         <!--label此标签可以放置纯文本，专门英语显示文字使用的，和不加此标签效果一样222后期对此文本进行css样式的设置-->
  12.              <input type="text" name="" id=""><!--id对控件的唯一识别--><br/>
  13.         <label>请输入密码：</label>
  14.              <input type="password" name="" id=""><!--password密码--><br/>
  15.         <label>再次请输入密码：</label>
  16.              <input type="password" name="" id=""><!--以上为文本框和密码框--><br/>
  17.         <label>性别：</label><!--radio的name输入项目保持一致就会被认为是一组单选框，意味着只能选择一个！不一样则反之-->
  18.              <input type="radio" name="xb" value="男" checked>男
  19.              <input type="radio" name="xb" value="女">女<br/>
  20.              <!--value输入的控件的值（收集，设置）用于传递到后台使用-->
  21.         <label>兴趣爱好：</label>
  22.              <input type="checkbox" name="ah" id="" value="游泳">游泳
  23.              <!--heckbox多选按钮-->
  24.              <input type="checkbox" name="ah" id="" value="看书">看书
  25.              <input type="checkbox" name="ah" id="" value="爬山" checked>爬山<!--checked复选框（单选）默认选项-->
  26.              <input type="checkbox" name="ah" id="" value="思考">思考<br/>
  27.         <label>生日：</label>
  28.              <select><!--下来框-->
  29.                  <option value="1995">1995</option>
  30.                  <option value="1996" selected="selected">1996</option><!--selected="selected"表示默认选项-->
  31.                  <option value="1997">1997</option>
  32.                  <option value="1998">1998</option>
  33.                  <option value="1999">1999</option>
  34.                  <option value="2000">2000</option>
  35.                  <option value="2001">2001</option>
  36.              </select><!--select列表框下拉框--><br/>
  37.              头像：<img src="13.gif"><!--插入图片-->
  38.                  <select>
  39.                  <option value="1">1</option>
  40.                  <option value="2">2</option>
  41.                  <option value="3">3</option>
  42.                  <option value="4">4</option>
  43.                  <option value="5">5</option>
  44.                  </select><br/>
  45.                  <input type="button" value="普通按钮" name=""><!--普通按钮没有任何功能 -->
  46.                  <input type="submit" value="提交按钮" name=""><!--提交按钮--><!--呼应<form action="" method="">-->
  47.                  <input type="reset" value="重置按钮" name=""><!--重置数据和情空数据差不多-->
  48.              </form>
  49. </body><!--<form action="" method="">-->
  50. </html>

表单控件的常用属性：

name 指定控件的名称，可重复自定义
id 指定标签的唯一识别（类似身份证）
value 输入的控件的值（收集，设置） — 用于传递到后台使用的
checked 复选框（单选）默认被选中的项目
selected 列表框默认被选中
src 图片框的图片来源
onclick 鼠标的单击事件
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则是具有提交的功能

表单的其他控件

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

下拉框

  1. <select><!--下来框-->
  2.                  <option value="1995">1995</option>
  3.                  <option value="1996" selected="selected">1996</option><!--selected="selected"表示默认选项-->
  4.                  <option value="1997">1997</option>
  5.                  <option value="1998">1998</option>
  6.                  <option value="1999">1999</option>
  7.                  <option value="2000">2000</option>
  8.                  <option value="2001">2001</option>
  9.   </select>