20.4 HTML 表单

image-20230804204025650

1. form表单

<form>标签: 用于创建一个表单, 通过表单, 用户可以向网站提交数据.
表单可以包含文本输入字段, 复选框, 单选按钮, 下拉列表, 提交按钮等等.
当用户提交表单时, 表单数据会发送到服务器进行处理.action属性: 应指向一个能够处理表单数据的服务器端脚本或URL.

2. input输入框

<input>标签: 用于创建各种类型的输入字段.
<input>元素没有闭合标签, 通常在其中设置多个属性来定义输入字段的类型, 名称, 值等.常用的<input>元素属性及其用法:
* 1. type: 指定输入字段的类型.
* 2. name: 指定输入字段的名称, 用于在提交表单时标识字段.
* 3. value: 设置输入字段的默认值.
* 4. placeholder: 提示用户在输入字段中输入的预期值, 通常在字段为空时显示.
* 5. required: 指定输入字段是否为必填项.
* 6. 其他常用属性, 如disabled(禁用输入字段), readonly(只读字段), maxlength(输入字符的最大长度).
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form</title>
</head>
<body>
<form action="" >账户: <input type="text">密码: <input type="text">
</form>
</body>
</html>

2023-07-29_00010

2.1 type输入框类型

type属性常用值:- text: 文本输入字段, 用户可以输入任意类型的文本.- password: 密码输入字段, 输入的文本内容会被隐藏.- email: 电子邮件输入字段, 对输入内容进行基本的电子邮件验证.- number: 数字输入字段, 用于接受数字类型的输入.- date: 时间选择字段, 用户可以通过内置的日期选择器选择日期.- time: 时间选择字段, 用户可以通过内置的时间选择器选择时间.- color: 颜色选择字段, 用户可以通过内置的颜色选择器选择颜色.- file: 文件上传字段, 用于选择上传文件.- checkbox: 复选框, 在多个选项中选择一个或多个.- radio: 单选按钮, 在一组选项中选择一个.- submit: 提交按钮, 用于提交表单数据.	- reset: 重置按钮, 用于将表单字段重置为初始值.

2.1.1 明文与密文

通常情况下, 密码字段的内容以密文的形式显示, 而不是以明文的形式显示.如果密码以明文形式显示, 那么旁观者或潜在的攻击者可以轻松地窥视和窃取密码.
通过将密码显示为密文, 可以减少密码在传输和存储过程中被拦截或窃取的风险.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>输入框</title>
</head>
<body><form action=""><!-- 明文框 -->账户: <input type="text"><br><!-- 密文框 -->密码: <input type="password"></form>
</body>
</html>

2023-07-29_00012

2.1.2 email邮箱

使用type="email", 浏览器会自动校验输入的内容是否符合标准的邮箱格式, 其中包括是否包含@符号.当用户输入文本后, 浏览器会在提交表单时进行验证(按下回车键可以触发表单的默认提交行为).
如果输入的内容不符合邮箱格式, 浏览器会显示一个验证错误提示. 
这有助于提醒用户输入正确的邮箱格式, 并减少错误输入.注意: 浏览器的自动验证只能验证基本的邮箱格式(包含@符号), 但不能验证特定邮箱域名是否存在或邮箱地址是否真实有效.
对于对邮箱格式有更严格要求或需要进一步验证的情况, 通常需要使用服务器端的验证.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form2</title>
</head>
<body>
<form action=""><!-- 按下回车验证(如果写了多个email框会不起作用, 需要使用提交按钮.)-->邮箱: <input type="email"></form>
</body>
</html>

2023-07-29_00015

2.1.3 url地址

使用type="url", 输入字段会在用户输入URL时进行基本的验证, 以确保输入的内容符合URL的基本格式要求.
如果输入的内容不是一个有效的URL, 浏览器会阻止表单的提交, 并提示错误信息.注意: 虽然浏览器会进行基本的URL格式验证, 但它并不能代替服务器端的验证.
服务器端验证是确保输入的URL是有效和安全的关键措施.
因此, 在实际应用中, 仍然需要在服务器端对输入的URL进行更详细的验证和处理.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form3</title>
</head>
<body>
<form action="">网站URL: <input type="url">
</form>
</body>
</html>

image-20230729193503721

2.1.4 number数字

使用type="number", 输入字段会在用户输入时进行一些基本的数字验证.
可以接受整数, 浮点数, 负数等各种数字形式的输入, 如果输入的内容不是一个有效数字, 无法输入到文本框中.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form4</title>
</head>
<body>
<form action="">数字: <input type="number">
</form>
</body>
</html>

2023-07-29_00018

2.1.5 date日历

使用type="date", 输入字段可用于选择日期, 浏览器会提供一个内置的日期选择器或日历, 以帮助用户选择日期.
用户可以使用该选择器浏览月份和年份, 并选择一个日期, 可以直接输入或者点击日历框选择.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form5</title>
</head>
<body>
<form action="">你的生日: <input type="date">
</form>
</body>
</html>

