input框中的name和id的区别

1.

可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案:ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的。

上周我也遇到了ID和Name的问题,在页面里输入了一个input type="hidden",只写了一个ID='SliceInfo',赋值后submit,在后台用Request.Params["SliceInfo"]却怎么也去不到值。后来恍然大悟因该用Name来标示,于是在input里加了个Name='SliceInfo',就一切ok了。

第一段里对于ID和Name的解答说的太笼统了,当然那个解释对于ID来说是完全对的,它就是Client端HTML元素的Identity。而Name其实要复杂的多,因为Name有很多种的用途,所以它并不能完全由ID来代替,从而将其取消掉。具体用途有:

用途1: 作为可与服务器交互数据的HTML元素的服务器端的标示,比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。

用途2: HTML元素Input type='radio'分组,我们知道radio button控件在同一个分组类,check操作是mutex的,同一时间只能选中一个radio,这个分组就是根据相同的Name属性来实现的。

用途3: 建立页面中的锚点,我们知道<a href="URL">link</a>是获得一个页面超级链接,如果不用href属性,而改用Name,如:<a name="PageBottom"></a>,我们就获得了一个页面锚点。

用途4: 作为对象的Identity,如Applet、Object、Embed等元素。比如在Applet对象实例中,我们将使用其Name来引用该对象。

用途5: 在IMG元素和MAP元素之间关联的时候,如果要定义IMG的热点区域,需要使用其属性usemap,使usemap="#name"(被关联的MAP元素的Name)。

用途6: 某些特定元素的属性,如attribute,meta和param。例如为Object定义参数<PARAM NAME = "appletParameter" VALUE = "value">或Meta中<META NAME = "Author" CONTENT = "Dave Raggett">。

显然这些用途都不是能简单的使用ID来代替掉的,所以HTML元素的ID和Name的却别并不是身份证号码和姓名这样的区别,它们更本就是不同作用的东西。

表单元素(form input textarea select)与框架元素(iframe frame)用 name

这些元素都与表单(框架元素作用于form的target)提交有关, 在表单的接收页面只接收有name的元素, 赋ID的元素通过表单是接收不到值的, 你自己可以验证一下.

有一个例外: A 可以赋 name 作为锚点, 也可以赋ID。

2.

id要符合标识的要求,比如大小写敏感,最好不要包含下划线(因为不兼容CSS)。而name基本上没有什么要求,甚至可以用数字。ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的。

<input> 标签规定用户可输入数据的输入字段。

根据不同的 type 属性,输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等。
id:作为标签的唯一标识。

name:作为可与服务器交互数据的HTML元素的服务器端的标示。

3.

ID 是 以 #定义的CSS样式

也可以用JS获取来控制 getElementById(这里是ID) 来获取

name 很多了,就是给当前标签或元素指定名称,也可以用JS来控制值,form提交后获取的时候就需要获取name名称。

4.

id 一般用于css和js中引用,name用于表单提交,只有加了name属性的标签元素才会提交到服务器。

以上所述是小编给大家介绍的input框中的name和id的区别,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • input框中的name和id的区别

    1. 可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案:ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的. 上周我也遇到了ID和Name的问题,在页面里输入了一个input type="hidden",只写了一个ID='SliceInfo',赋值后submit,在后台用Request.Params["SliceInfo

  • input框中自动展示当前日期yyyy/mm/dd的实现方法

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input框中自动展示当前日期</title> </head> <body> <input type="text" id="input"> <script>

  • 将input框中输入内容显示在相应的div中【三种方法可选】

    例题一枚:在input框中输入内容,会相应的显示在下面的div中的不同做法: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" rel=

  • 微信小程序input框中加入小图标的实现方法

    最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: emmmm 好像小程序的background-image属性并不给力啊,然后查阅相关资料后,放弃了background-image属性. 然后另辟蹊径,由于小程序中,好像只有image标签才能加载本地图片,所以考虑使用image标签来实现,大致思路就是在一个view中,左边是image,右边是in

  • 微信小程序登录时如何获取input框中的内容

    这篇文章主要介绍了微信小程序登录时如何获取input框中的内容,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 最近写小程序项目遇到一些问题,今天整理下这些问题的解决方法,希望对用户有帮助.下面是登录页,点击登录时获取input框中的值, 效果如下: wxml布局如下: <view > <input type="text" placeholder-style="color:#fff;" bindin

  • js 将input框中的输入自动转化成半角大写(税号输入框)

    这两天出了这么一个需求,输入税号的时候,需要自动将其转化为半角大写,并且阻止标点符号中文汉字的输入.(下面会有:全半角转换.文本框选中.光标位置判断.设置光标位置 这些内容) 然后我就开始了慢慢查找资料之路. 首先查了全半角的区别以及如何转化. var str = "中文;:a"; for (var i = 0; i < str.length; i++) { if (str[i].match(/[\u0000-\u00ff]/)) { console.log("半角字符

  • 在react项目中使用antd的form组件,动态设置input框的值

    问题: 创建账号时,输入账号后不搜索直接保存,提示查询后,再点搜索就不能搜索这个账号了 原因: 点击保存之后,对表单进行了验证,导致之后请求的数据无法在更新到input框中,也就是说即使在state中有值,也不会更新initialValue值,就导致搜索后的值不能正确填入input中,表单也就提交不了. 解决办法: 不使用initialValue设置动态更新的值,而是使用 this.props.form.setFieldValue({name:data}); 用于动态更新值,就可以解决了. if

  • js实现input框文字动态变换显示效果

    本文实例讲述了js实现input框文字动态变换显示效果.分享给大家供大家参考.具体如下: 这里演示js实现INPUT框中的特殊显示效果,一些文字慢慢交替显示,最终显示出完整的文字,需要显示的文字预先保存在数组中,依次调用显示,有意思吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-input-txt-rand-show-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • PHP在弹框中获取foreach中遍历的id值并传递给地址栏

    1.php有时候我们需要再弹框中获取foreach中遍历的数据(例如id),在弹框中点击按钮并传递给地址栏跳转.那么应该怎么做呢. 2. 点击取现按钮,如果没有设置密码->弹框 3. 点击去设置,把用户名通过地址栏传递给别的页面. 4.使用onclick事件,把参数charge传递给function函数.function为弹窗函数. 5. 把username值传递过来.并给"去设置"赋值herf属性. 6. <div class="mask" >&

  • 详解elementUI中input框无法输入的问题

    最近发现别人项目中在输入密码的时候发现input框无法输入进去 键盘都快敲坏了还是无法输入 通过各种排查.还是无法解决这个问题 后面无意中发现 elementUI中@input事件可以拿到当前的输入的值 问题找到了 视图没有更新的问题 那么怎么解决了 刷新通过this.$forceUpdate() 可以解决这个问题 这样的话这个问题就解决了 原因可能是由于组件嵌套太深(不是很了解为啥出现这个问题有没有大神解释一波 ) 到此这篇关于详解elementUI中input框无法输入的问题的文章就介绍到这

随机推荐