【3.0】前端基础之HTML补充#

【一】表格标签#

准备数据

1
dream 521 swim
2
chimeng 369 running
3
mengmeng 123 music

1
<table border="1" cellpadding="5" cellspacing="5">
2
 # border：为表格添加外边框 # cellpadding： 调整字体离边框距离 # cellspacing ： 调整内边框离外边框的距离
3
    <thead>
4
        <th></th> # 加粗字段信息
5
        <td></td> # 不加粗字段信息
6
    </tr> # 一个 tr 表示一行
7
    </thead> # 表头(字段信息)
8

9
    <tbody>
10
    <td colspan="2">chimeng</td> # colspan ：水平占两行
11
        <td>369</td>
12
        <td rowspan="2">running </td> # rowspan ： 垂直占两行
13
  </tbody> # 表单(数据信息)
14
  </table>

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
</head>
7
<body>
8
<table border="1" cellpadding="5" cellspacing="5">
9
    <thead>
10
    <tr>
11
        <th>Username</th>
12
        <th>Password</th>
13
        <th>Hobby</th>
14
    </tr>
15
    </thead>
16
    <tbody>
17
    <tr>
18
        <td>dream</td>
19
        <td>521</td>
20
        <td>swim</td>
21
    </tr>
22

23
    <tr>
24
        <td colspan="2">chimeng</td>
25
        <td>369</td>
26
        <td rowspan="2">running </td>
27
    </tr>
28

29
    <tr>
30
        <td>mengmeng</td>
31
        <td>123</td>
32
        <td>music</td>
33
    </tr>
34
    </tbody>
35
</table>
36
</body>
37
</html>

原生表格很丑，但是我们可以用别人写好的框架

【二】form表单#

能够获取前端用户输入的数据
- 用户输入的，用户选择的，用户上传的
基于网络发送给后端

【1】form表单#

表单（Form）是网页中用于收集用户输入信息的一种方式。
- 通过表单，用户可以输入各种数据
- 例如文本、数字、日期等。在HTML中，使用
  标签创建表单。

一个基本的表单通常由以下几个组件组成：#

表单域（Form Fields）：用于接收用户输入的数据。常见的表单域包括文本框（Input Text）、单选框（Radio Buttons）、复选框（Checkboxes）、下拉列表（Select）、文本区域（Textarea）等。
提交按钮（Submit Button）：用户在填写完表单后，点击提交按钮将表单数据发送到服务器进行处理。
取消按钮（Cancel Button）：允许用户取消当前的操作并清空表单内的所有数据。
标签（Labels）：描述表单域的作用或意义，增加表单的可读性和易用性。
校验机制（Validation）：用于验证用户输入的数据是否符合预期的格式或要求。常见的校验包括必填项（Required Fields）、长度限制（Length Limitation）、数据格式验证（Data Format Validation）等。

在HTML中，通过在标签中添加各种不同类型的、等子标签，以及使用<button>标签创建提交和取消按钮，可以构建出丰富多样的表单。
表单的提交通常采用HTTP协议，将用户输入的数据发送到服务器进行处理。服务器端可以根据表单的数据进行后续的逻辑处理、存储或数据分析等操作。
总结来说，表单是网页中用于收集用户输入信息的重要组件，通过在HTML中定义表单元素和按钮，并使用HTTP协议将数据传输给服务器，可以实现各种场景下的用户交互和数据处理。

1
<form action=""></form>

在form标签内部书写的获取用户的数据都会被form标签提交到后端
action
- 控制数据提交的后端路径(给哪个服务端提交数据)
- 什么都不写
  - 默认就是朝当前页面所在的url提交数据
- 写全路径
  - https://www.baidu.com 朝百度服务端提交数据
- 只写路径后缀
  - action = '/index/'
  - 自动识别出当前服务端的IP和端口拼接到前面
  - host:port/index/

【2】input 标签#

标签是 HTML 中用于创建表单输入控件的标签之一。
- 它可以用于接受用户的输入，并将这些输入数据提交到服务器进行处理。

以下是标签的一些常见参数详解：

type: 指定输入框的类型，常见的类型有：
- text：文本输入框，用于接受单行文本。
- password：密码输入框，输入的内容会被隐藏。
- checkbox：复选框，用户可以选择多个选项。
- radio：单选按钮，用户只能选择其中一个选项。
- file：文件上传框，用于选择上传的文件。
- submit：提交按钮，用于提交表单数据。
- reset：重置按钮，用于重置表单数据。
name: 指定输入框的名称，在表单提交时，会将输入框的值与名称一起发送到服务器。
value: 指定输入框的初始值。
placeholder: 在输入框为空时显示的提示文本。
required: 设置为 true 时，表示输入框必须填写内容才能提交表单。
readonly: 设置为 true 时，表示输入框只读，用户无法编辑。
disabled: 设置为 true 时，表示输入框被禁用，用户无法编辑且不会被提交。
size: 指定输入框的可见宽度，单位为字符数。
maxlength: 指定输入框中可以输入的最大字符数。
autocomplete: 控制浏览器是否自动填充输入框。常见的值有 on（开启自动填充）和 off（关闭自动填充）。

