input标签

<input> 标签用于在表单建立一个简单的输入框，属于自闭和标签。
input 标记是放在表单<form></form>之间的，用来在表单中建立一个数据储存域。它的最主要的两个属性是：name属性和type属性

name属性的作用

1.作为可与服务器交互数据的HTML元素的服务器端的标示，我们可以在服务器端根据其Name取得元素提交的值

例如：

<!DOCTYPE html>
<html hang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, inital-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
<div class="login">
    <input type="text" name="sex">
    <form action="/abc" method="post">
        <div class="username">
            <input type="text" name="username">
        </div>
        <div class="password">
            <input type="pass" name="password">
        </div>
        <div class="submit">
            <button>提交</button>
        </div>
     </form>
</div>
</body>
</html>

如上代码中，包含在body标签中的三个name分别表示为用户输入数据打上sex、username、password的标签，浏览器在收到用户输入数据后，将数据上传给服务器

桌面创建一个test文件夹，将上述代码的002.html放入test文件夹，使用Gitbash输入http-server来开启一个本地服务器

本地服务器.png

在浏览器URL输入http://127.0.0.1:8080，右键，检测，在表单输入数据，点击提交

表单键入数据.png

查看页面右侧检测内容

表单检查2.png

浏览器上传的数据中可以清楚的看到我们键入的数据是什么，以及分别属于哪个name名字(name="sex"之所有没有显示，是因为其并不在表单中，没有被from标签包裹在其中)

2.在Input标签的属性 type='radio'分组，就是根据相同的Name属性来实现的

例如：

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<div class="login">
  <form action="/getInfo" method="get">
      <div class="submit">
      <button>提交😁</button>
    </div>
    <div class="hobby">
      <label>爱好</label>
      <input type="checkbox" name="hobby" value="read"> 读书
      <input type="checkbox" name="hobby" value="music"> 听歌
      <input type="checkbox" name="hobby" value="study"> 学习
    </div>
    <div class="sex">
      <label>性别</label>
      <input type="radio" name="sex" value="男"> 男
      <input type="radio" name="sex" value="女"> 女
    </div>
    </div>
  </form>
</div>
</body>
</html>

提交数据，检查...