<input>标签中id和name的作用和区别

Posted 2023-04-16

<label for="female">
<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

参考技术A id 一般用于css和js中引用,name用于表单提交,只有加了name属性的标签元素才会提交到服务器 参考技术B ID 是 以 #定义的CSS样式
也可以用JS获取来控制 getElementById(这里是ID) 来获取
name 很多了，就是给当前标签或元素指定名称，也可以用JS来控制值，form提交后获取的时候就需要获取name名称。 参考技术C

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标签使用，改善用户体验。实现不仅仅是点击单选框或复选框，点击文本也能选定单选框或复选框。

参考技术D

id一般用在前端

name一般用作后端

使用 sed 连接 xml 标签 [重复]

【中文标题】使用 sed 连接 xml 标签 [重复]

【英文标题】：Use sed to concatenate xml tags [duplicate]

【发布时间】：2021-12-11 18:02:41

【问题描述】：

我正在尝试从以下 xml 标记中提取和连接 <id> 和 <name> 的值

<applications><application>
  <id>292</id>
  <name>Test</name>
  <accountGuid>2-b01e-2ef14d11c5e0</accountGuid>
</application>
<application>
  <id>195</id>
  <name>State</name>
  <accountGuid>2-b01e-2ef14d11c5e0</accountGuid>
</application>
<application>
  <id>266</id>
  <name>Home</name>
  <accountGuid>2-b01e-2ef14d11c5e0</accountGuid>
</application>
</applications>

想要的输出是

292:Test
195:state
266:Home

我使用下面的 sed 提取，但它给了我输出

sed -n 's:.*<id>\(.*\)</id>.*:\1:p;s:.*<name>\(.*\)</name>.*:\1:p'

292
Test
195
state
266
Home

请大家帮忙看看我应该怎么做才能获得所需的输出？

【问题讨论】：

Don't Parse XML/HTML With Regex. 我建议使用 XML/HTML 解析器 (xmlstarlet, xmllint ...)。

【参考方案1】：

使用 xmlstarlet：

xmlstarlet select --text --template --match "/applications/application" --value-of "concat(id,':',name)" -n file.xml

输出：

292：测试 195：状态 266：首页

见：xmlstarlet select --help