<input>标签中id和name的作用和区别 5
<input type="radio" name="sex" id="female" />Female
</label>
里面的name 和id 的作用是什么和有什么区别? 展开
一、作用:
ID是以 #定义的CSS样式,也可以用JS获取来控制 getElementById(这里是ID) 来获取;
name就是给当前标签或元素指定名称,也可以用JS来控制值,form提交后获取的时候就需要获取name名称。
二、区别:
1、含义不同:
id要符合标识的要求,比如大小写敏感,最好不要包含下划线(因为不兼容CSS)。而name基本上没有什么要求,甚至可以用数字。ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的。
2、表示不同:
<input> 标签规定用户可输入数据的输入字段。根据不同的 type 属性,输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等。
id:作为标签的唯一标识。name:作为可与服务器交互数据的HTML元素的服务器端的标示。
定义用法
<input> 标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
<input> 标签可定义输入域的开始,在其中用户可输入数据。
对于大量通常的表单控件,可以使用 <input> 标签来进行定义,其中包括文本字段、多选列表、可单击的图像和提交按钮等。
虽然 <input> 标签中有许多属性,但是对每个元素来说,只有type属性和name属性是必需的(提交或重置按钮只有 type 属性)。
以上内容参考:百度百科-input
也可以用JS获取来控制 getElementById(这里是ID) 来获取
name 很多了,就是给当前标签或元素指定名称,也可以用JS来控制值,form提交后获取的时候就需要获取name名称。
name的意义:
PHP和html的交互:
html代码:
用户名:<input type="text" name="xxx">
<input type="submit">
php代码:echo .$_GET['xxx']
php需要用到name的值"xxx"获取用户在表单中的输入,当用户输入一个用户名如"王二小",并点击submit按钮后,就会在页面上显示王二小。php通过_GET['xxx']定位相应的input标签,获取用户在该标签中的输入,"王二小"。
单选框(radio):实现单选效果。多个单选框使用相同的name,才能实现单选,否则可以同时选中这些单选框,单选就无法实现。
复选框(checkbox):对同类型的复选框进行批量操作。多个同类型的复选框有同一个name,javascript能够对这些同类型的复选框进行统一的操作,比如全选,全不选等操作。
html代码:
<input type="checkbox" name="sports" value="足球" />足球
<input type="checkbox" name="sports" value="篮球" />篮球
<input type="checkbox" name="sports" value="排球" />排球
javascript代码,定位这3个checkbox,并将其赋值给一个变量chkbx:
var chkbx = document.getElementsByName("sports");
对3个checkbox进行遍历,每个checkbox都勾上:
for(var i=0; i<chkbx.length; i++){ chkbx[i].checked = True; }
getElementById和getElementByName都是为了定位标签,每个标签的id属性是唯一的,可以理解为人的身份证号码。当要同时对多个同类型的标签进行操作时,对这些标签赋予相同的name就可以对多个标签进行批量操作了。
id的意义:
1. 被js利用进行标签定位。id是某个标签唯一的标识,javascript中,可以通过getElementById等方法定位到某个标签,从而对标签进行操作。
2.配合label标签使用,改善用户体验。实现不仅仅是点击单选框或复选框,点击文本也能选定单选框或复选框。
id一般用在前端
name一般用作后端