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删除Java源文件中全部注释的实现方法
Aug 30 Python
python中将正则过滤的内容输出写入到文件中的实例
Oct 21 Python
Python使用MyQR制作专属动态彩色二维码功能
Jun 04 Python
Django错误:TypeError at / 'bool' object is not callable解决
Aug 16 Python
详解使用django-mama-cas快速搭建CAS服务的实现
Oct 30 Python
简单了解python中的f.b.u.r函数
Nov 02 Python
Pytorch之卷积层的使用详解
Dec 31 Python
python 插入日期数据到Oracle实例
Mar 02 Python
python plt可视化——打印特殊符号和制作图例代码
Apr 17 Python
UI自动化定位常用实现方法代码示例
Oct 27 Python
python查询MySQL将数据写入Excel
Oct 29 Python
pytorch 中nn.Dropout的使用说明
May 20 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/03/07 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
JavaScript入门之基本函数详解
2011/10/21 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
利用python实现命令行有道词典的方法示例
2017/01/31 Python
python django事务transaction源码分析详解
2017/03/17 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
Overload和Override的区别
2012/09/02 面试题
电信专业应届生自荐信
2013/09/28 职场文书
日语求职信范文
2013/12/17 职场文书
酒店端午节促销方案
2014/02/18 职场文书
绩效工资实施方案
2014/03/15 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android