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中的__slots__缓存资源以节省内存开销的方法
Apr 02 Python
python Django批量导入不重复数据
Mar 25 Python
编写Python爬虫抓取暴走漫画上gif图片的实例分享
Apr 20 Python
python 生成器生成杨辉三角的方法(必看)
Apr 10 Python
Python操作MongoDB详解及实例
May 18 Python
python连接数据库的方法
Oct 19 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
Dec 25 Python
python 实现兔子生兔子示例
Nov 21 Python
基于python实现获取网页图片过程解析
May 11 Python
为什么相对PHP黑python的更少
Jun 21 Python
Python 执行矩阵与线性代数运算
Aug 01 Python
用python批量下载apk
Dec 29 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
php 全文搜索和替换的实现代码
2008/07/29 PHP
PHP中的事务使用实例
2015/05/26 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
ES6中定义类和对象的方法示例
2019/07/31 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
Python中的魔法方法深入理解
2014/07/09 Python
python搜索指定目录的方法
2015/04/29 Python
Python AES加密模块用法分析
2017/05/22 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
python with语句的原理与用法详解
2020/03/30 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
小学生读书感言
2014/02/12 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
学生评语大全
2014/04/18 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python