前端 — 基础 表单标签 – input type属性(按钮篇- submit,reset,button,file)

作者 : admin 本文共1481个字,预计阅读时间需要4分钟 发布时间: 2024-04-3 共1人阅读

目录

Submit   

Reset 

Button   

File  


Submit   

           定义提交按钮,提交按钮会把表单数据发送到服务器     

                前面讲过说把数据送到后台,那怎么送呢 ?? 

                ===>>>

                就是通过 提交按钮 – submit  来进行送数据的~!!! 

                即 点击  提交按钮,就会把表单域里所有数据送至后台

        

          示例  : 

          前端 — 基础 表单标签 – input type属性(按钮篇- submit,reset,button,file)插图

          这就是 提交按钮 的语法表示

          ===>>>

          前端 — 基础 表单标签 – input type属性(按钮篇- submit,reset,button,file)插图(1)

         会默认显示的是   “ 提交 ” 两个汉字 

         当然了,你也可以将   “提交”  换成其它文字,通过前面学习的  Value 属性 

         ===>>>

        前端 — 基础 表单标签 – input type属性(按钮篇- submit,reset,button,file)插图(2)

         ===>>>

        前端 — 基础 表单标签 – input type属性(按钮篇- submit,reset,button,file)插图(3)

         诺,这就把 提交 改为了 “免费注册 ”  但,作用是一样的,即点击  “ 免费注册 ” 就会将表单域

         里所有数据 提交给后台~!!! 

       

         我们可以小小的体验一下流程,是如何通过  提交按钮–submit 来将数据传给后台的 ~!! 

         ===>>> 

         前端 — 基础 表单标签 – input type属性(按钮篇- submit,reset,button,file)插图(4)

         我们在 加点儿内容 , action=”xxx.php”  就是将表单域提交到 xxx.php 这个页面

         method  就是使用 get 方法~!! 

         具体怎么使用在后面 服务器编程里学习 ~!! 

         

        接下来,在页面输入数据,并提交 

        ===>>>

      前端 — 基础 表单标签 – input type属性(按钮篇- submit,reset,button,file)插图(5)

       我们在页面里 输入完内容后,点击提交,也就是   “ 免费注册 ”  

       ===>>>

      前端 — 基础 表单标签 – input type属性(按钮篇- submit,reset,button,file)插图(6)

     可以看到 未找到文件

   ( 这是要去往 xxx.php 的页面,因为 xxx.php 就不存在呀,是我们捏造的) 

     再注意 地址栏那里, 是不是就是我们 在页面上输入的内容,这就是把 表单域里的东西送给

     xxx.php  网页的体现~!!  

     提交按钮作用就是  : 点击了 提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给

     后台服务器。 

Reset 

     #  即重置按钮,就是说 我们网页里输入的东西,想全部更改下,想作废,就需要 重置按钮 

         ===>>>

      前端 — 基础 表单标签 – input type属性(按钮篇- submit,reset,button,file)插图(7)

        ===>>>

        前端 — 基础 表单标签 – input type属性(按钮篇- submit,reset,button,file)插图(8)

        这就是重置按钮,也可以使用 Value 属性将名字进行修改 ~!! 

        ===>>>

        前端 — 基础 表单标签 – input type属性(按钮篇- submit,reset,button,file)插图(9)

        ===>>>

       前端 — 基础 表单标签 – input type属性(按钮篇- submit,reset,button,file)插图(10)

      ===>>>

      就是当你 在网页里面输入信息想重新输入了,那你就可以使用 重置按钮~!!! 

      点击后,就会恢复到最开始网页默认的样子~!! 

       

   Button   

         #   就是一个普通按钮,可以点击的按钮,不会提交数据,只是做某件事情,一般和JS搭配

              ===>>>

            前端 — 基础 表单标签 – input type属性(按钮篇- submit,reset,button,file)插图(11)

     上示 免费获取验证码 就是 Button 普通按钮的作用,不会提交数据,就是做验证码这个事儿的

     ===>>>

    前端 — 基础 表单标签 – input type属性(按钮篇- submit,reset,button,file)插图(12)

    ===>>>

    前端 — 基础 表单标签 – input type属性(按钮篇- submit,reset,button,file)插图(13)

    可以看到上面什么都没有,也要使用 Value 值 进行复制,才有 

    ===>>>

   前端 — 基础 表单标签 – input type属性(按钮篇- submit,reset,button,file)插图(14)

   ===>>>

 前端 — 基础 表单标签 – input type属性(按钮篇- submit,reset,button,file)插图(15)

 那这个 按钮,点击之后也不提交数据; 要真正使用需要搭配 JS 去使用 ~!! 

File  

     #   文件域, 使用场景 : 上传文件使用的。 

          ===>>>

        前端 — 基础 表单标签 – input type属性(按钮篇- submit,reset,button,file)插图(16)

        ===>>>

        前端 — 基础 表单标签 – input type属性(按钮篇- submit,reset,button,file)插图(17)

         这就是 File 文件的作用,上示后面显示 未选择文件,就是你还没选择好要上传什么文件

         点击按钮

         ===>>>

        前端 — 基础 表单标签 – input type属性(按钮篇- submit,reset,button,file)插图(18)

       选择一个文件进行上传 

       前端 — 基础 表单标签 – input type属性(按钮篇- submit,reset,button,file)插图(19)

        这个时候就显示的是 你上传的文件类型了~!! 

本站无任何商业行为
个人在线分享 » 前端 — 基础 表单标签 – input type属性(按钮篇- submit,reset,button,file)
E-->