位置: IT常识 - 正文
06_HTML_表单提交的细节（submit提交按钮的使用细节）(html 提交表单)
编辑：rootadmin推荐整理分享06_HTML_表单提交的细节（submit提交按钮的使用细节）(html 提交表单)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:htmlform表单提交,html表单数据如何提交到本页,html表单数据如何提交到本页,html怎么处理表单提交的内容,html表单提交按钮无法提交,htmlform表单提交,html怎么处理表单提交的内容,html5表单提交,内容如对您有帮助，希望把文章链接给更多的朋友！
示例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单提交的细节</title></head><body><form action="http://localhost:8080" method="get"> <input type="hidden" name="action" value="login"/> <h1 align="center">用户注册</h1> <table align="center"> <tr> <td>用户名称：</td> <td><input type="text" name="username" value="默认值"/></td> </tr> <tr> <td>用户密码：</td> <td><input type="password" name="password" value="“abc"/></td> </tr> <tr> <td>性别：</td> <td> <input type="radio" name="sex" checked="checked" value="boy">男 <input type="radio" name="sex" value="girl">女 </td> </tr> <tr> <td>兴趣爱好：</td> <td> <input type="checkbox" name="hobby" checked="checked" value="java"/>Java <input type="checkbox" name="hobby" checked="checked" value="javascript"/>JavaScript <input type="checkbox" name="hobby" value="python"/>Python <input type="checkbox" name="hobby" value="c++"/>C++ </td> </tr> <tr> <td>国籍：</td> <td> <select name="country"> <option value="none">--请选择国籍--</option> <option selected="selected" value="CN">中国</option> <option value="USA">美国</option> <option VALUE="JP">日本</option> </select> </td> </tr> <tr> <td>自我评价：</td> <td><textarea name="desc" rows="10" cols="20">我才是默认值</textarea><br/></td> </tr> <tr> <td> <input type="reset" value="点击重置"> </td> <td> <input type="submit" value="点击提交"> </td> </tr> </table></form></body></html>运行效果点击提交后，会跳转至form标签中action属性所对应的链接，并将表单中的内容发给服务器。（这里使用http://localhost:8080 地址演示提高效率）
随意填写表单内的内容，然后点击"点击提交"
成功跳转，并接收数据
这里我们分析地址：
http://localhost:8080/?action=login&username=root&password=root&sex=boy&hobby=java&country=CN&describe=%E6%88%91%E5%B0%B1%E6%98%AF%E6%88%91拆解分析：http://localhost:8080/服务器地址?分隔符action=login隐藏域&username=root用户名&password=root密码&sex=boy&hobby=java爱好&country=CN国家&describe=%E6%88%91%E5%B0%B1%E6%98%AF%E6%88%91自我描述这里会发现：?后面都是元素标签内的name属性=value属性地址中username=root而不是username=“默认值”原因是：一切的value值都以提交时的表单数据为主，在提交之前已经修改了username中value的值。
二、关于输入类型(input标签)type属性中file类型(文件上传)和submit类型(提交按钮)的关系<input type=“file” name=“file” value=“选择文件”>
<form action="http://localhost:8080" method="get"> <input type="hidden" name="action" value="login"/> </table> <tr> <td> <input type="submit" value="点击提交"> </td> <td> <input type="file" name="file" value="选择文件"> </td> </tr> </table> </form>运行效果
file= 后面的值取决于表单中选择文件的文件名file=dava.csv拆解：file取自<input type="file" name="file" value="选择文件">中的name="file"dava.csv取自所选文件的文件名再次强调：file类型name属性对应的是选择的文件名称，而不是value属性值
三、关于输入类型(input标签)type属性中hidden类型(隐藏域)和submit类型(提交按钮)的关系<input type=“hidden” name=“action” value=“login”/>
隐藏域的原理很简单，隐藏域就是表单中看不到的那部分，在submit提交时，会随着表单中的内容一起提交。
示例
<form action="http://localhost:8080" method="get"> <input type="hidden" name="action" value="login"/> <input type="submit" value="点击提交"></form>运行效果结果除了提交按钮submit其他啥也没有。。。
然后点击提交，将表单内容提交至服务器地址但服务器地址最终还是成功收到了隐藏域的内容。
上一篇：Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑
下一篇：DINO 论文精度，并解析其模型结构 & DETR 的变体(精读论文分析)
