当使用HTML <input>标记时,使用名称和id属性之间的区别是什么,特别是我发现它们有时命名相同?
当前回答
name用于在DOM(文档对象模型)中提交表单。
ID用于DOM中HTML控件的唯一名称,尤其是JavaScript和CSS控件。
其他回答
一个使用相同名称的有趣案例:input元素类型复选框,如下所示:
<input id="fruit-1" type="checkbox" value="apple" name="myfruit[]">
<input id="fruit-2" type="checkbox" value="orange" name="myfruit[]">
至少如果响应是由PHP处理的,如果你选中了这两个框,你的POST数据将显示:
$myfruit[0] == 'apple' && $myfruit[1] == 'orange'
我不知道这种数组构造是否会发生在其他服务器端语言中,或者如果name属性的值只被视为字符串,并且它是PHP语法的侥幸,基于0的数组根据POST响应中的数据顺序构建,这只是:
myfruit[] apple
myfruit[] orange
对身份证可不能耍这种把戏。在HTML中的id属性的有效值是什么?似乎引用了HTML 4的规范(尽管他们没有给出引用):
ID和NAME标记必须以字母([a- za -z])开头,并且可以是 后面跟着任意数量的字母,数字([0-9]),连字符(“-”), 下划线(“_”),冒号(“:”)和时间(“。”)。
所以字符[和]在HTML4中的id或名称中都是无效的(在HTML5中是可以的)。但与html的许多东西一样,仅仅因为它是无效的并不意味着它不会工作或不是非常有用。
输入上的name属性由其父HTML <form>s用于将该元素作为POST请求中的HTTP表单成员或GET请求中的查询字符串包含在内。
id应该是唯一的,因为JavaScript应该使用它在DOM中选择元素进行操作,并在CSS选择器中使用。
name是传递值时使用的名称(在URL中或在发布的数据中)。id用于唯一标识CSS样式和JavaScript元素。
id也可以用作锚。在过去,它使用<a名称,但您也应该对锚使用id。名称仅用于发布表单数据。
name属性用于发布到例如web服务器。id主要用于CSS(和JavaScript)。假设你有这样的设置:
<input id="message_id" name="message_name" type="text" />
为了在发布表单时使用PHP获取该值,它将使用name属性,如下所示:
$_POST["message_name"];
如前所述,当您想使用特定的CSS内容时,id用于样式化。
#message_id
{
background-color: #cccccc;
}
当然,您可以对id和name属性使用相同的名称。这两者不会互相干扰。
此外,name可以用于更多的项目,比如当你使用单选按钮时。然后使用Name对单选按钮进行分组,因此只能选择其中一个选项。
<input id="button_1" type="radio" name="option" />
<input id="button_2" type="radio" name="option" />
在这个非常具体的例子中,我可以进一步说明id是如何使用的,因为你可能需要一个带有单选按钮的标签。Label有一个for属性,它使用输入的id将这个标签链接到输入(单击标签时,选中按钮)。下面是一个例子
<input id="button_1" type="radio" name="option" /><label for="button_1">Text for button 1</label>
<input id="button_2" type="radio" name="option" /><label for="button_2">Text for button 2</label>
名称标识表单字段*;因此,它们可以由表示该字段的多个可能值的控件(单选按钮、复选框)共享。它们将作为表单值的键提交。 id标识DOM元素;所以它们可以被CSS或JavaScript定位。
* name's也用于标识本地锚,但这是不赞成的,'id'是现在这样做的首选方式。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击