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实现的批量下载RFC文档
Mar 10 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
Jul 06 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
May 29 Python
Python网络爬虫之爬取微博热搜
Apr 18 Python
使用Python的Turtle绘制哆啦A梦实例
Nov 21 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
Feb 07 Python
PyCharm刷新项目(文件)目录的实现
Feb 14 Python
基于python爬取有道翻译过程图解
Mar 31 Python
DRF使用simple JWT身份验证的实现
Jan 14 Python
python 利用matplotlib在3D空间中绘制平面的案例
Feb 06 Python
Python使用Turtle模块绘制国旗的方法示例
Feb 28 Python
python基础之匿名函数详解
Apr 21 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常用函数汇总
2014/12/17 PHP
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
js中的闭包实例展示
2018/11/01 Javascript
python简单实现获取当前时间
2016/08/27 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
关于Python作用域自学总结
2019/06/10 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
4s店机修工岗位职责
2013/12/20 职场文书
高二政治教学反思
2014/02/01 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
培训督导岗位职责
2015/04/10 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript
python 中的jieba分词库
2021/11/23 Python