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以环状形式组合排列图片并输出的方法
Mar 17 Python
深入讲解Python函数中参数的使用及默认参数的陷阱
Mar 13 Python
Linux 下 Python 实现按任意键退出的实现方法
Sep 25 Python
深入理解Python 关于supper 的 用法和原理
Feb 28 Python
Python读取excel指定列生成指定sql脚本的方法
Nov 28 Python
浅谈Django中view对数据库的调用方法
Jul 18 Python
python__name__原理及用法详解
Nov 02 Python
Django 404、500页面全局配置知识点详解
Mar 10 Python
python爬虫学习笔记之pyquery模块基本用法详解
Apr 09 Python
Python telnet登陆功能实现代码
Apr 16 Python
为什么相对PHP黑python的更少
Jun 21 Python
python中os.path.join()函数实例用法
May 26 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
基于MySQL分区性能的详细介绍
2013/05/02 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
AngularJS语法详解
2015/01/23 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
Node.js学习入门
2017/01/03 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
python实现获取序列中最小的几个元素
2014/09/25 Python
python+opencv实现动态物体识别
2018/01/09 Python
python skimage 连通性区域检测方法
2018/06/21 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
中学生打架检讨书
2014/02/10 职场文书
英语系本科生求职信
2014/07/15 职场文书
办公室主任个人总结
2015/02/28 职场文书
学习与创新自我评价
2015/03/09 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
英文辞职信范文
2015/05/13 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
Python编程源码报错解决方法总结经验分享
2021/10/05 Python