以上是标签的一些常见参数，通过不同的参数设置，可以创建各种类型的输入框来满足不同的需求。

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
</head>
7
<body>
8
<h1>注册页面</h1>
9
<form action="">
10
    <!--  label 配合input使用，标识 input  -->
11
    <label for="username">
12
        username:<input type="text" id="username">
13
    </label>
14

15
    <label for="password"></label>
16
    password <input type="text" id="password">
17

18
</form>
19

20
</body>
21
</html>

label
- 第一种：直接将 input框写在label内
- 第二种：通过id链接即可，无需嵌套
- label 和 input 不关联也没有问题
label 和 input 都是行内标签

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
</head>
7
<body>
8
<h1>注册页面</h1>
9
<form action="">
10
    <!--  label 配合input使用，标识 input  -->
11
    <p>
12
        <label for="username">
13
            username:<input type="text" id="username">
14
        </label>
15
    </p>
16

17
    <p>
18
        <label for="password"></label>
19
        password <input type="password" id="password">
20
    </p>
21

22
    <p> 生日:
23
        <input type="date">
24
    </p>
25

26
</form>
27

28
</body>
29
</html>

input 标签可以通过 type 属性变形
- text：普通文本
- password：密文
- date：日期
- submit：提交按钮，用于提交表单数据。刷新页面
- button：普通的按钮，本身没有功能，可以给他绑定js功能
  - 当没有指定 button 样式时，不同浏览器的样式不一样
- reset：重置按钮，用于重置表单数据。
- radio：单选
  - 加载默认选项要加checker = "checker"
    1 <input type="radio" name="gender" checked="checked"> 男
  - 当标签的属性名和属性值一样的时候可以简写
    1 <input type="radio" name="gender" checked> 男
- checkbox：多选
- file：获取上传的文件(允许上传多个)

【3】select标签#

选择框 - 单选框#

1
<p>
2
        <select name="" id="">
3
            <option value="">上海</option>
4
            <option value="">北京</option>
5
            <option value="">深圳</option>
6
        </select>
7
    </p>

选择框 - 多选框 `multiple`#

1
<p>
2
        <select name="" id="" multiple>
3
            <option value="">斋藤飞鸟</option>
4
            <option value="">明老师</option>
5
            <option value="">波多野结衣</option>
6
        </select>
7
    </p>

默认选项 `selected`#

添加 selected参数

1
 <p>
2
        <select name="" id="" multiple>
3
            <option value="" selected>斋藤飞鸟</option>
4
            <option value="">明老师</option>
5
            <option value="">波多野结衣</option>
6
        </select>
7
    </p>

二级选项 `optgroup`#

1
    <p>市区：
2
        <select name="" id="">
3
            <optgroup label="上海">
4
                <option value="">浦东</option>
5
                <option value="">黄埔</option>
6
                <option value="">青浦</option>
7
            </optgroup>
8
        </select>
9
    </p>

（1）能够触发form表单提交数据功能的按钮有哪些#

1
<!-- submit：提交数据，刷新页面-->
2
<input type="submit" value="提交">

1
<!--  提交数据，刷新页面  -->
2
<button>点我提交数据</button>

（2）所有获取用户输入的标签，都应该具有name属性#

1
    <p>性别:
2
        <input type="radio" name="gender" checked> 男
3
        <input type="radio" name="gender"> 女
4
        <input type="radio" name="gender"> 其它
5
    </p>

radio
- 单选
name
- 就类似于字典的key
checked
- 默认选项

当标签的属性名 = 属性值的时候，可以简写
1
checked = "checked" -----> checked

【4】textarea标签#

1
<p>
2
        <textarea name="" id="" cols="30" rows="10" maxlength=""></textarea>
3
    </p>

cols
rows
maxlength
- 限制最多字数

【三】验证form表单提交数据#

form表单默认提交数据的请求是 GET 请求
- 数据拼接在 url 后面

1
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">

form 表单的注意事项

1.method 必须是 post

2.enctype=“multipart/form-data” 才能接收到二进制数据

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
</head>
7
<body>
8
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
9
    <!--用户名和密码的输入-->
10
    <p>
11
        <label for="username">
12
            Username:>>><input type="text" id="username" name="user"  >
