<转载>form标签中id和name属性的区别

本文详细解析了HTML元素中的ID与Name属性的不同之处,包括各自的用途、应用场景及如何在客户端和服务器端进行交互。

HTML元素的ID和Name属性的区别

一直认为ID和NAME是一样的,两个又可以一起出现,甚是疑惑。

今天BAIDU了一下,才发现里面大有文章。发出来研究研究:

最classical的答案:ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的。
     显然这个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的却别并不是身份证号码和姓名这样的区别,它们更本就是不同作用的东西。

<input   name= "xx ">     会提交数据
<input   id= "xx ">     不会提交数据


<input   id= "xx "   name= "yy ">
<label   for= "xx "> Label </label>     这里的for属性必须是指向一个id,否则没效果


<input   name= "xx "   type= "radio "   value= "1 ">
<input   name= "xx "   type= "radio "   value= "2 ">
<input   name= "xx "   type= "radio "   value= "3 ">
这里必须name相同才能成为一组单选按钮,而id则没有这个功能。


<input   name= "xx ">     对应脚本document.getElementsByName( "xx ")[0]
<input   id= "xx ">         对应脚本document.getElementByIdx_x( "xx ")

区别还很多,不一一说了。反正这是两个完全不同的属性。不要混为一谈。
`<input>`标签并不一定需要被包裹在`<form>`标签内,这取决于具体的使用场景需求。 ### 解释: 1. **如果不需要表单提交**:例如,当`<input>`用于简单的数据输入,并且通过JavaScript直接处理用户输入时(如搜索框、文件选择器等),`<input>`可以独立存在,无需放在`<form>`中。 2. **如果需要表单提交**:当需要将用户输入的数据发送到服务器时,通常会将`<input>`元素放在`<form>`标签内。这样可以通过HTML的默认行为(如点击提交按钮)将数据发送到指定的URL。 #### 示例 1: 不带 `<form>` 的 `<input>` (通过 JavaScript 处理) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Input Without Form</title> </head> <body> <h2>Enter your name:</h2> <input type="text" id="nameInput" placeholder="Your Name" /> <button onclick="greet()">Submit</button> <p id="greeting"></p> <script> function greet() { const name = document.getElementById('nameInput').value; if (name) { document.getElementById('greeting').textContent = `Hello, ${name}!`; } else { document.getElementById('greeting').textContent = 'Please enter your name.'; } } </script> </body> </html> ``` **解释**: - 在这个例子中,`<input>`没有被包裹在`<form>`标签内。 - 用户输入的名字通过JavaScript获取并显示在页面上。 #### 示例 2: 带 `<form>` 的 `<input>` (通过 HTML 表单提交) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Input With Form</title> </head> <body> <h2>Enter your email:</h2> <form action="/submit" method="POST"> <input type="email" name="user_email" placeholder="Your Email" required /> <button type="submit">Submit</button> </form> </body> </html> ``` **解释**: - 在这个例子中,`<input>`被包裹在`<form>`标签内。 - 当用户点击“Submit”按钮时,表单数据会被发送到`/submit` URL。 ### 总结: - 如果只是通过JavaScript处理用户输入,`<input>`不需要被包裹在`<form>`标签内。 - 如果需要利用HTML表单的默认提交行为,那么应该将`<input>`放在`<form>`标签内。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值