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之赋值,简单也不简单
Sep 24 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
May 25 Python
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
May 28 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
Sep 19 Python
python numpy 一维数组转变为多维数组的实例
Jul 02 Python
学生信息管理系统Python面向对象版
Jan 30 Python
pyqt远程批量执行Linux命令程序的方法
Feb 14 Python
python线程的几种创建方式详解
Aug 29 Python
python函数修饰符@的使用方法解析
Sep 02 Python
python MultipartEncoder传输zip文件实例
Apr 07 Python
详解Selenium 元素定位和WebDriver常用方法
Dec 04 Python
Django框架模板用法详解
Jun 10 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实现多级树型菜单
2006/10/09 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
node使用request请求的方法
2019/12/20 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
Python进行数据科学工作的简单入门教程
2015/04/01 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
《小石潭记》教学反思
2014/02/13 职场文书
《四季》教学反思
2014/04/08 职场文书
高效课堂标语
2014/06/26 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
员工表扬信怎么写
2015/05/05 职场文书
python面向对象版学生信息管理系统
2021/06/24 Python