form表单中的id 与name的区别

　　以前经常写form表单时，不写id和name，总觉得没有什么用。后来一看后台套完的页面发现，他们都补上name，不知道所以然，就查了一下资料，吓我一跳，要是照我那样写根本不会有数据传到服务器。原来表单提交用户输入的数据，是根据表单元素的name值来控制表单控件的。那么表单控件里面的id是干嘛的？就是为了区别不同的表单控件，还有一个作用，就是点击表单控件提示信息时也能让表单控件获得焦点的效果，用label提高用户体验，这时的label属性中的for是跟表单控件的id一致的，我以前老是搞混，以为是跟控件的name值一样，因为看例子中总是name值跟id值一样。

　　这也引出另一个问题就是label的用法：就是用for表示跟哪个表单元素绑定。所以它有两种关联方式，一个显示关联用for，一种是不用for的隐示关联。

     所谓的显示关联就是label跟表单元素是并列关系

<label for='sex'>性别：</label>
<input type='text' id='sex' name='gender'>

这里看到id和name值不是必须一样

隐示关联就是label跟表单元素是包含关系，这时候label里面不需要for，表单元素也不需要id

<label>性别：<input type='text' name='gender'></label>

这里看到没有id可以，但是name是必须要的，以后一定要记住啊！

那我们再回到主题form表单中的id 与name的区别，前面说到的是一些html结构方面的区别，下面说一下他们的其他区别。

如果写样式，只能用id获取他标示的表单元素

如果用js给表单元素添加交互效果，name和id都可以选中标示表单元素，只是形式有不同，document.getElementById("sex").value，要是用name获取document.forms[0].gender.value

参看资料：

http://blog.csdn.net/chang_xing/article/details/7605993

 

 

 

 

转载于:https://www.cnblogs.com/different/p/3158425.html