Flask框架学习笔记之表单基础介绍与表单提交方式

作者:Cytues 时间:2023-02-05 09:25:44 

本文实例讲述了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程序设计有所帮助。

来源:https://blog.csdn.net/qq_41805514/article/details/80782295

标签:Flask,表单
0
投稿

猜你喜欢

  • 关于torch中tensor数据类型的转换

    2022-07-16 20:59:59
  • asp如何在线修改数据库表?

    2010-06-26 12:24:00
  • 开心网上input输入框研究

    2009-03-06 12:52:00
  • Cpython解释器中的GIL全局解释器锁

    2021-08-29 22:06:43
  • MySQL索引查询limit offset及排序order by用法

    2024-01-20 19:55:53
  • asp如何做一个看他爱不爱你的小测验?

    2010-07-11 21:16:00
  • GO语言基本数据类型总结

    2024-02-06 08:14:27
  • Python使用sklearn实现的各种回归算法示例

    2021-02-18 10:00:55
  • TensorFlow自定义损失函数来预测商品销售量

    2023-01-08 07:01:51
  • 表头固定(利用jquery实现原理介绍)

    2024-04-09 19:46:55
  • python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警

    2022-01-13 09:48:25
  • MySQL开启Slow慢查询的方法示例

    2024-01-14 17:43:26
  • 用python实现打砖块小游戏

    2021-11-10 02:52:06
  • python二维列表一维列表的互相转换实例

    2023-07-09 10:27:40
  • 基于mysq字段选择的详解

    2024-01-23 20:11:20
  • Python实现用户登录注册

    2021-01-12 17:03:42
  • Python文本文件的合并操作方法代码实例

    2022-12-07 21:52:54
  • Python paramiko模块使用解析(实现ssh)

    2021-02-03 10:29:26
  • Pytorch 如何训练网络时调整学习率

    2022-01-31 20:08:48
  • python交互式图形编程实例(三)

    2021-10-10 17:34:39
  • asp之家 网络编程 m.aspxhome.com