06_HTML_表单提交的细节(submit提交按钮的使用细节)

这篇具有很好参考价值的文章主要介绍了06_HTML_表单提交的细节(submit提交按钮的使用细节)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、submit提交按钮的细节

form标签是表单标签
    action属性设置提交的服务器地址
    method属性设置提交的方式GET(默认值)或POST

表单提交的时候,数据没有发送给服务器的三种情况:
    1、表单标签没有name属性值
    2、单选、复选(下来列表中的option标签)框 都需要添加value属性,以便发送给服务器
    3、表单项不在提交的form标签中
    
GET请求的特点是:
    1、浏览器地址栏中的地址是:action属性(+?+请求参数)
        请求参数的格式是:name=value&name=value
    2、不安全
    3、它有数据长度的限制(100个字符)

POST请求的特点是:
    1、浏览器地址栏中只有action属性值
    2、相对于GET请求要安全
    3、理论上没有数据长度的限制

示例

<!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 地址演示提高效率)

随意填写表单内的内容,然后点击"点击提交"
06_HTML_表单提交的细节(submit提交按钮的使用细节)

成功跳转,并接收数据
06_HTML_表单提交的细节(submit提交按钮的使用细节)


这里我们分析地址:
06_HTML_表单提交的细节(submit提交按钮的使用细节)

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属性
06_HTML_表单提交的细节(submit提交按钮的使用细节)
地址中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>

运行效果
06_HTML_表单提交的细节(submit提交按钮的使用细节)

06_HTML_表单提交的细节(submit提交按钮的使用细节)

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>

运行效果
06_HTML_表单提交的细节(submit提交按钮的使用细节)
结果除了提交按钮submit其他啥也没有。。。

然后点击提交,将表单内容提交至服务器地址
06_HTML_表单提交的细节(submit提交按钮的使用细节)
但服务器地址最终还是成功收到了隐藏域的内容。文章来源地址https://www.toymoban.com/news/detail-428954.html

到了这里,关于06_HTML_表单提交的细节(submit提交按钮的使用细节)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML5中form表单防止重复提交的两种方法

    form表单重复提交是在多用户Web应用中最常见、带来很多麻烦的一个问题。有很多的应用场景都会遇到重复提交问题 (1)点击提交按钮两次。 (2)点击刷新按钮。 (3)使用浏览器后退按钮重复之前的操作 导致重复提交表单。 (4)浏览器重复的HTTP请求。 (5)用户提交表单时可能因为网

    2024年01月22日
    浏览(33)
  • Spark---Master启动及Submit任务提交

    Spark集群启动之后,首先调用$SPARK_HOME/sbin/start-all.sh,start-all.sh脚本中调用了“start-master.sh”脚本和“start-slaves.sh”脚本,在start-master.sh脚本中可以看到启动Master角色的主类:“org.apache.spark.deploy.master.Master”。在对应的start-slaves.sh脚本中又调用了start-slave.sh脚本,在star-slave.

    2024年01月20日
    浏览(36)
  • 使用element的form表单,实现显示后端错误信息,并且如果有错误信息(前端通过rules检测的错误信息或者后端传过来的错误信息(如该用户已经注册或该邮箱已经存))点击提交按钮不会再次发起异步请求

    前提(触发方式可以有两种触发 trigger: \\\'blur\\\'   或 trigger: \\\'change\\\' ) 主要是三个要点: 1.给el-form-item标签设置error属性,并且绑定data里面的数据(也即:error=\\\"emailError\\\"): 2.设置rules规则为 改变trigger触发方式,设置为trigger: \\\'change\\\' (如果是trigger: \\\'blur\\\',表单项(el-form-item)的input输入

    2024年02月03日
    浏览(38)
  • 使用postman提交post方式的表单请求

    这里请求路径是测试数据库的,本地调试的话要换成自己的host和ip

    2024年02月12日
    浏览(39)
  • 使用UE4 HttpRequest提交多表单

    大部分HTTP库都是支持直接设置多表单字段的,但UE4的HttpRequest比较惨,只能用SetContent设置整个的TArrayuint8作为请求体,所以想要传多表单就要自己拼。 首先设置Header,Content-Type设置为多表单,并设置boundary: boundary想设什么都行,但要和后面用的统一。 然后拼请求体的数据字

    2024年02月07日
    浏览(27)
  • 使用Redis控制表单重复提交控制接口访问频率

    防重提交有很多方案,从前端的按钮置灰,到后端synchronize锁、Lock锁、借助Redis语法实现简单锁、Redis+Lua分布式锁、Redisson分布式锁,再到DB的悲观锁、乐观锁、借助表唯一索引等等都可以实现防重提交,以保证数据的安全性。 这篇文章我们介绍其中一种方案– 借助Redis语法实

    2024年02月09日
    浏览(30)
  • Vue表单提交正则表达式验证使用案例

    一、验证表单用法 1、表单布局及变量定义 2、定义表单中用到的实例、变量、交互dto等 3、验证规则表达式 说明: 1、sendRules 是表单使用的验证规则对象 2、属性 xxxNo 是具体校验那个属性字段 3、属性 required 非空校验 4、属性 message 提示字样 5、属性 trigger 触发事件 6、

    2024年02月16日
    浏览(31)
  • 使用postman模拟表单提交数据,对象接受值不到为NULL

    使用postman模拟表单提交数据,对象接受值不到为NULL: 问题场景如下: 用PostMan发送Post请求的时候,后端接受不到数据,如下图所示: 后端接参如下图所示: 如果你搜索了很多资料,都还没能解决,就往maven的依赖中去找问题,我这里的问题就是缺少一个很常见的依赖如下:

    2024年02月02日
    浏览(26)
  • 如何使用Flask-WTF来处理表单提交和验证?

    处理表单提交和验证是个麻烦的问题,但是我们可以使用Flask-WTF让它变得简单一些!Flask-WTF是一个Flask插件,它结合了Flask和WTForms,使得在Flask应用中处理表单变得非常简单。 首先,我们要安装Flask-WTF。你可以使用pip安装它,命令如下: 接下来,让我们创建一个简单的Flask应

    2024年02月15日
    浏览(27)
  • HTML常用表单元素使用?

    ## 表单的基本语法 ``` form action=\\\"表单提交地址\\\" method=\\\"提交方法\\\" … 文本框、按钮等表单元素… /form ``` ### 表单属性: - action 将表单数据提交到指定地址 - method 表单数据发送至服务器的方法,常用的有两种 get(默认)/post。 ### get和post的区别 - get:从指定的资源请求数据。 - pos

    2024年02月05日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包