首页 > 编程 > HTML > 正文

html中id属性和name属性的区别是什么

2020-03-24 16:17:21
字体:
来源:转载
供稿:网友
html中,id属性和name属性都是提供标识符,表示HTML元素标签的。那么它们之间有什么区别?本篇文章就给大家简单比较一下id属性和name属性,介绍id属性和name属性之间的区别是什么,希望对大家有所帮助。

html中的id属性

我们使用id属性可以标识唯一的HTML元素,可以在在URL中用作锚引用(带#符号的URL),或者在css中用作ID选择器来设置该元素的样式。也可以在javascript中,使用getElementById(),通过id属性值来查找元素,在对元素进行操作。例:

 p id= p1 测试文本!测试文本! /p  p id= p2 测试文本!测试文本! /p 

5.jpg

 script document.getElementById( p2 ).style.color= red  /script 

id属性是普遍兼容的,对任何元素都有效。且id属性的值是区分大小写的,每个id值都应该是唯一的。例:

 div id= demo  div id= a div标签,id值为a /div  p id= A p标签,id值为A /p  /div 
#a{ color: red;}#A{ color: pink;}

效果图:

3.jpg

html中的name属性

name属性同样是用来标识HTML元素的,但它不具有是唯一行,它的值可以重复使用,例:单选按钮

 form action= method= get  最喜欢水果? br / br /  label input name= Fruit type= radio value= / 苹果 /label br /  label input name= Fruit type= radio value= / 桃子 /label br /  label input name= Fruit type= radio value= / 香蕉 /label br /  label input name= Fruit type= radio value= / 梨 /label br /  label input name= Fruit type= radio value= / 其它 /label br /  /form 

效果图:

2.jpg

正如上例所示,name属性经常在表单中使用,用来提交信息;它仅对a, form, iframe, img, map, input, select, textarea等标签元素有效。

name属性可以在在javascript中,使用getElementsByName()来查找元素;但无法在CSS或URL中被引用。例:

 script type= text/javascript function getElements() var x=document.getElementsByName( myInput  alert(x.length); /script 
input name= myInput type= text size= 20 / br / input name= myInput type= text size= 20 / br / input name= myInput type= text size= 20 / br / br / input type= button quot;getElements() value= 名为 myInput 的元素有多少个? /

效果图:

1.gif

说明:

可以这样说,ID是一个人的身份证号码,而Name是这个人的名字。两者可以同时存在,共享相同的命名空间(两者的值可以相同)。

总结:以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。

以上就是html中id属性和name属性的区别是什么的详细内容,html教程

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表