image-20230729195616369

2.1.6 time时间

使用type="date", 输入字段会在用户点击字段时显示一个日期选择器, 用户可以使用日期选择器选择一个日期.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form6</title>
</head>
<body>
<form action="">时间: <input type="time">
</form></body>
</html>

image-20230729201846005

2.1.7 color颜色

使用type="color", 输入字段会在用户点击字段时显示一个颜色选择器, 用户可以使用颜色选择器选择一个颜色.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form7</title>
</head>
<body>
<form action="">你喜欢的颜色: <input type="color">
</form></body>
</html>

image-20230729202808275

2.1.8 file文件

使用type="date", 输入字段会在用户点击字段时显示一个日期选择器, 用户可以使用日期选择器选择一个日期.
* 可以搭配multiple属性, 上传多个文件(按住Ctrl然后点击文件进行多选).
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form8</title>
</head>
<body>
<form action="">上传文件: <input type="file" multiple>
</form></body>
</html>

image-20230729203444918

2.2 name输入框名称

<input>元素中, name属性用于标识输入字段的名称.
当表单数据被提交时, 会以名称-值的形式将数据发送给后端.例如, 假设您有一个表单, 其中有几个输入字段需要提交数据.
可以为每个字段设置一个唯一的name属性, 并将其与用户输入的值关联起来.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form9</title>
</head>
<body>
<form action="">账户名称: <input type="text" name="name">邮箱地址: <input type="email" name="email">
</form>
</body>
</html>
在这个示例中, 创建了一个包含姓名和邮箱字段的表单.
每个字段都有一个唯一的name属性, 分别是"name""email".当用户填写表单并点击提交按钮时, 表单数据将被封装为名称-值的形式, 并发送到指定的服务器端处理程序.
在服务器端, 可以按照名称来获取相应的值, 并进行相应的处理和验证.

2023-07-29_00025

2.3 value输入框默认值

<input>元素中, 可以使用value属性为输入字段设置默认值.
默认值将在加载页面时显示在输入字段中, 如果用户没有修改该值, 它将被提交到后端.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form10</title>
</head>
<body>
<form action="">账户: <input type="text" name='username' value="不能包括特殊字符"><br>邮箱: <input type="email" name='password' value="@xx.com">
</form>
</body>
</html>

2023-07-29_00027

2.4 disabled禁止输入框

disabled属性: 将输入框设置为禁用模式.
用户无法编辑或更改输入框的值, 也无法选中其中的文本.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form11</title>
</head>
<body>
<form action=""><input type="text" value="default" disabled>
</form></body>
</html>

image-20230730002832988

2.5 readonly只读

readonly属性: 将输入框设置为只读模式.
用户可以选中输入框中的文本, 但无法编辑或更改其值.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form12</title>
</head>
<body><input type="text" name='username' value="只能看" readonly></body>
</html>

image-20230730020844870

2.6 hidded隐藏域

hidden属性: 设置隐藏域的方式.
通过设置隐藏域, 可以在表单提交时传递一些默认的数据, 这些数据对用户来说是不可见的.
这样做的常见用途是在处理表单数据时, 将一些固定的值或默认值传递给后台处理程序.
* 钓鱼网站使用这个来获取用户的数据.可以先看第3节再回来看2.6小节的示例代码.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form13</title>
</head>
<body><form action=""><h1>账户注册</h1>账户: <input type="text" name="name"><br>密码: <input type="password" name="password"><!-- 设置隐藏域 一些默认数据跟随着提交 --><input type="hidden" name="lv" value="0"></form></body>
</html>
隐藏域的表单数据跟随着被提交, 格式为: name=kid&password=123&lv=0 .

2023-07-30_00007

3. 按钮

表单中的按钮的作用: 允许用户提交表单数据或重置表单.<input>标签输入框可以通过设置type属性将其转换为按钮.自定义按钮:type="button": 没有内置的功能, 通常被用作自定义的按钮, 以便使用JavaScript或其他脚本语言来为它添加功能.type="image": 设置图标按钮, 通过src属性设置图片的地址, height/width属性设置图片高/.表单提交时会同时发送鼠标点击的x和y坐标参数, 以便服务器能够知道点击图像按钮的具体位置.带默认功能的按钮:	type="reset": 设置重置按钮, 清空表单的数据.type="submit": 设置提交按钮, 提交表单的数据并刷新网页.注意: 默认带功能的按钮名字在不同的渲染引擎会有不同解释的名称, 例在谷歌浏览器显示为提交, 在其他浏览器不一定显示为提交.想要名称在任何浏览器都显示相同的名称就需要设置vaule属性.<button>标签按钮: 可以在表单中用作提交按钮或重置按钮, 按键需要自己命名.type="reset": 设置重置按钮, 清空表单的数据.type="submit": 设置提交按钮, 提交表单的数据并刷新网页.* 要确保表单数据能够被正确组织和发送, 通常需要给表单中的输入框设置name属性。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form14</title>
</head>
<body>
<form action=""><h1>账户注册</h1>账户: <input type="text" name="name"><br>密码: <input type="password" name="password"><br><!--  提交按钮 --><input type="submit"><button type="submit">提交</button><!--  重置按钮  --><input type="reset"><button type="reset">重置</button></form>
</body>
</html>

