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

97次阅读

共计 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-…

正文完
 0