Flask表单基础：HTML结构、提交方式与GET/POST区别详解

今天早睡

发布时间：2026-10-13| 7人浏览过

原创

本文详细介绍Flask框架中HTML表单的基础知识，涵盖表单标签、域及按钮的语法与属性。重点解析GET与POST两种提交方式在数据可见性、缓存机制、安全性及长度限制上的核心区别，并给出各自适用场景建议，帮助开发者在Flask项目中正确选择数据交互策略。

本文旨在分享Flask框架中关于表单基础及其提交方式的实战经验，供读者参考学习。

HTML表单基础结构

表单介绍

表单是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>

普通按钮若无JavaScript支持，点击后不会产生任何效果。

此处编写一个简单的JavaScript脚本，实现点击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>