表单提交代码

1、源代码分析

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10. <form action="/form.html" method="GET">
  11.     <!-- action： 表单提交的地址 -->
  12.     <!-- method：提交保单的方法 -->
  13. <div class="name">
  14.     <label for="name">用户名</label>
  15.     <input type="text" name="name" id="name" placeholder="请输入用户名">
  16.     <!-- placeholder是透明的提示文字 -->
  17. </div>
  18. <div class="password">
  19.     <label for="password">密码</label>
  20.     <input type="password" name="password" id="password" placeholder="请输入密码">
  21. </div>
  22. <div class="sex">
  23.     <label for="sex">性别</label>
  24.     <input type="radio" name="sex" value="male">男
  25.     <input type="radio" name="sex" value="female">女
  26. </div>
  27. <div class="city">
  28.     <label for="city">最喜欢的城市</label>
  29.     <select name="city" id="city">
  30.         <option value="beijing">北京</option>
  31.         <option value="shanghai">上海</option>
  32.         <option value="chongqing" selected >重庆</option>
  33.         <!-- selected 表示被选中在页面展示的选项 -->
  34.     </select>
  35. </div>
  37. <div class="hobby">
  38.         <label for="hobby">爱好</label>
  39.         <input type="checkbox" name="hobby" value="read">读书
  40.         <input type="checkbox" name="hobby" value="flower">插花
  41.         <input type="checkbox" name="hobby" value="sing">唱歌
  42.         <!-- 所有选项name要一样 -->
  43. </div>
  44. <div class="area">
  45.     <textarea id="area" name="area" cols="30" rows="10"></textarea>
  46. </div>
  47. <button>button</button>
  48. <!-- 可以提交表单 -->
  49. <input type="submit" value="submit">
  50. <!-- 可以提交表单 -->
  51. <input type="button" value="button">
  52. <!-- 不可以提交表单 -->
  53. <input type="reset"  value="reset">
  54. <!-- 对表单里面已经输入的内容做重置 -->
  56. </form>
  57. </body>
  58. </html>

2、终端操作

  • 打开终端gitbash，切换到html所在的文件夹
  • 用命令行http-server打开静态服务器，打开后会出现两个ip地址。127.xxx是本地访问地址，125.xxx是局域网访问地址（这里的前提是已经安装了nodejs，并用npm安装了http-server这个服务器）

  • 用浏览器打开html文件。用http://127.0.0.1:8080，替换本地的file文件地址。
  • 点开检查-network-header可以看到表单提交的信息

3、get和post方式区别

  • get把提交的数据用&拼接成url，成为url对象中query的内容。但post的url就很干净
  • 提交数据量不同，get最多提交1k数据。超过浏览器的限制，数据会被截断。post理论上无限制，受服务器限制
  • get提交的数据在浏览器历史记录中，安全性不好
  • get 重在 "要", post 重在"给"

4、注意事项

  • 所有input标签要加上name属性，不然该数据不能正确接收。