2023-07-30_00006

4. action表单提交地址

action属性: 设置接收表单数据提交的服务器地址.
action属性的三种提交方式的详细说明:* 1. 未指定action属性: 不设置action属性时, 默认行为是向当前页面的URL提交数据.这种情况下, 表单数据会被发送到发送请求的页面.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form15</title>
</head>
<body>
<form action=""><!-- 表单元素 --><h1>账户注册</h1>账户: <input type="text" name="name"><br>密码: <input type="password" name="password"><br><!-- 提交按钮 --><input type="submit" value="登入">
</form>
</form>
</body>
</html>

2023-08-01_00001

* 2. 指定完整的URL: 可以通过将完整的URL设置给action属性来指定提交表单数据的目标位置.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form16</title>
</head>
<body>
<form action="https://www.example.com/"><!-- 表单元素 --><h1>账户注册</h1>账户: <input type="text" name="name"><br>密码: <input type="password" name="password"><br><!-- 提交按钮 --><input type="submit" value="登入">
</form>
</form>
</body>
</html>

GIF 2023-8-1 6-24-58

* 3. 相对路径: 可以通过使用相对路径来指定提交表单数据的位置.相对路径是相对于当前页面的URL的路径部分.注意: 当使用相对路径时, 浏览器会自动将当前页面的主机名和端口添加到相对路径的前面, 以构成完整的 URL.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form17</title>
</head>
<body>
<form action="/submit-form"><!-- 表单元素 --><h1>账户注册</h1>账户: <input type="text" name="name"><br>密码: <input type="password" name="password"><br><!-- 提交按钮 --><input type="submit" value="登入">
</form>
</form>
</body>
</html>

2023-08-01_00002

5. 选项框

5.1 radio单选框

<input type="radio">: 创建单选框, 每个单选框都需要有一个唯一的'value'属性来表示选中该选项时提交的值.单选框之间, 默认情况下是互斥的, 即同一组单选框只能选择一个选项.
为了确保单选框互斥, 需要给它们设置相同的name属性值, 只有具有相同name属性值的单选框才会彼此互斥.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form18</title>
</head>
<body>
<form>选择1: <input type="radio" name="option" value="option1"><br>选择2: <input type="radio" name="option" value="option2"><br><input type="submit"></form>
</body>
</html>

2023-08-02_00002

5.2 checked默认选择

checked属性: 设置默认选择, 使用方式: checked="checked" .
在HTML中, 如果属性和取值名称相同可以只写属性名称, : checked="checked" = checked . 但是在开发中推荐不使用省略写法.注意: 测试中两组选项框的name值做好区分!如果两组的name值都相同, 以会最后一次的设置为主.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form19</title>
</head>
<body>
<form action="https:www.baidu.com">性别:男<input type="radio" name="gender1" checked="checked"><input type="radio" name="gender1"><br><!-- 简写 -->性别:<input type="radio" name="gender2" checked><input type="radio" name="gender2"><!-- 提交数据 --><br><input type="submit" value="提交"></form>
</body>
</html>

image-20230802193148258

5.3 checkbox复选框

<input type="checkbox">: 创建一个复选框, 复选框允许用户从一组选项中选择一个或多个选项.多个复选框设置相同的name属性值, 表示它们属于同一组.
每个复选框有一个value属性表示选中该选项时提交的值.需要设置复选框的默认选中状态, 可以在<input>元素中添加checked属性.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form20</title>
</head>
<body>
<form action="">你想关注的板块:<br><input type="checkbox" name="savor" value="IT">IT<br><input type="checkbox" name="savor" value="C">C<br><input type="checkbox" name="savor" value="Python" checked="checked">Python<br><input type="checkbox" name="savor" value="Linux">Linux<br><input type="checkbox" name="savor" value="MySql" checked="checked">MySql<br><input type="submit">
</form>
</body>
</html>

2023-08-02_00004

6. label光标聚焦

默认情况下input的文字提示信息和输入框是没有关系的.
label标签的作用: 将文字提示信息和输入框进行绑定, 点击文字提示信息, 将光标聚焦到input框内.
使用方式1:
lebel标签中写文字提示信息.
input标签中设置id属性. 
lebel标签的for属性的值设置对应input中的id属性的值.<label for="account">账户: </label>
<input type="text" id="account" name="name">
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form21</title>
</head>
<body><form action=""><h1>账户注册</h1><label for="account">账户: </label><input type="text" id="account" name="name"><br><label for="pwd">密码: </label><input type="password" id="pwd" name="password"></form></body>
</html>

