Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >前端数据提交给后端之HTML表单简单剖析

前端数据提交给后端之HTML表单简单剖析

作者头像
不背锅运维
发布于 2022-08-01 13:28:59
发布于 2022-08-01 13:28:59
1.5K00
代码可运行
举报
文章被收录于专栏:监控监控
运行总次数:0
代码可运行

写在开篇

什么是表单呢?当前端想要提交数据给后端,怎么搞?那么在前端开发中,表单是常用的手段,比如常见的场景有:登录框、账号注册页、主机信息录入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>效果如下图:

image.png
image.png

通上面的小栗子可以知道,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>效果如下图:

image.png
image.png

上面的小栗子中,出了两道问答题,均为单选题。那么,类似的需求都是可以使用输入类型为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>效果如下图:

image.png
image.png

上面的小栗子中,实现复选框的输入类型是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>效果如下图:

image.png
image.png

输入类型为submit,说明它就是提交按钮,注意上面代码type="submit"了吗?

HTML表单重要属性

1. Action属性

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

前端代码:

代码语言:html
AI代码解释
复制
<!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>

后端代码:

代码语言:python
代码运行次数:0
运行
AI代码解释
复制
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地址后,点击提交

image.png
image.png

这个ok是后端返回的

image.png
image.png

后端接收到数据后,啥也没做,只是做了简单打印

image.png
image.png

这个小栗子很简单,通过这个小栗子,是不是对action属性的用法有了进一步的理解呢?

2. Method属性

method属性的用途是指定提交数据的http方法,通常有2个,get和post。接下来我们在上个小栗子的基础上做个小改造,看下面代码

前端代码:

代码语言:html
AI代码解释
复制
<!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>

后端代码:

代码语言:python
代码运行次数:0
运行
AI代码解释
复制
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)

当前端输入数据后,提交表单时,直接告诉你这是不允许的方法

image.png
image.png

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

下面我们改造一下后端代码:

代码语言:python
代码运行次数:0
运行
AI代码解释
复制
# 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请求,再次提交,后端的返回如下:

image.png
image.png

看到了吗?后端判断前端过来的请求是get还是post,很显然,前端过来的请求是get,并且返回了非常友好的提示。

接下来我们继续改造一下前端的代码,将请求修改为post,代码如下:

代码语言:html
AI代码解释
复制
<!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>

后端代码也稍微改造一下,改变接收前端数据的方法

代码语言:python
代码运行次数:0
运行
AI代码解释
复制
# 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地址,并点击提交

image.png
image.png

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

image.png
image.png

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

image.png
image.png

好了,关于前端的action属性和Method属性就讲到这里了。为了讲解action和method,还结合了后端的一丢丢知识,前端和后端的知识点以后都会慢慢讲到哈!

HTML表单常用元素

1. 下拉列表

先来个前端代码:

代码语言:html
AI代码解释
复制
<!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>

后端代码:

代码语言:python
代码运行次数:0
运行
AI代码解释
复制
# 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语言”,并提交

image.png
image.png

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

image.png
image.png

2. 允许多选

前端代码:

代码语言:html
AI代码解释
复制
<!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属性来实现选择多个值。

后端代码的打印方式稍微做了些许调整:

代码语言:python
代码运行次数:0
运行
AI代码解释
复制
# 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键可进行多选

后端打印的效果图下图:

写在最后

关于表单基础知识点的讲解就这么愉快的结束了,关于更多表单的元素、输入属性、输入类型可自行查阅和实战,笔者因时间有限就不一一演示。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
一些简单html实例集合
    <label for="username">用户名:</label><br>
