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

最新推荐文章于 2020-11-23 14:08:32 发布

weixin_34301132

最新推荐文章于 2020-11-23 14:08:32 发布

阅读量342

点赞数

文章标签： python javascript 后端 ViewUI

原文链接：https://my.oschina.net/bosscheng/blog/352128

版权

2019独角兽企业重金招聘Python工程师标准>>>

对于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

我们把那么属性命名成不同的时候

<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

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

对于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

我们把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

对于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>

表单提交的时候