关于html:前端数据提交给后端之HTML表单简单剖析

92次阅读

共计 8126 个字符，预计需要花费 21 分钟才能阅读完成。

写在开篇

什么是表单呢？以后端想要提交数据给后端，怎么搞？那么在前端开发中，表单是罕用的伎俩，比方常见的场景有：登录框、账号注册页、主机信息录入 CMDB 等等场景都是须要表单。那么在本篇中，笔者除了讲一些根本的知识点，还会再联合后端的形式来演示如何接管表单提交的数据。心愿这些小小的演示能够起到抛砖引玉的成果。

盘点 HTML 表单根底

1. from 元素

构建表单，次要是通过 from 元素，咱们先来一个最简略的小栗子，看上面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title> 彩虹运维技术栈社区主页 </title>
    </head>
    <body>
        <h2> 彩虹运维技术栈社区，公众号 ID：TtrOpsStack</h2>
        <h3> 主机信息录入 CMDB</h3>
        <form>
            <label for="hostname"> 主机名：</label><br>
            <input type="text" id="hostname" name="hostname"><br>
            <label for="ipaddr">IP 地址：</label><br>
            <input type="text" id="ipaddr" name="ipaddr"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

成果如下图：

通下面的小栗子能够晓得，form 表单的次要天堑是用于收集用户的输出。在 from 表单外面，还蕴含着各种不同类型的 input 元素，比方咱们下面小栗子中用到的文本（text）、提交按钮（submit）。

input 元素是表单里最重要的元素，它有很多 type 属性，上面咱们来总结下：

类型 形容
text 文本输出
radio 单选按钮
checkbox 提交按钮
submit 提交按钮
button 可单击按钮

在下面小栗子中，除了 input 元素之外，不晓得大家留神 label 元素没有。label 元素的主要用途是为 input 元素定义标签，且用 for 属性和 input 元素的 id 属性进行绑定呢。

2. 单选按钮

什么是单选按钮？就是在多个选项中，你只能选其中 1 个，不能多选。上面咱们看个小栗子，看上面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title> 彩虹运维技术栈社区主页 </title>
    </head>
    <body>
        <h2> 彩虹运维技术栈社区，公众号 ID：TtrOpsStack</h2>
        <h3> 问答题 1（单选）：某站长，工作经验不足 1 年，仅从互联网收集学习材料制订学习路线售卖盈利，从道德层面角度剖析是否有问题？</h3>
        <form>
            <input type="radio" id="i1" name="problem" value="yes">
            <label for="i1"> 有 </label>
            <input type="radio" id="i2" name="problem" value="no">
            <label for="i2"> 没有 </label>
            <input type="radio" id="i3" name="problem" value="not_clear">
            <label for="i3"> 不分明 </label>
        </form>
        <h3> 问答题 2（单选）：理论工作经验不足 1 年的人员折腾的学习材料您感觉是否对你有帮忙？</h3>
        <form>
            <input type="radio" id="w1" name="problem" value="yes">
            <label for="w1"> 有 </label>
            <input type="radio" id="w2" name="problem" value="no">
            <label for="w2"> 没有 </label>
            <input type="radio" id="w3" name="problem" value="not_clear">
            <label for="w3"> 不分明 </label>
        </form>
    </body>
</html>

成果如下图：

下面的小栗子中，出了两道问答题，均为单选题。那么，相似的需要都是能够应用输出类型为 radio 来实现须要应用单选按钮的场景。

3. 复选框

什么是复选框？复选框就是能够抉择多个选项，当须要多选的时候，应用复选框输出类型就对了。看上面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title> 彩虹运维技术栈社区主页 </title>
    </head>
    <body>
        <h2> 彩虹运维技术栈社区，公众号 ID：TtrOpsStack</h2>
        <h3> 问答题 1（单选）：某站长，工作经验不足 1 年，仅从互联网收集学习材料制订学习路线售卖盈利，从道德层面角度剖析是否有问题？</h3>
        <form>
            <input type="checkbox" id="i1" name="problem" value="yes">
            <label for="i1"> 有 </label>
            <input type="checkbox" id="i2" name="problem" value="no">
            <label for="i2"> 没有 </label>
            <input type="checkbox" id="i3" name="problem" value="not_clear">
            <label for="i3"> 不分明 </label><br>
            <input type="submit" value="提交">
        </form>
        <h3> 问答题 2（单选）：理论工作经验不足 1 年的人员折腾的学习材料您感觉是否对你有帮忙？</h3>
        <form>
            <input type="checkbox" id="w1" name="problem" value="yes">
            <label for="w1"> 有 </label>
            <input type="checkbox" id="w2" name="problem" value="no">
            <label for="w2"> 没有 </label>
            <input type="checkbox" id="w3" name="problem" value="not_clear">
            <label for="w3"> 不分明 </label><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

成果如下图：

下面的小栗子中，实现复选框的输出类型是 checkbox，这个是重点哦！

4. 提交按钮

当有数据要提交给后端的时候怎么搞？如果后端是 API 服务，能够给它提交 json。如果是前端页面，就须要通过构建表单来获取用户的输出。基于表单提交数据给后端，怎么提交？须要一个能够点击的提交按钮，那这个按钮怎么来？先看上面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title> 彩虹运维技术栈社区主页 </title>
    </head>
    <body>
        <h2> 彩虹运维技术栈社区，公众号 ID：TtrOpsStack</h2>
        <h3> 主机信息 </h3>
        <form>
            <label for="ipaddr">IP 地址 </label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

成果如下图：

输出类型为 submit，阐明它就是提交按钮，留神下面代码 type=”submit” 了吗？

