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实现子类调用父类的方法
Nov 10 Python
python实现在sqlite动态创建表的方法
May 08 Python
Python映射拆分操作符用法实例
May 19 Python
基于Python 的进程管理工具supervisor使用指南
Sep 18 Python
python实现装饰器、描述符
Feb 28 Python
python中pika模块问题的深入探究
Oct 13 Python
Pycharm运行加载文本出现错误的解决方法
Jun 27 Python
python实现列表中最大最小值输出的示例
Jul 09 Python
python实现简单飞行棋
Feb 06 Python
4行Python代码生成图像验证码(2种)
Apr 07 Python
浅谈python处理json和redis hash的坑
Jul 16 Python
Python使用pandas导入csv文件内容的示例代码
Dec 24 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
Smarty中常用变量操作符汇总
2014/10/27 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
php创建无限级树型菜单
2015/11/05 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
AngularJS中transclude用法详解
2016/11/03 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
小程序实现投票进度条
2019/11/20 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
Python文件操作类操作实例详解
2014/07/11 Python
Python中input和raw_input的一点区别
2014/10/21 Python
python和ruby,我选谁?
2017/09/13 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年公务员工作总结
2014/11/18 职场文书
公务员个人年终总结
2015/02/12 职场文书
世界遗产导游词
2015/02/13 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
如何写好活动总结
2019/06/21 职场文书
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL