Flask框架学习笔记之表单基础介绍与表单提交方式


Posted in Python onAugust 12, 2019

本文实例讲述了Flask框架学习笔记之表单基础介绍与表单提交方式。分享给大家供大家参考,具体如下:

表单介绍

表单是HTML页面中负责数据采集功能的部件。由表单标签,表单域和表单按钮组成。通过表单,将用户输入的数据提交给服务器,并交给服务端进行处理。

表单标签

用于声明表单的范围,位于表单标签的元素将被提交。

语法:<form></form>

属性:Method规定用于发送表单数据的 HTTP 方法。

          Enctype规定在向服务器发送表单数据之前如何对其进行编码。(适用于 method="post" 的情况)

          action规定当提交表单时向何处发送表单数据。(指定url)

表单域

表单域包含了文本框,密码框等多种类型

语法:<input ……/>

属性:type规定input元素类型。
          name定义input元素名称
          value规定input元素值

表单域的种类

文本框type=text

密码框type=password

文本区域type=textarea(可输入多行数据)

文件上传框type=file

单选框type=radio

复选框type=checkbox

表单按钮

    提交按钮

    复位按钮

    一般按钮

实现:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <form>
    <input type="text" placeholder="Text" name="text" /># text
    <input type="password" placeholder="password" name="password" /># password
    <textarea placeholder="Textarea" name="textarea" style="resize:none"></textarea># 文本区域
    <input type="file" name="file" /># 文件上传
    <input type="radio" name="Option" value="Option1" /> Option1# 单选框
    <input type="radio" name="Option" value="Option2" /> Option2
    <input type="checkbox" name="Option" value="Option1" /> Option1# 多选框
    <input type="checkbox" name="Option" value="Option2" /> Option2
    <input type="submit" value="Submit" /># submit按钮
    <input type="reset" value="Reset" /># 重置按钮
    <input type="button" value="button" /># 普通按钮
  </form>
</body>
</html>

Flask框架学习笔记之表单基础介绍与表单提交方式

普通按钮下没有js语言支持是无效果的。

这里编写一个简单的js脚本来实现点击button弹出表单中的信息:

function getValue()
{
 var text=document.form1.text1.value;
 alert(text)
}

html程序:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../static/j.js"></script># 这里插入js脚本
</head>
<body>
  <form name="form1"># 添加表单名字
    <input type="text" placeholder="Text" name="text1" /># 修改text表单名
    <input type="password" placeholder="password" name="password" />
    <textarea placeholder="Textarea" name="textarea" style="resize:none"></textarea>
    <input type="file" name="file" />
    <input type="radio" name="Option" value="Option1" /> Option1
    <input type="radio" name="Option" value="Option2" /> Option2
    <input type="checkbox" name="Option" value="Option1" /> Option1
    <input type="checkbox" name="Option" value="Option2" /> Option2
    <input type="submit" value="Submit" />
    <input type="reset" value="Reset" />
    <input type="button" value="button" οnclick="getValue()" /># 点击就调用getValue()函数
  </form>
</body>
</html>

Flask框架学习笔记之表单基础介绍与表单提交方式

表单的提交方式

GET和POST

    GET方式通过URL提交数据,数据在URL中可以看到。

    POST方式,数据放置在HTML Header中提交

两种提交方式的区别

    GET请求可以被浏览器缓存

    POST所请求的URL可以被缓存,但数据不会被缓存

    POST请求不便于分享

    POST请求没有长度限制

    GET请求的数据暴露在URL中,会带来一些安全问题。

GET方式的适用场合

    单纯的请求数据,不进行其他操作

    表单数据较短,不超过1024个字符

    对安全性要求一般的场合

POST方式适用的场合

    数据不仅仅用于请求,或提交上传数据。

    表单数据过长时

    要传送的数据不是ASCII编码

希望本文所述对大家基于flask框架的Python程序设计有所帮助。

Python 相关文章推荐
python读取csv文件示例(python操作csv)
Mar 11 Python
Python可跨平台实现获取按键的方法
Mar 05 Python
用Python制作检测Linux运行信息的工具的教程
Apr 01 Python
Python 基础之字符串string详解及实例
Apr 01 Python
Python装饰器(decorator)定义与用法详解
Feb 09 Python
python整合ffmpeg实现视频文件的批量转换
May 31 Python
详解解决Python memory error的问题(四种解决方案)
Aug 08 Python
Python安装及Pycharm安装使用教程图解
Sep 20 Python
Python经纬度坐标转换为距离及角度的实现
Nov 01 Python
python实现数学模型(插值、拟合和微分方程)
Nov 13 Python
python tkinter实现下载进度条及抖音视频去水印原理
Feb 07 Python
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
May 14 Python
python内存管理机制原理详解
Aug 12 #Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
Aug 12 #Python
python实现图片压缩代码实例
Aug 12 #Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
Aug 12 #Python
一行Python代码过滤标点符号等特殊字符
Aug 12 #Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
Aug 12 #Python
Django认证系统实现的web页面实现代码
Aug 12 #Python
You might like
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
农历与西历对照
2006/09/06 Javascript
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
Python中map和列表推导效率比较实例分析
2015/06/17 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
Django中提示消息messages的设置方式
2019/11/15 Python
python关于变量名的基础知识点
2020/03/03 Python
python安装后的目录在哪里
2020/06/21 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
外贸业务员岗位职责
2013/11/24 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
创优争先心得体会
2014/09/11 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
python实现进度条的多种实现
2021/04/29 Python
详解python字符串驻留技术
2021/05/21 Python
如何理解PHP核心特性命名空间
2021/05/28 PHP
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript