觀察 HTML中id和name 的差異，被微軟忽悠過的同學自動舉手

     很早以前，記得在ASP.NET中，只要是在服務器控件里面添加了name屬性，就會有一條警告，如下圖所示，久而久之，以為對與html而言，name屬性是多余的，可以去掉的，直到ASP.NET mvc的出現，鼓勵細粒度的控制HTML的展示，才發現被微軟欺騙了好幾年！

 

   下面是一個簡單的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屬性神馬也不是啊

    提交表單

 

      get

 

     為標簽添加了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”

      服務器端接受到的數據，選擇的默認值都是“on”

 

對與多選和單選，我將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" />
   <%} %>

 

提交表單，客戶端的變化在意料之中

 

服務器端，接受到的數據已經有了變化，多選的值用，分割了，但選擇的默認值都是“on”

 

 

給單選和多選分別給定值后，

客戶端的變化

 

 

服務器端的變化，這樣已經可以判斷用戶的操作了

 

如果將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" />
   <%} %>

客戶端的變化是沒有變化

 

小結：對與html提交表單而言，name屬性是必須的，而id屬性是可選的