观察 HTML中id和name 的差异,被微软忽悠过的同学自动举手

简介: 很早以前,记得在ASP.NET中,只要是在服务器控件里面添加了name属性,就会有一条警告,如下图所示,久而久之,以为对与html而言,name属性是多余的,可以去掉的,直到ASP.NET mvc的出现,鼓励细粒度的控制HTML的展示,才发现被微软欺骗了好几年!      下面是...

     很早以前,记得在ASP.NET中,只要是在服务器控件里面添加了name属性,就会有一条警告,如下图所示,久而久之,以为对与html而言,name属性是多余的,可以去掉的,直到ASP.NET mvc的出现,鼓励细粒度的控制HTML的展示,才发现被微软欺骗了好几年!

微博桌面截图_20120205182401error

 

   下面是一个简单的html表单,几个单选和多选框还有一个文本框,这些html标签只有id属性,没有name属性

 

 <% using (Html.BeginForm())
    { %>
    <input id="Checkbox1" type="checkbox" />
    <input id="Checkbox2" type="checkbox" />
    <input id="Checkbox3" type="checkbox" />
    <input id="Checkbox4" type="checkbox" />
    <input id="Checkbox5" type="checkbox" />
    <input id="Radio1" type="radio" />
    <input id="Radio2" type="radio" />
    <input id="Radio3"  type="radio" />
    <input id="Text1" type="text" />
    <input id="Submit1" type="submit" value="submit" />
    <%} %>

    观察了进行选择后提交表单,我开始震惊了!id属性神马也不是啊

    提交表单

微博桌面截图_20120205174835 

      get

微博桌面截图_20120205174810

 

     为标签添加了name属性,进一步观察

 

 <% using (Html.BeginForm())
    { %>
    <input id="Checkbox1" name="Checkbox1"  type="checkbox" />
    <input id="Checkbox2" name="Checkbox2" type="checkbox" />
    <input id="Checkbox3" name="Checkbox3"  type="checkbox" />
    <input id="Checkbox4" name="Checkbox4" type="checkbox" />
    <input id="Checkbox5" name="Checkbox5"  type="checkbox" />
    <input id="Radio1" name="Radio1"  type="radio" />
    <input id="Radio2" name="Radio2" type="radio" />
    <input id="Radio3" name="Radio3"  type="radio" />
    <input id="Text1" name="Text1" type="text" />
    <input id="Submit1" type="submit" value="submit" />
    <%} %>

 

     提交表单,发现有数据了,原来name属性很有用;

     对与多选和单选,选择默认的值是“on”

微博桌面截图_20120205175301

      服务器端接受到的数据,选择的默认值都是“on”

微博桌面截图_20120205175740

 

对与多选和单选,我将name属性改为一致,分组,观察一下

 

 <% using (Html.BeginForm())
    { %>
    <input id="Checkbox1" name="Checkbox"  type="checkbox"  />
    <input id="Checkbox2" name="Checkbox" type="checkbox"  />
    <input id="Checkbox3" name="Checkbox"  type="checkbox"   />
    <input id="Checkbox4" name="Checkbox" type="checkbox"   />
    <input id="Checkbox5" name="Checkbox"  type="checkbox"   />
    <input id="Radio1" name="Radio"  type="radio"   />
    <input id="Radio2" name="Radio" type="radio"   />
    <input id="Radio3" name="Radio"  type="radio"/>
    <input id="Text1" name="Text1" type="text" />
    <input id="Submit1" type="submit" value="submit" />
    <%} %>

 

提交表单,客户端的变化在意料之中

微博桌面截图_20120205180831oo

 

服务器端,接受到的数据已经有了变化,多选的值用,分割了,但选择的默认值都是“on”

微博桌面截图_20120205180702111

 

 

给单选和多选分别给定值后,

客户端的变化

 

 微博桌面截图_20120205181051kk

服务器端的变化,这样已经可以判断用户的操作了

微博桌面截图_20120205181146f

 

如果将id属性去掉呢?

 <% using (Html.BeginForm())
    { %>
    <input  name="Checkbox"  type="checkbox" value="1"  />
    <input  name="Checkbox" type="checkbox"  value="2"  />
    <input  name="Checkbox"  type="checkbox" value="3"   />
    <input  name="Checkbox" type="checkbox"  value="4"   />
    <input  name="Checkbox"  type="checkbox"  value="5"   />
    <input name="Radio"  type="radio" value="6"   />
    <input  name="Radio" type="radio"  value="7"   />
    <input  name="Radio"  type="radio" value="8" />
    <input  name="Text1" type="text" />
    <input  type="submit" value="submit" />
    <%} %>

客户端的变化是没有变化

微博桌面截图_20120205181443no

 

小结:对与html提交表单而言,name属性是必须的,而id属性是可选的

test
相关文章
|
缓存 Java 应用服务中间件
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
这篇文章详细介绍了在SpringMVC中创建JSP页面的全过程,包括项目的创建、配置、Tomcat的设置,以及如何实现页面跳转和配置模板解析器,最后还对比了JSP和HTML模板解析的差异。
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
|
前端开发 JavaScript
html中id和class的相同和不同之处及用法的规范与区别
在HTML中,`id`和`class`都用于标识和选择元素,但存在一些关键差异。
HTML 链接- id 属性
【7月更文挑战第1天】HTML 链接- id 属性。
119 1
|
移动开发 前端开发 JavaScript
HTML5 中 `id` 属性和 `class` 属性的区别
【8月更文挑战第24天】
575 0
|
前端开发
HTML—id和clss的区别
HTML—id和clss的区别
199 0
|
前端开发 程序员 开发工具
基于.Net开发的对比Html效果差异的开源项目
基于.Net 4.5开发的对比Html文件、片段效果差异的项目。两份Html效果不一样的地方会通过颜色、删除线、背景色分别标记出来。
352 0
基于.Net开发的对比Html效果差异的开源项目
|
前端开发 JavaScript
一篇”水文“带你解剖HTML中的ID属性以及和Class属性的区别。
一篇”水文“带你解剖HTML中的ID属性以及和Class属性的区别。
257 0
|
前端开发 JavaScript 开发者
前端祖传三件套HTML的常用属性之id
作为前端开发的入门技术,HTML是我们必须掌握的基础知识。在HTML中,id属性是一个非常重要的属性,它可以让我们轻松找到页面上的元素,为元素设置样式和添加事件等操作提供了便利。本文将介绍id属性的定义、用法以及注意事项,帮助广大前端开发者更好地掌握id属性。
510 0
html+css实战49-id选择器
html+css实战49-id选择器
182 0
html+css实战49-id选择器
|
Web App开发 JavaScript 前端开发
HTML中id和name的区别(摘自网络)
HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。
1481 0