表单提交代码

1、源代码分析

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

<form action="/form.html" method="GET">

    <!-- action： 表单提交的地址 -->

    <!-- method：提交保单的方法 -->

<div class="name">

    <label for="name">用户名</label>

    <input type="text" name="name" id="name" placeholder="请输入用户名">

    <!-- placeholder是透明的提示文字 -->

</div>

<div class="password">

    <label for="password">密码</label>

    <input type="password" name="password" id="password" placeholder="请输入密码">

</div>

<div class="sex">

    <label for="sex">性别</label>

    <input type="radio" name="sex" value="male">男

    <input type="radio" name="sex" value="female">女

</div>

<div class="city">

    <label for="city">最喜欢的城市</label>

    <select name="city" id="city">

        <option value="beijing">北京</option>

        <option value="shanghai">上海</option>

        <option value="chongqing" selected >重庆</option>

        <!-- selected 表示被选中在页面展示的选项 -->

    </select>

</div>

<div class="hobby">

        <label for="hobby">爱好</label>

        <input type="checkbox" name="hobby" value="read">读书

        <input type="checkbox" name="hobby" value="flower">插花

        <input type="checkbox" name="hobby" value="sing">唱歌

        <!-- 所有选项name要一样 -->

</div>

<div class="area">

    <textarea id="area" name="area" cols="30" rows="10"></textarea>

</div>

<button>button</button>

<!-- 可以提交表单 -->

<input type="submit" value="submit">

<!-- 可以提交表单 -->

<input type="button" value="button">

<!-- 不可以提交表单 -->

<input type="reset"  value="reset">

<!-- 对表单里面已经输入的内容做重置 -->

</form>

</body>

</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. Zemax评价函数经验小结

    2.4 风景透镜 为了说明一个简单的评价函数问题,我们演示一个真实风景透镜实例,这个风景镜有两个局部最优解,它大概是历史上第一个照相透镜,具有合理的大视场.它一开始是在一个成像暗箱(camera ob ...

  2. Android开发 互相调用模式之导出Jar包、扩展MainActivity、Java主导

    首先讲导出Jar包,在以前都是用这种方法,但是现在官方不推荐使用此方法,官方推荐导出Aar包 (1)首先创建一个Android空工程 注意:这里选择API 16,因为Unity支持的最低是API 16 ...

  3. caoz的梦呓：找工作么？会坐牢的那种。

    猫宁!!! 参考链接:https://mp.weixin.qq.com/s/kj9crZIIrS_8IzuYzukydw 很多年轻人,初入职场,确实背景资历不够强,眼界阅历也不够,有时候稀里糊涂就误入 ...

  4. Leetcode之广度优先搜索（BFS）专题-529. 扫雷游戏（Minesweeper）

    Leetcode之广度优先搜索(BFS)专题-529. 扫雷游戏(Minesweeper) BFS入门详解:Leetcode之广度优先搜索(BFS)专题-429. N叉树的层序遍历(N-ary Tre ...

  5. 2019牛客暑期多校训练营（第三场）- H Magic Line (计算几何)

    题目链接:https://ac.nowcoder.com/acm/contest/883/H 题意:给定n个点(n为偶数),求一条直线使得n个点平均分散在直线两端,即每端n/2个点. 思路:把n个点按 ...

  6. python 爬虫--下载图片,下载音乐

    #下载图片 imgUrl='http://www.pptbz.com/pptpic/UploadFiles_6909/201211/2012111719294197.jpg' r=requests.g ...

  7. ubuntu 18.04 配置notebook远程连接的坑

    jupyter-notebook的安装不在此说明 在网上搜了很多方案都不行,好不容易从坑里爬出来 以下为远程连接配置方法 1.生成配置文件 jupyter notebook --generate-co ...

  8. Django2.1 authenticate 会关联数据库 is_active 的解决办法

    # 会检测用户是否是活跃状态(is_active),不活跃则返回None(默认配置)AUTHENTICATION_BACKENDS = ['django.contrib.auth.backends.M ...

  9. DockerFile 编译语法详解

    Dockerfile是一个文本格式的配置文件,用户可以使用Dockerfile来快速创建自定义的镜像,本小结首先介绍Dockerfile典型的基本结构和它支持的众多指令,并具体讲解通过这些指令来编写定 ...

  10. Docker：Swarm + Stack 一站式部署容器集群

    参考1 参考2 1.注意docker的版本,yum默认安装的版本比较低,可能出现 unsupported Compose file version: 3.7 docker版本升级 2.docker-c ...