无论我们使用什么语言来完成web开发，都必然会用到HTML表单标签，HTML表单标签在开发中经常会被我们用来去收集我们想要得到的数据信息，基本上所有的网页都有表单的利用，表单合理的使用和布局是作为一个前端开发者所必须具有的基本技能。

表单标签结构树：

作为一名 Python 开发者，Web 开发一直是我既感兴趣又略带头疼的领域。虽然 Python 在后端开发和数据处理方面表现得相当出色，但传统的 Web 开发往往需要掌握很多前端技术，比如 HTML、CSS、JavaScript。对我来说，光是想要快速实现一个简单的 Web 界面，有时候都得多花不少时间在这些前端细节上。而

提示：点击上方"蓝色字体"↑ 可以订阅噢！

摘要 51RGB官方微信

掌握基础知识，成就未来大神梦想……

定义和用法

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

一、表单元素介绍【用户名、密码、单选框、多选框】

1、表单：就是从网页上看见的各种各样的框，比如 登陆框、同意协议的选项框、下拉框、只能选男女的选框等。

二、演示：主要代码在下面

search类型元素

search类型的input元素是一种专门用来输入搜索关键词的文本框。其代码格式如下。

<input type="search" name="user_search1"/>

一、概述

这是Flask Mega-Tutorial系列的第三部分，我将告诉你如何使用Web表单。

在第二章中我为应用主页创建了一个简单的模板，并使用诸如用户和用户动态的模拟对象。在本章中，我将解决这个应用程序中仍然存在的众多遗漏之一，那就是如何通过Web表单接受用户的输入。

平时搬砖也算是接触了不少的低代码表单，但是今天给大家分享的这款低代码表单绝对会让你的眼前一亮。不仅支持vue2、vue3，而且还提供了移动端，还适配了uniapp。怎么样，就我目前的见到的很少能够同时适配这么多的表单，它就是今天的主角 — Variant Form。

废话不多说，我们直接上干货！

日常生活工作学习中，大家对电子表格必定不陌生。从工作数据汇总分析到出门收据各种电子发票，这些都是由电子表格制作出来的。

不过大家对电子表格的印象可能停留在这里：

标准行列数据统计的表格样式。但其实，表格也可以是这样的：

工作中遇到需要实现的表格情况往往比大家想象的要更加复杂，最近我们在做客户支持的工作过程中遇到了一个客户，他需要借助电子表格表格实现合同中的电子签名。

电子签名通俗来说就是通过技术手段实现在电子文档上加载电子形式的签名，其作用类似于纸质合同上的手写签名或加盖的公章。在企业工作流审批、请柬、单据保全等场景应用广泛。

<form action="/submit" method="post">
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
    <input type="submit" value="提交">
</form>
//检查表单元素是否被禁用，避免使用 disabled 属性。
//如果需要让用户不能修改某个元素的值，可以使用 readonly 属性。

number类型元素

number属性提供了一个输入数字的输入类型，用户可以直接输入数字，或者通过单击微调框中的向上或者向下按钮选择数字。 代码格式如下。

<input type="number" name="shuzi"/>