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 21 Python
在主机商的共享服务器上部署Django站点的方法
Jul 22 Python
从源码解析Python的Flask框架中request对象的用法
Jun 02 Python
Python多线程扫描端口代码示例
Feb 09 Python
python email smtplib模块发送邮件代码实例
Apr 26 Python
异步任务队列Celery在Django中的使用方法
Jun 07 Python
详解python--模拟轮盘抽奖游戏
Apr 12 Python
python里 super类的工作原理详解
Jun 19 Python
Django之choices选项和富文本编辑器的使用详解
Apr 01 Python
使用OpenCV对车道进行实时检测的实现示例代码
Jun 19 Python
python中查看.db文件中表格的名字及表格中的字段操作
Jul 07 Python
Python OpenCV 彩色与灰度图像的转换实现
Jun 05 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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
一个典型的PHP分页实例代码分享
2011/07/28 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
python 图片验证码代码分享
2012/07/04 Python
windows下安装python paramiko模块的代码
2013/02/10 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
总经理驾驶员岗位职责
2013/12/04 职场文书
给水工程专业毕业生自荐信
2014/01/28 职场文书
统计岗位职责
2014/02/21 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL
css height属性中的calc方法详解
2021/06/03 HTML / CSS
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js