在表单(input)中id和name的区别

在表单(input)中id和name的区别 

但是name在以下用途是不能替代的:
1. 表单(form)的控件名,提交的数据都用控件的name而不是id来控制。因为有许多name会同时对应多个控件,比如checkbox和radio,而id必须是全文档中唯一的。此外浏览器会根据name来设定发送到服务器的request。因此如果用id,服务器是无法得到数据的。
2. frame和window的名字,用于在其他frame或window指定target。

例如:<frameset
cols="200,*">

<frame
src="/example/html/toc.html">

<frame
src="/example/html/pref.html" name="view_frame">

    </frameset>

等同于其他标签中target="view_window"

<ul>

<li><a href="/example/html/pref.html" target="view_window">Preface</a></li>

<li><a href="/example/html/chap1.html" target="view_window">Chapter
1</a></li>

</ul>

以下两者可以通用,但是强烈建议用id不要用name:
1. 锚点,通常以前写作<a name="myname">但name属性只能针对a标签定位,现在可以用任何的元素id来指定:<div id="myid">。

例1:<a href="001">跳到001</a>

    ……

   <a
id="001">&nbsp;(为了兼容,a标签不能空)</a>

Href的值要跟id一致,前面必须加#

例2:想显示某页面的某锚点内容

    <a
href="123.html#001">跳到001</a>

      ……

    <a
id="001">&nbsp;</a>

以下只能用id:
1. label与form控件的关联,
    <label for="MyInput">My
Input</label>
    <input id="MyInput"
type="text">
    for属性指定与label关联的元素的id,不可用name替代。
2. CSS的元素选择机制,以#MyId的方式指定应用样式的元素,不能用name替代。

3. 脚本中获得对象:

3.1
 如果用DOM的话,则用document.getElementById("MyInput").value,

document.getElementByTagName("MyInput").value

JQ中——$(".firstname").value

3.2
提交表单——如果要用name的话,通常先得到包含控件的form,例如document.forms["MyForm"],然后从form再引用name,注意这样得到的是经过计算后将发送给服务器的值。

例子:<head>

    <script
type="text/javascript">

      function
formSubmit()  {

      document.forms["myForm"].submit();

      }

    </script>

  </head>

  <body>

    <form name="myForm"
action="http://www.jb51.net/example/html/form_action.asp"
method="get">

      First
name: <input type="text" name="fname" /><br />

      Last name: <input type="text"
name="lname" /><br />

      <input
type="button" onclick="formSubmit()" value="Send form
data!" />

    </form>

  </body>

name与id的还有区别是:
id要符合标识的要求,比如大小写敏感,最好不要包含下划线(因为不兼容CSS)。而name基本上没有什么要求,甚至可以用数字。
补充:name主要是表单元素里才有的属性。通过js的document.表单名称.文本框.value来获取文本框的值,其中的表单名称和文本框名称指的是name,而非表单元素例如div,span等是没有name属性的,而id属性是任何一个HTML元素都会有的。当你需要用js获取非表单元素对象是就得用document.getElementById("id")

时间: 2024-10-01 07:37:25

在表单(input)中id和name的区别的相关文章

关于jQuery表单选择中prop和attr的区别。

今天用jQuery学习表单这一章节的内容,再次遇到表单全选时,不能进行第二次全选的情况.反复查看测试仍然找不到是什么原因.后来在网上查到原来是jQuery1.6以后的版本用到的是prop.用attr的话不会多次实现,因为attr不会记录当前checkbox的选中状态. 表单这一章节内容让我感觉到有点吃力,总之好好努力吧! 以下是代码说明: <!DOCTYPE html> <html lang="en"> <head> <meta charset

HTML中让表单input等文本框为只读不可编辑的方法

<转> 方法1: onfocus=this.blur() <input type="text" name="input1" value="中国" onfocus=this.blur()> 方法2:readonly <input type="text" name="input1" value="中国" readonly> <input type=&

input中id和name属性的区别

input中id和name属性的区别 做网站很久了,但到现在还没有搞明白input中name和id的区别,最近学习jquery,又遇到这个问题,就在网上搜集资料.看到这篇,就整理出来,以备后用. 可 以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案:ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复 的. 上周我也遇到了ID和Name的问题,在

form表单元素中disabled的元素的值不会提交到服务器

1.表单元素中disabled的元素的值不会提交到服务器,后台获取的值为null <form id="myForm" action="#" method="post"> <input name="username" disabled="disabled" /> <input type="submit" value="提交"/> &l

前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型)

前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型) 一丶HTML块级标签 排版标签 p 标签: 段落标签,会自动在段落上下加上空白来分开 p标签是一个文本标签,本身是一个块级标签不能再嵌套块标签 div 标签: 没有样式的标签 ,最常用 列表 ???????1.无序列表 常用 ??????2.有序列表 ??????3.标题列表 # 无序列表 circle:空心圆, disc:默认实心圆,square:实心方片 <ul type='circl

表单提交中get和post方式的区别

表单提交中get和post方式的区别有5点 1.get是从服务器上获取数据,post是向服务器传送数据. 2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过HTTPpost机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址.用户看不到这个过程. 3.对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Requ

Yii表单验证中,提交前验证,不通过不提交

$form = $this->beginWidget('CActiveForm',array(         'id' => 'add_host',         'enableAjaxValidation' => false,         'enableClientValidation' => true,         'clientOptions' => array(                 'validateOnSubmit' => true  

表单input按钮在各浏览器之间的兼容性

从网上看了这篇关于表单input按钮的浏览器兼容性问题,总结的还不错,所以copy下来学习下. input按钮在各个浏览器之间的兼容性问题,看下边这段代码: input.item { background: #4D90FE; border: 1px solid #4D90BB; color: white; } <input type="submit" value="提交" /> 这是很简单的一个input提交按钮,它在各大浏览器中的情况如下: 很明显,我

表单提交中的重复问题(表单令牌验证)

在日常的表单提交中,如果由于网络或其他原因,很容易出现同一个表单提交多次,此时可以使用表单令牌验证 在提交的表单里,增加多一个隐藏数据,token,该token由后台脚本生成(如:php使用md5(rand(1,99999999))) 然后将生成的值保持至session或文本中,在表单提交中,对该token进行准确性认证,以确定表单提交的唯一性