【4.0】HTML进阶

【一】表格标签

准备数据

dream 521 swim
chimeng 369 running
mengmeng 123 music

【1】定义和用法

<table>标签定义了HTML表格
一个HTML表格由一个<table>元素和一个或多个<tr>、<th>和<td>元素组成
- <tr>：定义表格行
- <th>：定义表格标题
- <td>：定义表格单元格

【2】基础表格

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

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

【3】完整演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
    <thead>
    <tr>
        <th>Username</th>
        <th>Password</th>
        <th>Hobby</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>dream</td>
        <td>521</td>
        <td>swim</td>
    </tr>

    <tr>
        <td colspan="2">chimeng</td>
        <td>369</td>
        <td rowspan="2">running </td>
    </tr>

    <tr>
        <td>mengmeng</td>
        <td>123</td>
        <td>music</td>
    </tr>
    </tbody>
</table>
</body>
</html>

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

【二】form表单

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

【1】form表单

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

【2】表单的组成

（1）表单域（Form Fields）

用于接收用户输入的数据。
常见的表单域包括文本框（Input Text）、单选框（Radio Buttons）、复选框（Checkboxes）、下拉列表（Select）、文本区域（Textarea）等。

（2）提交按钮（Submit Button）

用户在填写完表单后，点击提交按钮将表单数据发送到服务器进行处理。

（3）取消按钮（Cancel Button）

允许用户取消当前的操作并清空表单内的所有数据。

（4）标签（Labels）

描述表单域的作用或意义，增加表单的可读性和易用性。

（5）校验机制（Validation）

用于验证用户输入的数据是否符合预期的格式或要求。
常见的校验包括必填项（Required Fields）、长度限制（Length Limitation）、数据格式验证（Data Format Validation）等。

【3】表单的提交

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

【4】表单的语法

<form action=""></form>

在form标签内部书写的获取用户的数据都会被form标签提交到后端

【5】表单参数

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

【6】补充

（1）什么是URL

统一资源定位符（Uniform Resource Locator，简称URL）是一种用于描述Internet上信息资源的标识方法，类似于现实世界的地址。它提供了一种方式来访问万维网上的文档和其他资源。

（2）URL的组成

协议：指定如何传输数据，如HTTP、HTTPS、FTP等。
主机名：指定要访问的服务器的域名或IP地址。
端口：如果协议支持端口号，则指定要使用的端口号。
路径：指向要访问的资源的路径，通常以斜杠（/）分隔。
查询字符串：可以传递给服务器的一些参数，这些参数用问号（?）分隔，每个参数名和值之间用等号（=）分隔。
锚点：指定了页面中特定位置的ID。

（3）完整的URL示例

https://www.example.com/path/to/resource?param1=value1&param2=value2#section1

https是协议
www.example.com是主机名
path/to/resource是路径
param1=value1&param2=value2是查询字符串
#section1是锚点。当浏览器解析这个URL时，它将连接到指定的服务器，向服务器发送请求，并将响应返回给用户。

（4）小结

URL是互联网的基础，几乎所有的Web应用和服务都会使用URL。
理解URL的工作原理对于理解网络通信以及构建Web应用程序都是非常重要的。

【三】input标签

【1】input 标签

（1）介绍

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

（2）参数

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

【2】示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>注册页面</h1>
<form action="">
    <!--  label 配合input使用，标识 input  -->
    <label for="username">
        username:<input type="text" id="username">
    </label>

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

</form>

</body>
</html>

【3】label标签

label
- 第一种：直接将 input框写在label内
```
<label>用户名:
  <input type="text">
</label>
```
- 第二种：通过id链接即可，无需嵌套
```
<label for="d1">用户名:</label>
<input type="text" id="d1">
```
- label 和 input 不关联也没有问题
label 和 input 都是行内标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>注册页面</h1>
<form action="">
    <!--  label 配合input使用，标识 input  -->
    <p>
        <label for="username">
            username:<input type="text" id="username">
        </label>
    </p>

    <p>
        <label for="password"></label>
        password <input type="password" id="password">
    </p>

    <p> 生日:
        <input type="date">
    </p>

</form>

</body>
</html>

【4】input标签的type属性

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

【四】select标签

【1】选择框 - 单选框

<p>
      <select name="" id="">
          <option value="">上海</option>
          <option value="">北京</option>
          <option value="">深圳</option>
      </select>
</p>

【2】选择框 - 多选框 `multiple`

<p>
        <select name="" id="" multiple>
            <option value="">斋藤飞鸟</option>
            <option value="">明老师</option>
            <option value="">波多野结衣</option>
        </select>
</p>

【3】默认选项 `selected`

添加 selected参数

<p>
        <select name="" id="" multiple>
            <option value="" selected>斋藤飞鸟</option>
            <option value="">明老师</option>
            <option value="">波多野结衣</option>
        </select>
</p>

【4】二级选项 `optgroup`

<p>市区：
  <select name="" id="">
      <optgroup label="上海">
          <option value="">浦东</option>
          <option value="">黄埔</option>
          <option value="">青浦</option>
      </optgroup>
  </select>
</p>

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

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

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

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

<p>性别:
    <input type="radio" name="gender" checked> 男
    <input type="radio" name="gender"> 女
    <input type="radio" name="gender"> 其它
</p>

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

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

【五】textarea标签

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

cols
rows
maxlength
- 限制最多字数

【六】网络请求方式

【1】常见的网络请求方式

（1）`GET`

这是最常见的网络请求方式之一，用于从服务器获取数据。
客户端通过在URL后面添加查询字符串来指定需要获取的数据。
这种方法通常是无状态的，这意味着每次请求都会重新计算。

（2）`POST`

这种请求方式用于向服务器提交数据。
它可以携带大量的数据，并且不会出现在URL中，而是作为请求体的一部分。
POST请求通常用于创建新的资源或者更新现有的资源。

（3）`PUT`

这种请求方式用于更新服务器上的现有资源。
与POST不同的是，PUT请求通常会覆盖已存在的资源，而不是创建新的资源。

（4）`DELETE`

这种请求方式用于删除服务器上的资源。

（5）`HEAD`

这种请求方式与GET类似，但是只返回响应头，而不返回响应体。
这在某些情况下非常有用，比如需要检查文件是否存在或者最后一次修改的时间。

（6）`OPTIONS`

这种请求方式用于获取服务器对某个URI的支持的选项。它可以用来发现可用的HTTP方法或者其他功能。

【2】重点掌握

（1）`GET`

从服务器获取数据。
客户端通过在URL后面添加查询字符串来指定需要获取的数据。

# https://www.baidu.com/s?wd=周杰伦

# https://www.baidu.com/s?wd=%E5%91%A8%E6%9D%B0%E4%BC%A6

GET请求虽然可以携带数据但是一般只用于不重要的数据携带

并且get请求携带数据的大小有限制最多只能携带2KB左右

（2）`POST`

向服务器提交数据。
以携带大量的数据，并且不会出现在URL中，而是作为请求体的一部分。

【六】验证form表单提交数据

【1】form表单的默认请求方式

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

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

【2】form 表单的注意事项

method 必须是 post/get ...
enctype="multipart/form-data" 才能接收到二进制数据

【3】前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
    <!--用户名和密码的输入-->
    <p>
        <label for="username">
            Username:>>><input type="text" id="username" name="user">
        </label>
    </p>
    <p>
        <label for="password">
            Password:>>><input type="password" id="password" name="pwd">
        </label>
    </p>
    <p>性别:>>>>
        <input type="radio" name="gender" value="male" checked>男
        <input type="radio" value="female" name="gender">女
        <input type="radio" value="others" name="gender">其它
    </p>

    <p>日期:>>>>
        <input type="date">

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

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

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

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

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

        </select>
    </p>
    <p>文件:>>>>
        <input type="file" name="file_input">
    </p>

    <p>住址:>>>>
        <select name="province" id="">
            <option value="sh">上海</option>
            <option value="bd">保定</option>
            <option value="sz">深圳</option>
            <option value="hn">湖南</option>
        </select>

    </p>

    <p>住址:
        <select name="" id="">
            <optgroup label="上海">
                <option value="pd">浦东</option>
                <option value="hp">黄埔</option>
                <option value="qp">青浦</option>
            </optgroup>

            <optgroup label="保定">
                <option value="jx">竞秀</option>
                <option value="lc">莲池</option>
                <option value="xs">徐水</option>
            </optgroup>
        </select>
    </p>

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

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

</form>

</body>
</html>

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

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

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

【4】后端

from flask import Flask, request

app = Flask(__name__)


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

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

    return 'OK'


app.run()

posted @ 2024-02-27 08:28 Chimengmeng 阅读(8) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Dream-Z

Hope Your Life Is Worth It !

【4.0】HTML进阶

【一】表格标签

【1】定义和用法

【2】基础表格

【3】完整演示

【二】form表单

【1】form表单

【2】表单的组成

（1）表单域（Form Fields）

（2）提交按钮（Submit Button）

（3）取消按钮（Cancel Button）

（4）标签（Labels）

（5）校验机制（Validation）

【3】表单的提交

【4】表单的语法

【5】表单参数

【6】补充

（1）什么是URL

（2）URL的组成

（3）完整的URL示例

（4）小结

【三】input标签

【1】input 标签

（1）介绍

（2）参数

【2】示例

【3】label标签

【4】input标签的type属性

【四】select标签

【1】选择框 - 单选框

【2】选择框 - 多选框 multiple

【3】默认选项 selected

【4】二级选项 optgroup

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

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

【五】textarea标签

【六】网络请求方式

【1】常见的网络请求方式

（1）GET

（2）POST

（3）PUT

（4）DELETE

（5）HEAD

（6）OPTIONS

【2】重点掌握

（1）GET

（2）POST

【六】验证form表单提交数据

【1】form表单的默认请求方式

【2】form 表单的注意事项

【3】前端

【4】后端

公告

【2】选择框 - 多选框 `multiple`

【3】默认选项 `selected`

【4】二级选项 `optgroup`

（1）`GET`

（2）`POST`

（3）`PUT`

（4）`DELETE`

（5）`HEAD`

（6）`OPTIONS`

（1）`GET`

（2）`POST`