浅析html中的表单属性name和id对于表单提交时候的影响

对于text输入框（文本框）

<form action=" method="get">
<input type="text" name="xx" value="">
<input type="text" name="yy" value="">
<input type="submit" value="submit">
</form>

或者（input在不加type属性的时候，会默认成text）
<form action="http://test.com" method="get">
<input name="xx" value="">
<input name="yy" value="">
<input type="submit" value="submit">
</form>

在提交表单的时候，可以看到浏览器上的url是：

http://test.com/?xx=333&yy=99

看看添加了id属性的时候

<form action="http://test.com" method="get">
<input type="text" name="xx" id="cc" value="">
<input type="text" name="yy" id="dd" value="">
<input type="submit" value="submit">
</form>

在提交表单的时候，可以看到URL是：

http://test.com/?xx=333&yy=99

小结：表单提交数据的时候，完全是和name属性相关的，和id属性是没有关系的。

我们把text的name属性命名成一样的时候

<form action="http://test.com" method="get">
<input type="text" name="xx" value="">
<input type="text" name="xx" value="">
<input type="submit" value="submit">
</form>

表单提交的时候，提交的url是：

http://test.com/?xx=333&xx=99

小结：不管text输入框的name属性是否一样，表单都会提交上去的，完全提交给后端处理这些数据。

-------------------------------------------------------邪恶的分割线----------------------------------------

对于password输入框（密码框）

<form action="http://test.com" method="get">
<input type="password" name="xx" id="cc" value="">
<input type="password" name="yy" id="dd" value="">
<input type="submit" value="submit">
</form>

同样表单提交的时候，提交的URL是：

http://test.com/?xx=333&yy=99

小结：同样是和name属性相关性，和id属性是没有任何关系的

-------------------------------------------------------邪恶的分割线----------------------------------------

对于radio（单选按钮）

<form action="http://test.com" method="get">
<input type="radio" name="xx" id="cc" value="boy">
<input type="radio" name="xx" id="dd" value="girl">
<input type="submit" value="submit">
</form>

看看表单提交的时候，提交的URL是：

http://test.com/?xx=boy
或者 http://test.com/?xx=girl[/code] 
我们把那么属性命名成不同的时候

<form action="http://test.com" method="get">
<input type="radio" name="xx" id="cc" value="boy">
<input type="radio" name="yy" id="dd" value="girl">
<input type="submit" value="submit">
</form>


提交url的时候，提交的url是：

http://test.com/?xx=boy
或者 http://test.com/?yy=girl 或者 http://test.com/?xx=boy&&yy=girl[/code] 
-------------------------------------------------------邪恶的分割线----------------------------------------

对于checkbox（复选框）
<form action="http://test.com" method="get">
<input type="checkbox" name="xx" id="cc" value="boy">
<input type="checkbox" name="yy" id="dd" value="girl">
<input type="submit" value="submit">
</form>


表单提交的时候，提交的URL是：

http://test.com/?xx=boy
或者 http://test.com/?yy=girl 或者 http://test.com/?xx=boy&&yy=girl[/code] 
我们把name属性设置成一样的时候

<form action="http://test.com" method="get">
<input type="checkbox" name="xx" id="cc" value="boy">
<input type="checkbox" name="xx" id="dd" value="girl">
<input type="submit" value="submit">
</form>


提交的时候

http://test.com/?xx=boy
或者 http://test.com/?xx=girl 或者 http://test.com/?xx=boy&&xx=girl[/code] 
对于submit按钮

<form action="http://test.com" method="get">
<input type="text" name="xx" id="cc" value="boy">
<input type="text" name="yy" id="dd" value="girl">
<input type="submit" value="submit" name="jj">
</form>


表单提交的时候

http://test.com/?xx=boy&&xx=girl&&jj=submit


小结：我们发现在给submit添加了那么属性的时候，当表单提交的时候，同样会把submit的name也提交上去的，这个是我们必须要注意的、

-------------------------------------------------------邪恶的分割线----------------------------------------

对于reset（重置按钮）
<form action="http://test.com" method="get">
<input type="text" name="xx" id="cc" value="boy">
<input type="text" name="yy" id="dd" value="girl">
<input type="submit" value="submit">
<input type="reset" value="reset" name="ll">
</form>


表单提交的时候

http://test.com/?xx=boy&&xx=girl


小结：可以发现reset按钮的name是不会被提交上去的

-------------------------------------------------------邪恶的分割线----------------------------------------

对于file（文件）
<input type="file" name="xx" id="cc">


表单提交的时候

http://test.com/?xx=list.txt


-------------------------------------------------------邪恶的分割线----------------------------------------

对于hidden（隐藏）
<input type="hidden" name="xx" id="cc" value="test">


表单提交的时候

http://test.com/?xx=test


-------------------------------------------------------邪恶的分割线----------------------------------------

对于select下拉框
<form action="http://test.com" method="get">
<select name="select">
<option value="x">x</option>
<option value="y">y</option>
<option value="p">p</option>
</select>
<input type="submit" value="submit">
</form>


注意：对于select会默认让第一个option显示出来的，可以通过selected属性来控制默认值

<form action="http://test.com" method="get">
<select name="select">
<option value="x">x</option>
<option value="y" selected>y</option>
<option value="p">p</option>
</select>
<input type="submit" value="submit">
</form>


表单提交的时候

http://test.com/?select=y


-------------------------------------------------------邪恶的分割线----------------------------------------

对于textarea（多行文本框）
<textarea name="xx">xxxxx</textarea>


表单提交的时候

http://test.com/?xx=xxxxx


-------------------------------------------------------邪恶的分割线----------------------------------------

对于id属性
作用：

主要用于修改css样式的

提供给javascript调用的

-------------------------------------------------------邪恶的分割线----------------------------------------

对于disabled属性
<form action="http://test.com" method="get">
<input type="text" name="xx" id="cc" value="boy">
<input type="text" name="yy" id="dd" value="girl" disabled>
<input type="submit" value="submit">
</form>


表单提交的时候

http://test.com/?xx=boy


小结：对于设置成disabled的是提交不了的。

-------------------------------------------------------邪恶的分割线----------------------------------------

对于属性readonly
<form action="http://test.com" method="get">
<input type="text" name="xx" id="cc" value="boy">
<input type="text" name="yy" id="dd" value="girl" readonly>
<input type="submit" value="submit">
</form>


表单提交的时候

http://test.com/?xx=boy&&yy=girl


小结：对于设置成readonly的是可以提交的。