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

2024-12-14 03:03:29

本文实例讲述了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>

普通按钮下没有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>

表单的提交方式

GET和POST

GET方式通过URL提交数据，数据在URL中可以看到。

POST方式，数据放置在HTML Header中提交

两种提交方式的区别

GET请求可以被浏览器缓存

POST所请求的URL可以被缓存，但数据不会被缓存

POST请求不便于分享

POST请求没有长度限制

GET请求的数据暴露在URL中，会带来一些安全问题。

GET方式的适用场合

单纯的请求数据，不进行其他操作

表单数据较短，不超过1024个字符

对安全性要求一般的场合

POST方式适用的场合

数据不仅仅用于请求，或提交上传数据。

表单数据过长时

要传送的数据不是ASCII编码

希望本文所述对大家基于flask框架的Python程序设计有所帮助。

Python的Flask框架中web表单的教程

概要在前面章节我们为主页定义了一个简单的模板,部分尚未实现的模块如用户或帖子等使用模拟的对象作为临时占位. 本章我们将看到如何利用web表单填补这些空白. web表单是web应用中最基本的构建要素,我们将通过表单来实现用户发帖和应用登录功能. 完成本章内容你需要基于前面章节完成的微博应用代码,请确认这些代码已安装并能正常运行. 配置 Flask-WTF是WTForms项目的Flask框架扩展,我们将用他来帮助我们处理web表单. 大部分Flask扩展都需要定义相关配置项,所以我们先来在应用根
Flask框架学习笔记之使用Flask实现表单开发详解

本文实例讲述了使用Flask实现表单开发.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div align="center"> <h1>Use
Flask框架WTForm表单用法示例

本文实例讲述了Flask框架WTForm表单用法.分享给大家供大家参考,具体如下: 运行环境: python2.7 flask 0.11 flask-wtf 0.14.2 wtform能够通过一个类定义一些字段,这些字段会在前端生成标签,并且通过设置字段的验证规则,自动判断前端输入数据的格式. 一般用于用户登录,用户注册等信息录入. 示例: from wtforms import Form from flask import Flask,render_template,request,red
在Python的Flask框架中构建Web表单的教程

尽管Flask的request对象提供的支持足以处理web表单,但依然有许多任务会变得单调且重复.表单的HTML代码生成和验证提交的表单数据就是两个很好的例子. Flask-WTF扩展使得处理web表单能获得更愉快的体验.该扩展是一个封装了与框架无关的WTForms包的Flask集成. Flask-WTF和它的依赖集可以通过pip来安装: (venv) $ pip install flask-wtf 1.跨站请求伪造(CSRF)保护默认情况下,Flask-WTF保护各种形式对跨站请求伪造(CS
详解flask表单提交的两种方式

一.通用方式通用方式就是使用ajax或者$.post来提交. 前端html <form method="post" action="/mockservice" method = "post"> ... <div class="form-group"> <label>data <font style="color:#a94442" size="2"
一个基于flask的web应用诞生使用模板引擎和表单插件（2）

经过了第一章的内容,已经可以做出一些简单的页面,首先用这种方式做一个登录页面,首先要创建一个login的路由方法: @app.route("/login",methods=["GET"]) def login(): html="<form method='post'>" \ "<table>" \ "<tr><td>请输入用户名</td><td>
Flask-WTF表单的使用方法

flask_wtf是flask框架的表单验证模块,可以很方便生成表单,也可以当做json数据交互的验证工具,支持热插拔. 安装 pip install Flask-WTF Flask-WTF其实是对wtforms组件的封装,使其支持对flask框架的热插拔. 简单使用 # app.py from flask import Flask, current_app, request, render_template from forms import MyForm app = Flask(__name
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证

表单是让用户与我们的网页应用程序交互的基本元素.Flask 本身并不会帮助我们处理表单,但是 Flask-WTF 扩展让我们在我们的 Flask 应用程序中使用流行的 WTForms 包.这个包使得定义表单和处理提交容易一些. Flask-WTF 我们想要使用 Flask-WTF 做的第一件事情(在安装它以后,GitHub项目页:https://github.com/lepture/flask-wtf )就是在 myapp.forms 包中定义一个表单. # ourapp/forms.py fr
Python Flask-web表单使用详解

Flask-WTF扩展可以把处理web表单的过程变成一种愉悦的体验. 一.跨站请求伪造保护默认情况下,Flask-WTF能够保护所有表单免受跨站请求伪造的攻击.恶意网站把请求发送到被攻击者已登录的网站时就会引起CSRF攻击. 为了实现CSRF保护,Flask-WTF需要程序设置一个密钥.Flask-WTF使用这个密钥生成加密令牌,再用令牌验证请求中表单数据的真伪.设置密钥的方法如下所示: app = Flask(__name__) app.config['SECRET_KEY']='hard
在Python的Flask中使用WTForms表单框架的基础教程

下载和安装安装 WTForms 最简单的方式是使用 easy_install 和 pip: easy_install WTForms # or pip install WTForms 你可以从 PyPI 手动下载 WTForms 然后运行 python setup.py install . 如果你是那种喜欢这一切风险的人, 就运行来自 Git 的最新版本, 你能够获取最新变更集的打包版本, 或者前往项目主页克隆代码仓库. 主要概念 Forms 类是 WTForms 的核心容器. 表单(
flask入门之表单的实现

一.原生表单 form.html {% extends 'common/base.html' %} {% block title %} 原生表单 {% endblock %} {% block pagecontent %} {# <form action="{{ url_for('check') }}" method="post">#} <form action="{{ url_for('form') }}" method=&q

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

相关推荐

随机推荐