您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

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

时间:2022-08-02 13:28:24  来源:微信公众号  作者:彩虹运维技术栈社区

写在开篇

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



Tags:前端   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
我们学习前端能开发什么?随着计算机行业的不断发展,Web前端技术在企业和个人中得到了广泛的应用。Web前端开发人员是一个非常新兴的职业,在计算机行业,Web前端受到了很多关注。...【详细内容】
2022-10-07  Tags: 前端  点击:(14)  评论:(0)  加入收藏
此列表来自于State of JS的报告,该报告是对JavaScript社区开发人员的年度综合调查,旨在分享他们对库的使用和满意度的看法,以及围绕工具和社区内的概念和意见,几周前发布的 2021...【详细内容】
2022-10-06  Tags: 前端  点击:(29)  评论:(0)  加入收藏
大家好,我叫Echa哥。微前端已经是一个非常成熟的领域了,但开发者不管采用哪个现有方案,在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite...【详细内容】
2022-10-06  Tags: 前端  点击:(24)  评论:(0)  加入收藏
大家好,我是Echa哥。 推荐一个轻量完备的开源前端框架:dagger.js:https://daggerjs.org 什么是 dagger.jsdagger.js 是一个基于 html 的描述式单页应用开发框架,通过在页面 DO...【详细内容】
2022-09-26  Tags: 前端  点击:(34)  评论:(0)  加入收藏
前言嗨,大家好,我是希留。近日接到了一个地图选址的需求,大致就是添加地址信息时,需要打开地图,记录详细地址以及经纬度信息。高德地图、百度地图、腾讯地图等主流的地图服务商都...【详细内容】
2022-09-21  Tags: 前端  点击:(95)  评论:(0)  加入收藏
您是否在为您的 Web 开发项目选择哪个前端框架而进退两难?以下是顶级前端框架,并确定最适合您的框架。 前端开发人员 负责创建用户在其显示器上看到的材料。毫无疑问,他们正在...【详细内容】
2022-09-21  Tags: 前端  点击:(25)  评论:(0)  加入收藏
前言最近笔者在工作上一直听到后端工程师们在谈论 Microservices(微服务) 的架构设计,听到的当下立马去查询才知道原来 Microservices 这麽潮,身为前端工程师的我当然也希望前...【详细内容】
2022-09-15  Tags: 前端  点击:(26)  评论:(0)  加入收藏
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐是一个企业级前端开发框架&mdash;&mdash;Umi。 Umi,中文...【详细内容】
2022-09-05  Tags: 前端  点击:(110)  评论:(0)  加入收藏
1.业务背景 2.实体类 3.自定义Mapper和xml文件 4.Service层 5.Controller层 1.业务背景业务场景中,一个会话中存在多个场景,即一个session_id对应多个scene_id和scene_name如...【详细内容】
2022-09-05  Tags: 前端  点击:(56)  评论:(0)  加入收藏
1、Web开发分类与区别人们通常将Web分为前端和后端,前端相关的职位有前端设计师(UI/UE),前端开发工程师,后端相关的有后端开发工程师。 2、技术栈区别在各大招聘网站上,公司对...【详细内容】
2022-08-26  Tags: 前端  点击:(72)  评论:(0)  加入收藏
▌简易百科推荐
TroisJS 是一个基于 Three.js 的 vue3 三维可视化库,TroisJS对桌面和移动端都有良好的支持。使用 TroisJS 可以在网站上添加一个 3D 渲染器,并在你的 vue文件 的部分中使用...【详细内容】
2022-10-08  GitHub精选  今日头条  Tags:vue3   点击:(45)  评论:(0)  加入收藏
如果你在 vue3 开发中使用了 <script setup> 语法的话,对于组件的 name 属性,需要做一番额外的处理。对于 vue@3.2.34 及以上版本,在使用 <script setup> 的单文件组件时,vue 会...【详细内容】
2022-10-08  NewCheng  今日头条  Tags:vue3   点击:(34)  评论:(0)  加入收藏
第1步. 对项目进行初始化操作:npm init -y由此生成package.json文件。第2步. 安装Vitenpm install vite -D安装成功后会在package.json文件中添加以下内容:"devDependencies":...【详细内容】
2022-10-07  dirac  今日头条  Tags:Vite   点击:(21)  评论:(0)  加入收藏
Vite是下一代前端开发与构建工具。用Vite搭建一个新项目的操作步骤如下。第1步. 新建一个文件夹,并在开发工具中以项目形式打开该文件夹。第2步. 新建一个终端,使用npm安装Vit...【详细内容】
2022-10-07  dirac  今日头条  Tags:Vite   点击:(20)  评论:(0)  加入收藏
我们学习前端能开发什么?随着计算机行业的不断发展,Web前端技术在企业和个人中得到了广泛的应用。Web前端开发人员是一个非常新兴的职业,在计算机行业,Web前端受到了很多关注。...【详细内容】
2022-10-07  科技白茶    Tags:前端开发   点击:(14)  评论:(0)  加入收藏
大家好,我叫Echa哥。微前端已经是一个非常成熟的领域了,但开发者不管采用哪个现有方案,在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite...【详细内容】
2022-10-06  Echa攻城狮  今日头条  Tags:微前端   点击:(24)  评论:(0)  加入收藏
前言嗨,大家好,我是希留。近日接到了一个地图选址的需求,大致就是添加地址信息时,需要打开地图,记录详细地址以及经纬度信息。高德地图、百度地图、腾讯地图等主流的地图服务商都...【详细内容】
2022-09-21  希留说  今日头条  Tags:Vue   点击:(95)  评论:(0)  加入收藏
package.json 是前端每个项目都有的 json 文件,位于项目的根目录。许多脚手架在搭建项目时也会自动帮我们自动初始化好 package.json。package.json 里面有许许多多的配置,与...【详细内容】
2022-09-21  字节跳动技术团队  今日头条  Tags:json   点击:(108)  评论:(0)  加入收藏
您是否在为您的 Web 开发项目选择哪个前端框架而进退两难?以下是顶级前端框架,并确定最适合您的框架。 前端开发人员 负责创建用户在其显示器上看到的材料。毫无疑问,他们正在...【详细内容】
2022-09-21   qaseven     Tags:前端框架   点击:(25)  评论:(0)  加入收藏
前言最近笔者在工作上一直听到后端工程师们在谈论 Microservices(微服务) 的架构设计,听到的当下立马去查询才知道原来 Microservices 这麽潮,身为前端工程师的我当然也希望前...【详细内容】
2022-09-15  前端小智  今日头条  Tags:微前端   点击:(26)  评论:(0)  加入收藏
站内最新
站内热门
站内头条