在input里，name属性的作用
2018-03-30 本文已影响0人
饥人谷_易燃
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>
提交数据，检查...
radio表单提交.png
radio表单.png
在右下角可以清楚的看到我们勾选的数据，已经使用name属性来将hobby和sex两组数据区分
