以前经常写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

form表单中的id 与name的区别的更多相关文章

  1. jsp中的form表单中的 id和name有什么区别了

    <form action="./system/WebServer_webServerLogin" method="post" id="login ...

  2. Form表单中的get和post的区别

    method="get/post",两种方式的区别 Form中的get和post方法,在数据传输过程中分别对应了GET和POST方法.二者主要区别如下: 1.Get将表单中数据的按 ...

  3. form表单中method的get和post区别

    一.问题的提出   <form action="getPostServlet/getPost.do?param4=param4" method="get" ...

  4. Form表单中Post与Get方法的区别

    Form提供了两种数据传输的方式:get和post.虽然它们都是数据的提交方式,但是在实际传输时确有很大的不同,并且可能会对数据产生严重的影响. Form中的get和post方法,在数据传输过程中分别 ...

  5. form表单中id与name的区别

    以前经常写form表单时,不写id和name,总觉得没有什么用.后来一看后台套完的页面发现,他们都补上name,不知道所以然,就查了一下资料,吓我一跳,要是照我那样写根本不会有数据传到服务器.原来表单 ...

  6. jQuery中设置form表单中action值与js有什么不同。。。。

    jQuery中设置form表单中action值与js有什么不同.... HTML代码如下: <form action="" method="post" i ...

  7. dwz的form表单中url的变量替换

    form表单中action的地址格式 “__URL__/edit/{xxx}”,大括号内的 “xxx” 就是变量名,主要功能是结合table组件一起使用. 下图中的删除.编辑.修改密码都是用了url变 ...

  8. javascript将form表单中的元素值封装成json格式

    把form表单中的元素值封装成json function toJSON(form)//form是要进行封装的form表单对象,dom对象,可以通过document.mainForm获得,mainFor ...

  9. jQuery中设置form表单中action值的方法

    jQuery中设置form表单中action值的方法 (2011-03-17 10:18:19) 转载▼ 标签: 杂谈   html代码: <form id="myFormId&quo ...

随机推荐

  1. 【高精度】POJ1001-Exponentiation

    整个题库的第二题,原本都没有屑于去做,突发奇想抱着秒杀的心态去写了代码,却硬生生地吃了4个WA.. [思路]先去除掉小数点,进行最基本的高精度乘法运算,再在运算得到的结果中添加小数点输出. [前铺]让 ...

  2. python基础之模块,面向对象

    hash 什么是hash? hash是一种算法,该算法接受传入的内容,经过运算得到一串hash值 为何用hash? hash值有三大特性: 1.只要传入的内容一样,得到的hash值必然一样 2.只要使 ...

  3. RMI(Remote Method Invocation ) 概念恢复

    1.RMI是远程方法调用的简称,像其名称暗示的那样,它能够帮助我们查找并执行远程对象,通俗的说,远程调用就像一个class放在A机器上,然后在B机器中调用这个class的方法. 2.EMI术语 在研究 ...

  4. Linux PHP 编译参数详解(一)

    Fast-CGI: ./configure --prefix=/usr/local/php --enable-fastcgi --enable-force-cgi-redirect --with-co ...

  5. Apache 优化配置10条建议

    之前VPS使用的是默认的Apache配置,感觉还行,不过随着博客的人流量上升,显然这种配置无法满足需求了:下面是Apache官方手册中给出的几条优化配置建议,笔者将其整理出来,对Apache服务器的运 ...

  6. 分公司下拉框赋值-从后台传到前端jsp

    我的旧代码  List<MetaBranchCfg> list = metaBranchCfgBO.queryAllBranchList();  request.setAttribute( ...

  7. Windows7下安装与破解IntelliJ IDEA2017(转载)

    IDEA 全称 IntelliJ IDEA,是Java语言开发的集成环境,IntelliJ在业界被公认为最好的java开发工具之一,尤其在智能代码助手.代码自动提示.重构.J2EE支持.各类版本工具( ...

  8. CFR Java Decompiler 反编译

    java反编译,JAD & CFR 目前我们开发中大都使用JAD进行java反编译.这个工具已经过于陈旧,最突出的问题就是经常反编译出错. 使用CFR反编译工具能够很好的解决这个问题,并且支持 ...

  9. linux缓存nscd

    1.安装  yum -y install nscd 2.配置文件: /etc/nscd.conf 3.缓存文件:缓存DB文件在/var/db/nscd下.可以通过nscd -g查看统计的信息 4.清除 ...

  10. android简单的答题游戏

    笔者最近开始沦陷于android,从开始入门到现在已经快半个月的时间,于是便写一个较综合,用到了数据库,多线程操作,以及时钟的添加和停止消除,activity之间的动画转换等,适用于初学者学以致用的小 ...