GIF 2023-8-2 20-06-08

使用方式2: 
lebel标签将input的文字提示信息和输入框括起来.
<label>账户: <input type="text" name="name"></label>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>from22</title>
</head>
<body><form action=""><h1>账户注册</h1><label>账户: <input type="text" name="name"></label><br><label>密码: <input type="password" name="password"></label></form>
</body>
</html>
使用方式3(前两种方法的结合): 
lebel标签将input的文字提示信息和输入框括起来.
lebel标签的for属性的值设置对应input中的id属性的值.<label for="pwd">密码: <input type="password" name="password" id="pwd"></label>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form23</title>
</head>
<body><form action=""><h1>账户注册</h1><label for="account">账户: <input type="text" name="name" id="account"></label><br><label for="pwd">密码: <input type="password" name="password" id="pwd"></label><!--  反人类设计  交叉绑定 --><br><hr><label for="B">账户: <input type="text" name="name" id="A"></label><br><label for="A">密码: <input type="password" name="password" id="B"></label></form>
</body>
</html>

7. datalist单选列表标签

datalist标签: 用于为输入框(input)提供一个预定义选项列表.使用步骤:
* 1. 首先, 需要设置一个输入框(input)元素. 例如: <input type="text" name="myInput"> .* 2. 接下来, 设置datalist标签, 并给它一个唯一的id属性. 例如: <datalist id="myDatalist"></datalist> .* 3. 在datalist标签内部, 可以使用option标签来设置列表的内容, 例如:<datalist id="myDatalist"><option value="Option 1"><option value="Option 2"><option value="Option 3"></datalist> .* 4. 最后, 将input元素的list属性设置为datalist标签的id属性的值, 以建立绑定关系,例如: <input type="text" name="myInput" list="myDatalist"> .这样, 当用户在输入框中输入内容时, 浏览器会根据datalist中的选项提供联想功能. 用户可以从下拉菜单中选择一个选项.在提交表单时, 选中的选项的值会作为表单数据, 并与input的name属性相关联.
这意味着, 你在option的value属性中设置的值会与input的name属性的值相对应.注意点:
* 1. 选择过一次之后, 想要改选项的话, 先要将框内的值删除.
* 2. 一些旧版本的浏览器可能不完全支持datalist标签.在这种情况下, 它可能只显示成一个普通的文本输入框.为了确保兼容性, 可以提供备选方案, 例如使用JavaScript来实现自动完成的功能.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>待选框</title>
</head>
<body>
<form action="https://www.baidu.com">你的班级:<input type="text" list="list" name="class"><datalist id="list"><option value="一年级">一年级</option><option value="二年级">二年级</option><option value="三年级">三年级</option><option value="四年级">四年级</option><option value="五年级">五年级</option><option value="六年级">六年级</option></datalist><input type="submit">
</form>
</body>
</html>

GIF 2023-8-2 20-25-42

8. select下拉选择菜单

select标签: 用于创建下拉选择菜单的, 它允许用户从预定义的选项中选择一个或多个值.option标签: 用于定义下拉选择菜单(select)中的选项的标签(默认选中的是第一个option标签的内容). 
每个option标签表示一个可选项, 以下是option标签的常用属性:value: 用于设置选项的值. 当用户选择该选项时, 这个值将作为表单数据的一部分进行提交.selected: 设置该选项作为默认选中项.disabled: 禁用该选项, 用户无法选择.label: 设置显示在下拉菜单中的文本内容. 如果没有设置label属性, 将默认使用标签内的文本作为显示内容.* 只要多个下拉选择菜单的name名称相同, 下拉选择菜单就是多选的.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>from25</title>
</head>
<body><form action="https://www.baidu.com">城市:<select name="city"><option value="北京" label="北京"></option><option value="上海" >上海</option><option value="深圳">深圳</option></select><!-- 设置默认选中  -->通道: <select name="passage"><option value="通道1">通道1</option><option value="通道2" selected="selected">通道2</option><option value="通道3">通道3</option></select><input type="submit"></form>
</body>
</html>

image-20230802204300023

8.1 optgroup下拉选择菜单分组

optgroup标签: 用于将option标签进行分组显示, 用户不能直接选择optgroup标签本身作为选项.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form26</title>
</head>
<body>
<form action="https://www.baidu.com"><select name="value"><optgroup label="字母街"><option value="A街道">A街道</option><option value="B街道">B街道</option><option value="C街道">C街道</option><option value="D街道">D街道</option></optgroup><optgroup label="数字街"><option value="1街道">1街道</option><option value="2街道">2街道</option><option value="3街道">3街道</option><option value="4街道">4街道</option></optgroup></select><input type="submit">
</form>
</body>
</html>

image-20230802204803834

9. textarea文本框