很酷的站长
2023/01/08
1.1K0
一些简单html实例集合
前端-part2-form表单+下拉框
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>form表单示例</title> </head> <body> <form action="" method="post" enctype="multipart/form-data" autocomplete="off" novalidate> <!--网址 方法 定义二进制传输 表
少年包青菜
2019/08/08
7750
HTML5 学习总结(二)——HTML5新增属性与表单元素
张果
2018/01/04
3.7K0
HTML5 学习总结(二)——HTML5新增属性与表单元素
前端页面的简单学习与项目搭建(主要针对HTML和VUE的学习)「建议收藏」
_blank:浏览器会另开一个新窗口显示document.html文档 _parent:指向父frameset文档 _self:把文档调入当前页框 _top:去掉所有页框并用document.html取代frameset文档 tittle属性:指明连接的信息
全栈程序员站长
2022/07/22
5810
前端页面的简单学习与项目搭建(主要针对HTML和VUE的学习)「建议收藏」
前端-HTML-web服务本质-HTTP协议-请求-标签-01(待完善)
我们的浏览器端(B/S架构)本质上也是一个客户端,通过socket与服务端通信,发送请求,获得返回数据,再有浏览器将服务器返回的数据渲染成页面上看到的一个一个标签元素样式。
suwanbin
2019/09/26
9380
前端-HTML-web服务本质-HTTP协议-请求-标签-01(待完善)
运维开发之路:带你解剖html列表,一个看似简单而又不简单的知识点。
先看小栗子,通过css的list-style-type:disc;属性来控制了样式,不过这个是默认的样式,哪怕不指定,也是这样的效果。
不背锅运维
2022/07/12
5100
运维开发之路:带你解剖html列表,一个看似简单而又不简单的知识点。
【学习笔记】HTML5
HTML5 本文为我观看遇见狂神说的讲解视频的个人学习笔记,侵删。 基本信息 <!--DOCTYPE:用的是什么规范(告诉浏览器),默认html--> <!DOCTYPE html> <html lang="en"> <!--网页头部--> <head> <!-- meta 描述性标签,描述网站的一些信息--> <!-- 常做SEO--> <meta charset="UTF-8"> <meta name="keywords" content="Livinfly, WA">
Livinfly
2022/10/26
7770
python web开发 HTML基础
文章目录 1. 简介 2. 标签元素属性 3. 表格 4. 列表 ol 有序 ul 无序 自定义列表 5. 表单 输入域标记 input 选择域标记 select, option 文字域标记 textarea 6. 综合练习 learning from 《python web开发从入门到精通》 1. 简介 HTML 是描述网页的一种标记语言,Hyper Text Markup Language <!DOCTYPE html> <html lang="en"> <head> <meta charset
Michael阿明
2022/01/07
4820
python web开发 HTML基础
HTML表单
这个元素正式定义了一个表单,就像<div>和<p>标签,它是一个容器元素,但它也支持一些特定的属性来配置表单的行为方式。它的所有属性都是可选的,但实践中最好至少要设置action属性和method属性。
HammerZe
2022/03/25
4.3K0
HTML表单
HTML5+CSS3+JavaScript从入门到精通-04
HTML5+CSS3+JavaScript从入门到精通 作者:王征,李晓波 第四章 HTML網頁中的表單 案例 04-01 用户登录界面! <!--web04-01--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用户登录界面!</title> </head> <body > <h2 align="center">用户登录界面</h2> <hr /><br /><br /> <form method="po
qiqi_fu
2021/12/03
9880
HTML5+CSS3+JavaScript从入门到精通-04
HTML知识点概括——一篇文章带你完全掌握HTML
label标记可以连接其他元素(常用于与button,checkbox,radio等点击性标签使用)
秋落雨微凉
2022/10/25
1.8K0
HTML知识点概括——一篇文章带你完全掌握HTML
HTML前端基础
>块元素:无论内容多少,该元素独占一行 行内元素:内容撑开宽度,左右都是行内元素的可以排在一行
Albert_xiong
2021/06/21
1.5K0
HTML前端基础
JavaWeb day1 html快速入门
HTML 是一门语言,所有的网页都是用HTML 这门语言编写出来的,也就是HTML是用来写网页的,像京东,12306等网站有很多网页。
小小程序员
2023/02/14
7230
html中表单提交
表单提交代码 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
bamboo
2019/01/29
1.7K0
html中表单提交
HTML
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上
用户1173509
2018/01/17
1.6K0
HTML
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
Rossy Yan
2025/01/13
1610
《前端技术基础》第01章 HTML基础【合集】
一篇”水文“带你解剖HTML中的ID属性以及和Class属性的区别。
写在开篇哈喽!我又来写”水文“了,回顾上篇讲到的class属性,那么class属性和本篇要讲的id属性有什么不一样呢?跟随笔者步伐,一一解剖。HTML中的id属性直接先上个例子,看看效果,然后我们逐一剖析一下。看下面代码:<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你复习巩固,攻破前端技能</title> <style> #id1 {
不背锅运维
2022/07/25
8290
一篇”水文“带你解剖HTML中的ID属性以及和Class属性的区别。
HTML5+CSS3+JavaScript从入门到精通-17
HTML5+CSS3+JavaScript从入门到精通 17-01 用户登录界面! <!--web17-01--> <!-- 与第四章的表单呼应 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用户登录界面!</title> <script type="text/javascript"> function alert_info() { //win
qiqi_fu
2021/12/06
1.4K0
HTML5+CSS3+JavaScript从入门到精通-17
HTML
HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
py3study
2020/01/16
1.6K0
HTML零基础入门教学
下面我们来看看一个基本的HTML文件结构式什么样的。打开记事本,新建一个文件,写上下面的代码:
小灵蛇
2024/12/18
4031
HTML零基础入门教学
相关推荐
一些简单html实例集合
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验