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的Django框架使用入门指引
Apr 15 Python
使用Python多线程爬虫爬取电影天堂资源
Sep 23 Python
Python实现读取Properties配置文件的方法
Mar 29 Python
对python中的logger模块全面讲解
Apr 28 Python
Python实现调用另一个路径下py文件中的函数方法总结
Jun 07 Python
python获取时间及时间格式转换问题实例代码详解
Dec 06 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
Aug 04 Python
Python 中判断列表是否为空的方法
Nov 24 Python
Python MySQLdb 执行sql语句时的参数传递方式
Mar 04 Python
PyCharm 2020 激活到 2100 年的教程
Mar 25 Python
Python根据字典的值查询出对应的键的方法
Sep 30 Python
python drf各类组件的用法和作用
Jan 12 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
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
php常用图片处理类
2016/03/16 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
document.getElementById介绍
2011/09/13 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
jquery编写日期选择器
2017/03/16 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
Python实现简单查找最长子串功能示例
2019/02/26 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
计算机本科生自荐信
2013/10/15 职场文书
环境科学专业个人求职信
2013/12/15 职场文书
银行员工职业规划范文
2014/01/21 职场文书
管理工程专业求职信
2014/08/10 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
运动会主持词大全
2015/07/02 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
JavaScript实例 ODO List分析
2022/01/22 Javascript