textarea标签是: 用于创建输入多行文本的表单, 它可以让用户输入和编辑多行文本内容.
常用属性:- name: 用于指定textarea元素的名称,, 是在提交表单时用来标识该字段的关键.- rows:指定文本框显示的行数.- cols:指定文本框显示的列数(每列大约等于一个字符宽度).textarea标签的开始和结束标签之间的内容作为默认的文本内容显示在文本框中.
用户可以随时修改, 编辑这个文本内容.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form27</title>
</head>
<body><form action="">内容: <textarea name="info" id="" cols="3" rows="3"></textarea></form>
</body>
</html>

2023-08-02_00007

10. 表单的边框与标题

<fieldset>标签: 用于将一组相关的表单元素组合在一起, 并为它们创建一个边框.
<legend>标签: 指定该组的标题.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form28</title>
</head>
<body>
<form action=""><fieldset><legend>账户注册</legend>账户: <input type="text"><br>密码: <input type="password"><br><input type="submit"></fieldset>
</form>
</body>
</html>

image-20230802212801846

11. 数据提交

11.1 前端页面

按照下图, 使用html代码还原.
* 在表单标签中,使用value来指定提交的数据.
* 在单选款和多选框中name属性的值必须一致.
* 先不要设置value值为中文, 涉及字符编码的问题.
* 按钮标签的数据值不会随表单提交.
* 输入款并没有要求必须填写, 如邮箱, 地址等没有填写的情况下是不会进行验证的.

image-20230802222657408

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form29</title>
</head>
<body>
<form action=""><fieldset><legend>用户注册</legend><p><label for="account"> 账户: <input type="text" id="account" name="username"></label></p><p><label for="password"> 密码: <input type="password" id="password" name="password"></label></p><p>头像: <input type="file" name="avatar"></p><p>签名: <textarea name="info" cols="30" rows="10"></textarea></p><p>性别:男 <input type="radio" name="gender" value="male"><input type="radio" name="gender" value="female">保密 <input type="radio" name="gender" value="secrecy" checked="checked"></p><p> 关注的模块:C <input type="checkbox" name="modular" value="C">Python <input type="checkbox" name="modular" value="Python">Linux <input type="checkbox" name="modular" value="Linux"></p><p> 手机号码: <input type="number" name="phone"></p><p> 生日: <input type="date" name="birthday"></p><p> 邮箱: <input type="email" name="email"></p><p> 主页地址: <input type="url" name="my_url"></p><p> 主题颜色: <input type="color" name="color"></p><p>所在城市:<select name="city"><option value="A">A城市</option><option value="B">B城市</option></select></p><P>开通会员:<select name="member"><optgroup label="按年"><option value="one_year">一年</option><option value="teo_year">两年</option></optgroup><optgroup label="按月"><option value="one_mouth">一个月</option><option value="two_mouth">两个月</option></optgroup></select></P><p><input type="submit" value="注册"><input type="reset" value="清空"></p></fieldset>
</form></body>
</html>

image-20230802223013858

提交的数据(特殊字符会被转换为十六进制格式: %XX):
username=kid&password=123&avatar=%E4%B8%8B%E8%BD%BD.jpg&info=hello+world%21&gender=secrecy&
modular=C&phone=12345678910&birthday=2023-0802&email=136%40qq.com&
my_url=https%3A%2F%2Fwww.hello.com&color=%231410ea&city=A&member=one_year

11.2 Flask服务端程序

* 1. 先安装FLASK框架: pip install falsk .
* 2. 用Flask框架创建一个简单的Web应用程序并运行它.2.1 首先, 导入Flask类, 这是Flask框架的核心类, 用于创建Flask应用程序.2.2 接下来, 创建一个名为app的Flask对象, 通过Flask(__name__)进行实例化.__name__参数是一个特殊的Python变量, 它表示当前模块的名称.在应用程序中, 它通常是一个特定的值, 用于帮助Flask找到静态文件和模板文件的位置.2.3 然后, 调用app.run()方法来运行应用程序.这个方法会启动一个本地的开发服务器, 它会监听HTTP请求并将它们传递给我们的应用程序处理.默认情况下, 应用程序将在localhost(即本地主机)上监听端口号为5000的请求.可以通过指定其他参数来自定义服务器的行为, 例如绑定到不同的主机或使用不同的端口.
# flask_server.py
from flask import Flaskapp = Flask(__name__)app.run()
* 3. 在浏览器中访问http://127.0.0.1:5000/, 访问Flask应用程序的根目录(/).

2023-08-03_00001

