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脚本对Linux服务器进行监控的教程
Apr 02 Python
Python自定义主从分布式架构实例分析
Sep 19 Python
Collatz 序列、逗号代码、字符图网格实例
Jun 22 Python
基于numpy.random.randn()与rand()的区别详解
Apr 17 Python
python获取指定字符串中重复模式最高的字符串方法
Jun 29 Python
django连接mysql配置方法总结(推荐)
Aug 18 Python
Python中使用双下划线防止类属性被覆盖问题
Jun 27 Python
Python使用指定字符长度切分数据示例
Dec 05 Python
python等差数列求和公式前 100 项的和实例
Feb 25 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
Jun 03 Python
Python paramiko使用方法代码汇总
Nov 20 Python
Python中Pyspider爬虫框架的基本使用详解
Jan 27 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内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
php 邮件发送问题解决
2014/03/22 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
详解js的六大数据类型
2016/12/27 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
python 从远程服务器下载日志文件的程序
2013/02/10 Python
从零学Python之入门(五)缩进和选择
2014/05/27 Python
Python简单的制作图片验证码实例
2017/05/31 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
Python urllib.request对象案例解析
2020/05/11 Python
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
通信研究生自荐信
2014/02/01 职场文书
地理科学专业自荐信
2014/09/01 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
离婚案件答辩状
2015/05/22 职场文书
Python实现滑雪小游戏
2021/09/25 Python
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers
MySQL详细讲解变量variables的用法
2022/06/21 MySQL
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python