HTML 表单重要属性

1. Action 属性

在之前的例子中，前端表单须要将数据提交给后端，除了须要一个提交按钮外，还须要 action 属性。当点击提交按钮后，表单的数据该发到后端的哪个 url 进行解决，就是定义在 action 属性中。接下来，咱们联合前端和后端间接来个小实战，后端代码用 Python 的 Flask 框架。

前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title> 彩虹运维技术栈社区主页 </title>
    </head>
    <body>
        <h2> 彩虹运维技术栈社区，公众号 ID：TtrOpsStack</h2>
        <h3> 主机信息 </h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank">
            <label for="ipaddr">IP 地址 </label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码：

from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=["GET", "POST"])
def ttropsstack():
    args = request.args
    print 'ip addr is: %s' % args.get('ip')
    return 'ok'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

前端和后端的代码写完后，咱们接下来看看成果

输出 IP 地址后，点击提交

这个 ok 是后端返回的

后端接管到数据后，啥也没做，只是做了简略打印

这个小栗子很简略，通过这个小栗子，是不是对 action 属性的用法有了进一步的了解呢？

2. Method 属性

method 属性的用处是指定提交数据的 http 办法，通常有 2 个，get 和 post。接下来咱们在上个小栗子的根底上做个小革新，看上面代码

前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title> 彩虹运维技术栈社区主页 </title>
    </head>
    <body>
        <h2> 彩虹运维技术栈社区，公众号 ID：TtrOpsStack</h2>
        <h3> 主机信息 </h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="get">
            <label for="ipaddr">IP 地址 </label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码：

from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=["POST"])
def ttropsstack():
    args = request.args
    print 'ip addr is: %s' % args.get('ip')
    return 'ok'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

以后端输出数据后，提交表单时，间接通知你这是不容许的办法

在这个例子中，是因为前端的表单了指定了 method 为 get 申请，而后端接收数据的 method 规定了须要 post 申请，故所以呈现这个问题。

上面咱们革新一下后端代码：

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        print request.get_data(as_text=True)
        return 'ok'
    else:
        return '提交数据须要 post 申请'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

前端表单中的 method 还是放弃 get 申请，再次提交，后端的返回如下：

看到了吗？后端判断前端过去的申请是 get 还是 post，很显然，前端过去的申请是 get，并且返回了十分敌对的提醒。

接下来咱们持续革新一下前端的代码，将申请批改为 post，代码如下：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title> 彩虹运维技术栈社区主页 </title>
    </head>
    <body>
        <h2> 彩虹运维技术栈社区，公众号 ID：TtrOpsStack</h2>
        <h3> 主机信息 </h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="ipaddr">IP 地址 </label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码也略微革新一下，扭转接管前端数据的办法 

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        a = request.form
        print a.get('ip')
        print type(a)
        return 'ok'
    else:
        return '提交数据须要 post 申请'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

输出 IP 地址，并点击提交

提交后，后端给前端返回了 ok

接下来看下后端，后端啥也没做，就获取到表单的数据，而后打印了数据，并且打印了下数据类型

好了，对于前端的 action 属性和 Method 属性就讲到这里了。为了解说 action 和 method，还联合了后端的一丢丢常识，前端和后端的知识点当前都会缓缓讲到哈！

HTML 表单罕用元素

1. 下拉列表

先来个前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title> 彩虹运维技术栈社区主页 </title>
    </head>
    <body>
        <h2> 彩虹运维技术栈社区，公众号 ID：TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist"> 运维开发应把握的技能：</label>
            <select id="opslist" name="opslist">
                <option value="python">Python 语言 </option>
                <option value="go">Go 语言 </option>
                <option value="shell">Shell 语言 </option>
                <option value="database"> 数据库 </option>
                <option value="frontend"> 前端 </option>
                <option value="linux">Linux</option>
                <option value="network"> 网络 </option>
                <option value="storage"> 存储 </option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

后端代码：

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        a = request.form
        print a.get('opslist')
        return 'ok'
    else:
        return '提交数据须要 post 申请'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

在下拉框中抉择“Go 语言”，并提交

后端啥也没干，就只做了打印

2. 容许多选

前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title> 彩虹运维技术栈社区主页 </title>
    </head>
    <body>
        <h2> 彩虹运维技术栈社区，公众号 ID：TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist"> 运维开发应把握的技能：</label>
            <select id="opslist" name="opslist" size="6" multiple>
                <option value="python">Python 语言 </option>
                <option value="go">Go 语言 </option>
                <option value="shell">Shell 语言 </option>
                <option value="database"> 数据库 </option>
                <option value="frontend"> 前端 </option>
                <option value="linux">Linux</option>
                <option value="network"> 网络 </option>
                <option value="storage"> 存储 </option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

上述前端代码中，是应用 multiple 属性来实现抉择多个值。

后端代码的打印形式略微做了些许调整：

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        data = request.get_data()
        print data
        return 'ok'
    else:
        return '提交数据须要 post 申请'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

按住 ctrl 或者 shift 键可进行多选

后端打印的效果图下图：

写在最初

对于表单根底知识点的解说就这么欢快的完结了，对于更多表单的元素、输出属性、输出类型可自行查阅和实战，笔者因工夫无限就不一一演示。感谢您的浏览，望多多关注咱们、点赞、转发！

本文转载于（喜爱的盆友关注咱们）：https://mp.weixin.qq.com/s/L-…

正文完
html
发表至： html
2022-08-01
 0
关于html:前端面试题
关于html:Electron-Playground-系列文件下载篇
关于html:第-24-题如何理解希尔排序
关于html:前端-策略模式