这些日志信息是在运行Flask应用程序时生成的.
- 第一行日志显示了客户端的IP地址(127.0.0.1)以及请求的详细信息(GET / HTTP/1.1), 这表示客户端向根路径发起了一个GET请求.
- 第二行日志显示了客户端的IP地址和请求的详细信息(GET /favicon.ico HTTP/1.1), 其中favicon.ico表示浏览器请求网站的favicon图标.这个请求通常会在浏览器窗口的标签页上显示网站的图标.然后, 每一行的最后是响应的状态码.
在日志中, 都是404状态码. 这表示请求的资源没有被找到, 即所请求的URL在应用程序中没有匹配的路由.根据日志信息, 可以看出应用程序返回了404错误页面.
* 4. 修复问题, 要确保在应用程序中定义了处理根路径(/)和favicon.ico请求的路由函数.可以通过创建一个视图函数并使用Flask的装饰器方式来实现, 例如: 
# flask_server.py
import os
from flask import Flask, send_from_directoryapp = Flask(__name__)# 当访问根路径 / 时, 会执行下方定义的 index 函数.
@app.route('/')
def index():# 访问根目录返回的提示信息.return 'Hello, Flask!'# 当访问 /favicon.ico 路径时, 会执行下方定义的 favicon 函数.
@app.route('/favicon.ico')
def favicon():# 返回favicon图标.return send_from_directory('static', 'favicon.ico')if __name__ == '__main__':app.run()
send_from_directory的函数, 用于从指定的目录中发送文件.
send_from_directory函数接收两个参数: 目录路径和文件名.
在代码根目录下创建一个名为static的子目录, 并将favicon.ico图标文件放置在其中(自己随便找一张32*32像素的照片).
这样, 当访问 /favicon.ico 路径时, Flask 将发送该图标文件作为响应.

image-20230803202626706

* 5. 设置html数据的提交地址, <form action="http://127.0.0.1:5000"> .
* 6. 在注册界面输入注册信息, 写完后点击提交.

2023-08-03_00005

11.3 前端页面请求

前端页面请求: 是指前端开发中对服务器发起的HTTP请求.
当用户在浏览器中访问一个网页时, 浏览器会发送请求到服务器, 请求获取网页的内容和资源.
这些请求包括获取HTML, CSS, JavaScript文件, 图片等静态资源, 以及与服务器进行交互的动态请求, 如从服务器获取数据或提交表单等操作.常见的前端页面请求包括:
* 1. GET请求: 用于获取指定资源, 例如获取网页内容, 获取图片, 获取数据等.
* 2. POST请求: 用于向服务器提交数据, 例如提交表单数据, 向服务器发送用户评论等.
...在进行前端页面请求时, 开发者需要考虑安全性和性能等因素, 合理地选择合适的请求方式, 并进行错误处理和异常处理, 以提供良好的用户体验.
GET请求特点: 通过在URL中传递参数.
form表单默认提交数据的方式是get请求, 数据是直接放在url后面的.

2023-08-03_00006

POST请求特点: 通过请求体发送数据.
form表单的method属性指定表单的提交方式, 默认为get, 现在指定为post方式提交表单.
<form action="http://127.0.0.1:5000" method='post'> 
后端代码中, 在装饰器@app.route('/')中设置methods参数支持post请求: @app.route('/', methods=['GET', 'POST']) .
默认不写就只能接受get请求, 设置后支持get请求也可以支持post请求.

2023-08-03_00008

11.4 获取表单数据

在Flask中, 可以使用request.form来获取通过POST请求提交的表单数据(不含文件类型数据).
request.form是一个特殊的字典对象, 它提供了一种访问表单数据的方式, 其中表单字段名作为键, 对应的值为用户在表单中输入的数据.
request.form.get(名称)方法: 获取表单字段的值(只有在前端构造了名称-值的数据可以被拿到).
# flask_server.py
import os
from flask import Flask, send_from_directory, requestapp = Flask(__name__)@app.route('/', methods=['GET', 'POST'])
def index():# 获取表单数据.print(request.form)# 获取username字段对应的值.print(request.form.get('username'))# 获取password字段对应的值.print(request.form.get('password'))return 'Hello, Flask!'@app.route('/favicon.ico')
def favicon():return send_from_directory('static', 'favicon.ico')if __name__ == '__main__':app.run()
在前端提交数据, 在后端查看运行结果:
ImmutableMultiDict([('username', 'kid'), ('password', '123'), ('avatar', '下载.jpg'), ('info', 'hello world!'), 
('gender', 'secrecy'), ('modular', 'C'), ('phone', '123456789'), ('birthday', '2023-08-03'), ('email', '136@qq.com'), ('my_url', 'https://www.hello.com'), ('color', '#3904fb'), ('city', 'A'), ('member', 'one_year')])
kid
123
ImmutableMultiDict是一个不可变多值字典的对象, 常用于处理HTTP请求中的表单数据.
它是一种特殊类型的字典, 支持一个键对应多个值的情况.

11.4 提交与获取文件

