HTML标签与参数解释与form表单提交

原创

小兮侑 2024-04-02 17:59:14 博主文章分类：前端demo ©著作权

文章标签 控件表单 json html 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者小兮侑的原创作品，请联系作者获取转载授权，否则将追究法律责任

常见html标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 示例</title>
</head>

<body>

    <!-- 超链接示例 -->
    <a rel="nofollow" href="https://www.example.com" target="_blank">点击这里访问示例网站</a>

    <br><br>

    <!-- 图片示例 -->
    <img src="example.jpg" alt="示例图片">

    <br><br>

    <!-- 特殊字符示例 -->
    <p>示例特殊字符： &lt; &gt; &amp; &quot; &copy;</p>

    <br><br>

    <!-- 表格示例 -->
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
        </tr>
    </table>

    <br><br>

    <!-- 表单示例 -->
    <form action="http://127.0.0.1:8080/submit" method="post">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名"><br><br>

        <label for="password">密码：</label>
        <input type="password" id="password" name="password" placeholder="请输入密码"><br><br>

        <input type="submit" value="提交">
    </form>

    <br><br>

    <!-- 列表示例 -->
    <ul>
        <li>项目1</li>
        <li>项目2</li>
        <li>项目3</li>
    </ul>

    <ol>
        <li>项目1</li>
        <li>项目2</li>
        <li>项目3</li>
    </ol>

</body>

</html>

参数

解释

<a> 标签：用于创建超链接，常用属性有：

href：指定链接的目标地址。
target：指定链接打开的方式，常用取值有 _blank（在新窗口中打开）和 _self（在当前窗口中打开）。

<img> 标签：用于插入图片，常用属性有：

src：指定图片的 URL 地址。
alt：指定图片的替代文本，当图片无法显示时显示该文本。

特殊字符：在 HTML 中，一些特殊字符需要使用实体名称或实体编号表示，例如：

特殊字符.png

<table> 标签：用于创建表格，常用标签和属性有：

<tr>：定义表格中的行。
<td>：定义表格中的数据单元格。
<th>：定义表格中的表头单元格。
colspan：指定单元格横跨的列数。
rowspan：指定单元格纵跨的行数。

<form> 标签：用于创建表单，常用属性有：

action：指定表单数据提交的目标地址。
method：指定表单提交的方式，常用取值有 GET 和 POST。
enctype：指定表单数据的编码类型，常用取值有 application/x-www-form-urlencoded 和 multipart/form-data。

列表：

<ul>：无序列表，用于显示项目之间没有特定顺序的列表。
<ol>：有序列表，用于显示项目按照特定顺序排列的列表。
<li>：列表项，用于定义列表中的每个项目。

<input> 标签：用于创建表单中的输入控件，常用属性有：

type：指定输入控件的类型，常用取值有 text（文本框）、password（密码框）、checkbox（复选框）、radio（单选框）等。
name：指定输入控件的名称，用于在表单提交时识别控件。
value：指定输入控件的默认值。
placeholder：指定输入控件的占位符文本。

<label> 标签：用于为表单控件添加标签，使用户更容易理解控件的用途，常用属性有：

for：指定与标签关联的表单控件的 id 属性值。

from表单

form表单使用自己的提交方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 示例</title>
</head>

<body>
=
    <!-- 表单示例 -->
    <form action="http://127.0.0.1:8080/submit" method="post">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名"><br><br>

        <label for="password">密码：</label>
        <input type="password" id="password" name="password" placeholder="请输入密码"><br><br>

        <input type="submit" value="提交">
    </form>
=
</body>

</html>

form 默认提交通过

<form action="http://127.0.0.1:8080/submit" method="post">

action 目标地址
method 方式通过提交按钮进行提交，后端可以直接接收form中需要提交的值。

后端代码（PYTHON）

from flask import Flask, request, jsonify
from flask_cors import CORS
from result import Result


app = Flask(__name__)
CORS(app)

r = Result


@app.route("/submit", methods=['POST'])
def submit():
    # 获取参数
    username = request.form.get('username')
    password = request.form.get('password')

    print(username, password)

    return jsonify({"code": r.success("").code, "message": r.success("提交成功").message})


if __name__ == '__main__':
    app.run(debug=True, port=8080)

其中的Result就2个字段，分别是code与message。

由于flask写后端需要返回一个response，所以这里需要返回。

更改form表单提交方式

前端，前端放了两个url,分别是form中的action，一个是js中的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提交表单</title>
</head>

<body>
    <form id="myForm" action="http://127.0.0.1:8080/submit" method="post">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username">
        <br>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password">
        <br>
        <button type="submit">提交</button>
    </form>

    <script>
        document.getElementById("myForm").addEventListener("submit", function (event) {
            event.preventDefault(); //阻止表单的默认提交行为

            // 获取表单数据
            const formData = new FormData(this);

            // 发送ajax请求，这里使用fetch
            fetch("http://127.0.0.1:8080/submit2", {
                method: "POST",
                body: formData
            })
                .then(response => response.json()) // 将响应转换为 JSON
                .then(data => {
                    console.log(data);
                })
                .catch(error => { console.error(); })
        })
    </script>
</body>

</html>

后端中的代码，多了一个submit2的方法

from flask import Flask, request, jsonify
from flask_cors import CORS
from result import Result


app = Flask(__name__)
CORS(app)

r = Result


@app.route("/submit", methods=['POST'])
def submit():
    print("这是form默认提交")
    # 获取参数
    username = request.form.get('username')
    password = request.form.get('password')

    print(username, password)

    return jsonify({"code": r.success("").code, "message": r.success("提交成功").message})


@app.route("/submit2", methods=['POST'])
def submit2():
    print("这是阻止了form默认提交")
    # 获取参数
    username = request.form.get('username')
    password = request.form.get('password')

    print(username, password)

    return jsonify({"code": r.success("").code, "message": r.success("提交成功").message})


if __name__ == '__main__':
    app.run(debug=True, port=8080)

结果 form结果.png