html中表单提交的更多相关文章

  1. 关于struts2中表单提交时，中文乱码问题的解决

    http://blog.csdn.net/hjw506848887/article/details/8966194 今天写项目时,突然遇到了struts2中表单提交的中文乱码问题,调了好久就是不知道答 ...

  2. HTML中表单提交数据GET、POST的区别

    表单提交数据Get和Post的区别: GET和POST是表单提交数据其中的两种方式,除此之外还有PUT.DELETE等. GET: GET的请求起因于正常的URL请求,或是没有指定METHOD的HTM ...

  3. js中表单提交后按钮变灰色的功能

    表单提交后按钮变成灰色 http://www.111cn.net/wy/js-ajax/45299.htm

  4. Html 中表单提交的一些知识总结——防止表单自动提交，以及submit和button提交表单的区别

    转自:http://jackaudrey.blog.163.com/blog/static/1314217882010590041833/ 在页面中有多个input type="text&q ...

  5. JEECG中表单提交的中断

    JEECG平台中基于form表单封装了<t:formvalid>标签,对应实现的类为FormValidationTag.java文件. 很多时候在正式向后台提交数据前想要做判断处理,若通过 ...

  6. java web当中表单提交到后台出现乱码的解决方法

    1.如果提交方式为post,想不乱码,只需要在服务器端设置request对象的编码即可,客户端以哪种编码提交的,服务器端的request对象就以对应的编码接收,比如客户端是以UTF-8编码提交的,那么 ...

  7. Jquery ajax中表单提交被拦截的问题处理方法

    在实际开发项目中,由于要做支付宝的批量退款处理,需要用到ajax中去提交表单数据,项目截图如下: 由于在第二张截图“确认退款”那里需要异步ajax提交数据到服务器处理信息,处理成功后将返回的数据装载到 ...

  8. php中表单提交复选框与下拉列表项

    在赶项目中,抽出半个小时来写篇博客吧,这个功能说实话不难,为什么要写呢,因为在复选框那里有小小的难点,我试了好多遍才试成功的,希望能为以后需要帮助的同学提供点思路. 先看一下我做的效果吧 就是给每个业 ...

  9. jsp 嵌套iframe 从iframe中表单提交并传值到外层

    今天因需求迭代 更改元来代码 遇到了这么个问题 就是想在 iframe中提交后进行整个页面的跳转 并把iframe中的值传到外层jsp 大概就是这个样子 外层 a.jsp <div id=&qu ...

随机推荐

  1. spring boot密码管理

    1.引入依赖 <dependency> <groupId>com.github.ulisesbocchio</groupId> <artifactId> ...

  2. 配置传统vlan间路由

    S1#SH RUN spanning-tree mode pvst ! interface FastEthernet0/1 switchport access vlan 10 switchport m ...

  3. 【Linux开发】linux设备驱动归纳总结（二）：模块的相关基础概念

    linux设备驱动归纳总结(二):模块的相关基础概念 系统平台:Ubuntu 10.04 开发平台:S3C2440开发板 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...

  4. vscode配置PHP Debug

    1.先在vscode中安装PHP Debug,在设置添加“php.validate.executablePath”项,选中对应版本的php.exe. "php.validate.execut ...

  5. 3 基于梯度的攻击——MIM

    MIM攻击原论文地址——https://arxiv.org/pdf/1710.06081.pdf 1.MIM攻击的原理 MIM攻击全称是 Momentum Iterative Method,其实这也是 ...

  6. ssh远程连接的故障排查详解

    排查故障: 1.两个机器之间是否通畅,看物理网络(网线网卡,IP是不是正确) ping ip -t 来检测物理网络是否通畅 通 不通 不通: 1.客户端到服务器端物理链路有问题 网卡 ,IP ,  网 ...

  7. 【转贴】Debian 10 "buster" 正式发布

    Debian 10 "buster" 正式发布 https://news.cnblogs.com/n/627909/ 我看到龙芯的 就是 mips64el 的指令集.. Linux ...

  8. MYSQL—第二部分（Linux版本的安装和数据表的操作）

    Linux版本的安装(过于简单了) 安装: ? 1 yum install mysql-server 服务端启动 ? 1 mysql.server start 客户端连接 ? 1 2 3 4 5 6 ...

  9. delphi 连接各中数据库方法

    ---恢复内容开始--- 数据库连接字符串的拼写规则的决定条件: • 连接的数据库的类型:SQL Server,Oracle,MySQL,Acess,MogoDB,Visual FoxPro(dBAS ...

  10. P1828香甜的黄油

    这是一道关于最短路的绿题. 题目给出一些农场,每个农场有奶牛,农场与农场之间存在边,要使所有奶牛到达其中一个农场的总距离最短,输出他们到达这个农场的距离.首先我想到了最小生成树,但我发现其实并不是,因 ...