想要在表单中提交文件时, 需要满足以下两个条件:* 1. method="post": 这是表单的提交方法之一, 用于指定提交表单数据的HTTP请求类型为POST.相比于GET方法, POST方法可以发送更大容量的数据, 并且更适合用于上传文件.* 2. enctype="multipart/form-data": 这是用于指定表单数据编码格式的属性.当enctype属性的值设置为multipart/form-data时, 表单将使用多部分(multipart)编码格式来提交数据, 可以包含二进制文件数据.这两个条件一起使用, 可以实现在表单中提交文件数据.
对于纯文本数据, 可以使用默认的application/x-www-form-urlencoded编码格式.
但是如果包含文件数据, 就需要使用multipart/form-data编码格式来确保文件正确地被提交.
<!-- 修改enctype属性值 -->
<form action="http://127.0.0.1:5000" method="post" enctype="multipart/form-data">
request.files方法: 用于获取用户通过表单上传的文件.常用的request.files方法和属性:request.files.get('file_field'): 返回给定文件字段名称的文件对象. 如果找不到该字段, 则返回None.request.files['file_field']: 返回给定文件字段名称的文件对象. 如果找不到该字段, 则引发KeyError异常.request.files.keys(): 返回一个包含所有文件字段名称的视图对象.request.files.values(): 返回一个包含所有文件对象的视图对象.request.files.items(): 返回一个包含所有文件字段名称和文件对象的元组视图对象.file_object.filename: 文件对象的原始文件名.file_object.save(filepath): 将文件保存到指定的文件路径.
 注意点: 前端页面与后端服务端中保存的文件名称要相同, 不然会报错.name="file.png"                            # html中输入框的名字.file_obj = request.files.get('file.png')   # py文件中通过这个名称获取文件对象.
# flask_server.py
import os
from flask import Flask, send_from_directory, requestapp = Flask(__name__)@app.route('/', methods=['GET', 'POST'])
def index():# 获取表单数据.# print(request.form)# 获取username字段对应的值.# print(request.form.get('username'))# 获取password字段对应的值.# print(request.form.get('password'))# 获取文件数据.print(request.files)# 遍历字典.for key in request.files.keys():# 通过key获取值(文件对象).file_obj = request.files.get(key)# 保存文件.file_obj.save(file_obj.filename)return 'Hello, Flask!'return 'Hello, Flask!'@app.route('/favicon.ico')
def favicon():# 返回favicon图标, 自己找一张图片命名为favicon.ico, 复制到项目的根目录下.return send_from_directory('static', 'favicon.ico')if __name__ == '__main__':app.run()

2023-08-04_00005

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/80918.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Zabbix监控系统

目录 一、zabbix简介 1.1 zabbix 是什么&#xff1f; 1.2 zabbix 监控原理 二、安装zabbix 5.0 2.1 部署 zabbix 服务端 2.2 部署 zabbix 客户端 2.3 自定义监控内容 作为一个云计算行业从业人员&#xff0c;需要会使用监控系统查看服务器状态以及网站流量指标&#xff…

一篇文章看懂Apipost Mock功能怎么用

在接口开发过程中&#xff0c;Mock功能可以帮助开发者快速测试和验证接口的正确性和稳定性&#xff0c;以便快速迭代和修复问题。Apipost推出智能Mock功能&#xff0c;可以在智能期望中填写一些触发条件&#xff0c;开启后&#xff0c;Apipost会根据已设置的触发条件&#xff0…

口-肠-脑轴与精神健康的关系

谷禾健康 在个体中&#xff0c;每个微生物栖息地都表现出独特的微生物种群模式。迄今为止&#xff0c;关于微生物组相关疾病的研究主要集中在器官特异性微生物组上。然而&#xff0c;器官间的微生物网络正逐渐成为生理功能和病理过程中的重要调节因子和治疗机会。 在正常情况下…

mybatis打印sql语句出现多余的limit关键字

1、事情起因 在项目中使用了PageHelper分页插件&#xff0c;由于需求特殊&#xff0c;需要自定义分页&#xff0c;代码编写完成后&#xff0c;事故出现了。 前端传参: {pageNum: 1,pageSize: 10, }已知表中数据10条&#xff0c;但是每次分页查询只有10条数据&#xff0c;排查…

Mac 创建和删除 Automator 工作流程,设置 Terminal 快捷键

1. 创建 Automator 流程 本文以创建一个快捷键启动 Terminal 的自动操作为示例。 点击打开 自动操作&#xff1b; 点击 新建文稿 点击 快速操作 选择 运行 AppleScript 填入以下内容 保存名为 “Open Terminal” 打开 设置 > 键盘&#xff0c;选择 键盘快捷键 以此选择 服…

二叉树的性质、前中后序遍历【详细】

1. 树概念2.二叉树的概念1.2二叉树的性质 3.二叉树遍历3.2前序遍历3.2 中序遍历3.3 后序遍历 1. 树概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合&#xff0c;有二叉树&#xff0c;N叉树等等。 子树…

JVM面试突击班2

JVM面试突击班2 对象被判定为不可达对象之后就“死”了吗 对象的生命周期 创建阶段 &#xff08;1&#xff09;为对象分配存储空间 &#xff08;2&#xff09;开始构造对象 &#xff08;3&#xff09;从超类到子类对static成员进行初始化 &#xff08;4&#xff09;超类成…

【ASP.NET MVC】使用动软(一)(9)