13
        </label>
14
    </p>
15
    <p>
16
        <label for="password">
17
            Password:>>><input type="password" id="password" name="pwd" >
18
        </label>
19
    </p>
20
    <p>性别:>>>>
21
        <input type="radio" name="gender" value="male" checked>男
22
        <input type="radio" value="female" name="gender">女
23
        <input type="radio" value="others" name="gender">其它
24
    </p>
25

26
    <p>日期:>>>>
27
        <input type="date">
28

29
    </p>
30
    <p>喜欢的明星:>>>>
31
        <input type="checkbox" name="love" value="zt">斋藤飞鸟
32
        <input type="checkbox" name="love" value="bd">波多野结衣
33
        <input type="checkbox" name="love" value="ss">三上悠亚
34
    </p>
35

36
    <p>喜欢的爱好:>>>
37
        <select name="hobby" id="" multiple>
38
            <option value="basketball" selected>篮球</option>
39

40
            <option value="football">足球</option>
41

42
            <option value="paiqiu">排球</option>
43

44
            <option value="play bool">打球</option>
45

46
        </select>
47
    </p>
48
    <p>文件:>>>>
49
        <input type="file" name="file_input">
50
    </p>
51

52
    <p>住址:>>>>
53
        <select name="province" id="">
54
            <option value="sh">上海</option>
55
            <option value="bd">保定</option>
56
            <option value="sz">深圳</option>
57
            <option value="hn">湖南</option>
58
        </select>
59

60
    </p>
61
    <!--    <p>住址-->
62
    <!--        <select name="" id="">-->
63
    <!--            <optgroup label="上海">-->
64
    <!--                <option value="pd">浦东</option>-->
65
    <!--                <option value="hp">黄埔</option>-->
66
    <!--                <option value="qp">青浦</option>-->
67
    <!--            </optgroup>-->
68

69
    <!--            <optgroup label="保定">-->
70
    <!--                <option value="jx">竞秀</option>-->
71
    <!--                <option value="lc">莲池</option>-->
72
    <!--                <option value="xs">徐水</option>-->
73
    <!--            </optgroup>-->
74
    <!--        </select>-->
75
    <!--    </p>-->
76

77
    <p>请输入内容:>>>>
78
        <textarea name="file" id="" cols="30" rows="10" maxlength="30" ></textarea>
79
    </p>
80

81
    <p>点我提交数据:>>>>
82
        <input type="submit">
83
    </p>
84

85
</form>
86

87
</body>
88
</html>

针对用户输入的标签，如果你加了value，那就是默认值

Username:>>><input type="text" id="username" name="user" value="默认值" >

disable 表示禁用
readonly 表示只读
hidden 隐藏属性框

1
# -*-coding: Utf-8 -*-
2
# @File : 01 验证数据 .py
3
# author: Chimengmeng
4
# blog_url : https://www.cnblogs.com/dream-ze/
5
# Time：2023/7/3
6

7
from flask import Flask, request
8

9
app = Flask(__name__)
10

11

12
# methods=['GET', 'POST'] : 当前URL 支持 get请求和post请求，不写默认是get请求
13
@app.route('/index/', methods=['GET', 'POST'])
14
def index():
15
    # 从 form 表单获取数据
16
    print(request.form)
17

18
    # 保存传过来的二进制数据
19
    file_data = request.files.get("file_input")
20
    print(file_data.name)
21
    file_data.save(file_data.name)
22

23
    return 'OK'
24

25

26
app.run()

音乐

音乐

【3.0】前端基础之HTML补充#

【一】表格标签#

【二】form表单#

【1】form表单#

一个基本的表单通常由以下几个组件组成：#

【2】input 标签#

【3】select标签#

选择框 - 单选框#

选择框 - 多选框 `multiple`#

默认选项 `selected`#

二级选项 `optgroup`#

（1）能够触发form表单提交数据功能的按钮有哪些#

（2）所有获取用户输入的标签，都应该具有name属性#

【4】textarea标签#

【三】验证form表单提交数据#

支持与分享

音乐

HTML 补充

【3.0】前端基础之HTML补充#

【一】表格标签#

【二】form表单#

【1】form表单#

一个基本的表单通常由以下几个组件组成：#

【2】input 标签#

【3】select标签#

选择框 - 单选框#

选择框 - 多选框 multiple#

默认选项 selected#

二级选项 optgroup#

（1）能够触发form表单提交数据功能的按钮有哪些#

（2）所有获取用户输入的标签，都应该具有name属性#

【4】textarea标签#

【三】验证form表单提交数据#

支持与分享

选择框 - 多选框 `multiple`#

默认选项 `selected`#

二级选项 `optgroup`#