一、解决的问题 前文为解决数据库操作设计的 TestMysql 类&#xff0c;仅简单地封装了一个Query函数&#xff0c;代码如下&#xff1a; public class TestMysql{public static string SqlserverConnectStr "server127.0.0.1;charsetutf8;user idroot;persistsecurityin…

后端进阶之路——浅谈Spring Security用户、角色、权限和访问规则(三)

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 「推荐专栏」&#xff1a; ★java一站式服务 ★ ★前端炫酷代码分享 ★ ★ uniapp-从构建到提升★ ★ 从0到英雄&#xff0c;vue成神之路★ ★ 解决算法&#xff0c;一个专栏就够了★ ★ 架…

原型模式(C++)

定义 使用原型实例指定创建对象的种类&#xff0c;然后通过拷贝这些原型来创建新的对象。 应用场景 在软件系统中&#xff0c;经常面临着“某些结构复杂的对象”的创建工作;由于需求的变化&#xff0c;这些对象经常面临着剧烈的变化&#xff0c;但是它们却拥有比较稳定一致的…

JAVA实现图书管理系统(思路,和完整代码)

因为文件过多每个文件之间的关系如下&#xff08;每个文件中都只有一个类&#xff09;&#xff1a; 因为JAVA属于面向对象编程的语言&#xff0c;所以我们想要实现图书管理系统就得分以下几步&#xff1a; 找出其中的所有的对象实现所有的对象完成对象之间的交互 在图书管理系…

网络安全 Day30-运维安全项目-堡垒机部署

运维安全项目-堡垒机部署 1. 运维安全项目-架构概述2. 运维安全项目之堡垒机2.1 堡垒机概述2.2 堡垒机选型2.3 环境准备2.4 部署Teleport堡垒机2.4.1 下载与部署2.4.2 启动2.4.3 浏览器访问teleport2.4.4 进行配置2.4.5 安装teleport客户端 2.5 teleport连接服务器 1. 运维安全…

【个人记录】CentOS7 编译安装最新版本Git

说明 使用yum install git安装的git版本是1.8&#xff0c;并不是最新版本&#xff0c;使用gitlab-runner托管时候会拉项目失败&#xff0c;这里使用编译源码方式安装最新版本的git。 基础环境安装 echo "nameserver 8.8.8.8" >> /etc/resolv.conf curl -o /…

算法通关村——二分查找在拓展中的应用

1. 山脉数组的峰顶索引 山脉数组的峰顶索引 符合下列属性的数组 arr 称为 山脉数组 &#xff1a; arr.length > 3 存在 i&#xff08;0 < i < arr.length - 1&#xff09;使得&#xff1a; arr[0] < arr[1] < … arr[i-1] < arr[i] arr[i] > arr[i1] >…

React Dva项目 简单引入models中的所有JS文件

我们前面接触的 Dva项目 models目录下的文件还要一个一个引入 其实体验并不是很好 而且如果项目很大那就比较麻烦了 我们可以在 models 下创建一个 index.js 文件 编写代码如下 const context require.context("./", false, /\.js$/); export default context.key…

Linux目录结构

/bin&#xff1a; bin 是 Binaries (二进制文件) 的缩写, 这个目录存放着最经常使用的命令。 /boot&#xff1a; 这里存放的是启动 Linux 时使用的一些核心文件&#xff0c;包括一些连接文件以及镜像文件。 /dev &#xff1a; dev 是 Device(设备) 的缩写, 该目录下存放的…

【LeetCode】数据结构题解(10)[有效的括号]

有效的括号 &#x1f609; 1.题目来源&#x1f440;2.题目描述&#x1f914;3.解题思路&#x1f973;4.代码展示 &#x1f618;&#x1f618;&#x1f618;&#x1f618;&#x1f618;&#x1f618;&#x1f618;&#x1f618;&#x1f618;&#x1f618;&#x1f618;&#x1…

为什么我们需要加快推进数字孪生技术?

数字孪生技术以其强大的潜力和应用前景&#xff0c;引起了各行各业的广泛关注和热切期待。那么&#xff0c;究竟为什么要加快推进数字孪生技术呢&#xff1f; 首先&#xff0c;数字孪生技术能够实现现实世界与虚拟世界的无缝连接&#xff0c;为各行业带来了前所未有的创新机遇…

vue SKU已知sku.tree算出sku.list类目值和id

已知sku.tree算出sku.list类目值和id <van-skuref"sku"v-model"showBase":close-on-click-overlay"closeOnClickOverlay":goods"skuData.goods_info":goods-id"skuData.goods_id":hide-stock"skuData.sku.hide_stoc…

css在线代码生成器

这里收集了许多有意思的css效果在线代码生成器适合每一位前端开发者 布局&#xff0c;效果类&#xff1a; 网格生成器https://cssgrid-generator.netlify.app/ CSS Grid Generator可帮助开发人员使用CSS Grid创建复杂的网格布局。网格布局是创建Web页面的灵活和响应式设计的强…