用户在 HTML 表单中填写并提交数据时，可以使用 PHP 来接收并处理这些数据。要实现这一点，需要创建一个 PHP 脚本来处理提交的数据，然后将 HTML 表单的 "action" 属性设置为该脚本的文件路径。表单提交的数据需要进行验证和过滤，以确保数据的完整性和安全性。可以使用条件语句、正则表达式、过滤器函数等方法来验证和过滤数据，并使用 htmlspecialchars() 函数转义 HTML 标记，以防止 XSS 攻击。

以下是一个简单的示例：

HTML 表单代码：

<form action="submit.php" method="post">

<label for="name">Name:</label>

<input type="text" id="name" name="name">

<label for="email">Email:</label>

<input type="email" id="email" name="email">

<button type="submit">Submit</button>

</form>

PHP 代码（submit.php）：

<?php

// 获取表单提交的数据

$name = $_POST['name'];

$email = $_POST['email'];

// 在这里进行处理，例如将数据存储到数据库中

// ...

// 返回一个响应，告诉用户数据已经被成功提交

echo "Thank you for submitting the form, $name!";

?>

在上面的示例中，表单的 "action" 属性设置为 "submit.php"，这意味着提交表单时，数据将被发送到 submit.php 文件中的 PHP 代码中进行处理。PHP 代码使用 $_POST 数组来获取表单提交的数据，然后进行处理，例如将数据存储到数据库中。最后，PHP 代码返回一个响应，告诉用户数据已经被成功提交。在处理表单数据时，一定要对用户输入进行验证和过滤，以防止安全漏洞。

需要对表单提交的数据进行验证和过滤，以确保数据的完整性和安全性。以下是一些常见的方法：

1、验证表单字段：在 PHP 代码中使用条件语句和正则表达式等方法来验证表单字段的有效性，例如验证电子邮件地址的格式是否正确。

$email = $_POST['email'];

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {

// 如果邮件地址格式不正确，则显示错误消息

echo "Invalid email address";

}

2、过滤输入数据：使用 PHP 中的过滤器函数来过滤表单输入数据，以防止 XSS 攻击和 SQL 注入等安全漏洞。

$name = $_POST['name'];

$name = filter_var($name, FILTER_SANITIZE_STRING); // 过滤特殊字符和标签

3、防止跨站脚本攻击（XSS）：在 PHP 代码中使用 htmlspecialchars() 函数来转义 HTML 标记，防止恶意脚本注入到页面中。

$name = $_POST['name'];

$name = htmlspecialchars($name, ENT_QUOTES, 'UTF-8'); // 转义 HTML 标记

4、防止 SQL 注入攻击：在 PHP 代码中使用参数化查询或准备语句来执行数据库操作，以防止恶意 SQL 语句注入到数据库中。

$stmt = $pdo->prepare("INSERT INTO users (name, email) VALUES (:name, :email)");

$stmt->bindParam(':name', $name);

$stmt->bindParam(':email', $email);

$stmt->execute();

通过这些方法，可以确保表单提交的数据是安全和有效的，并且能够正常地处理和存储到数据库中。

钮点击追踪可能是网站运营中最常见的需求之一。现在，通过GA4 和 Google 跟踪代码管理器(GTM)的配合，我们可以轻易实现追踪，甚至可以导入到google ads，辅助广告优化。

具体实现方法有很多，本文主要介绍使用GTM的方法。

1、获取尽可能多的关于按钮的信息

首先，我们需要创建一个触发器，或更具体地说，创建一个通用点击触发器。这将允许 GTM 监听与点击相关的事件。

在 Google 跟踪代码管理器中，我们可以选择 2 个点击触发选项：

• All Elements

• Just links

Just links是一种常见的方式，因为许多按钮本质上是用户点击的装饰链接。但是，如果您的按钮恰好不是链接，您将无法获得更多信息来跟踪。

这就是为什么我们喜欢使用All Elements作为触发器类型。此触发器类型能够侦听任何内容（例如图像、文件、按钮、空白区域等）和链接上发生的点击。它只是更通用、更通用。

创建一个新触发器并选择All Elements。

现在，GTM 可以识别何时发生点击，无论是链接点击还是任何元素点击。

然而，我们可能需要更多的信息，而不仅仅是知道存在点击交互。

要获取有关点击的信息，请转到 Google 跟踪代码管理器并启用与点击相关的所有内置变量。这些变量将为我们提供所需的大部分点击详细信息，例如Click Text，它会显示按钮上的文本。

在 GTM 工作区中，选择Variables，然后选择Configure。

启用所有单击变量。

该信息将用于创建触发我们的标签的条件。

返回我们的产品页面，让我们单击Add to Cart按钮。（在这里，添加购物车仅仅是示例，你可以把这个方法应用在任何按钮）

前往 Google 跟踪代码管理器的调试界面。识别Summary下的Click事件并选择它。查看之前启用的变量向我们展示了什么信息。

这里我们需要找到足够独特的数据作为触发条件。

2、找到独特且可靠的数据

在“调试”界面中，选择左侧面板中的Click事件，然后单击Variables选项卡。

重点关注我们已启用的变量（Click Classes, Click ID, Click Target, Click Text, and Click URL），尽力识别按钮特有的数据。

通常，许多按钮都是构建为链接的，这意味着您的 Click URL 变量值很有可能显示链接。您可以将其用于您的触发条件。

但是，很多时候并非所有维度的数据都齐全。在我们的示例中，Click URL没有值，这时我们可以使用另外两条信息：

• Click Classes，值为：single_add_to_cart_button button alt

• Click Text，值为： Add to cart

需要注意的是，Click Classes和Click Text很有可能不是唯一值，该方法只适用于追踪网站所有同类按钮。

如果我们仅仅只需要追踪与 Ninja 产品的添加到购物车按钮，怎样才能做到这一点呢？

首先，我们需要确保该按钮是唯一的，并且在整个网站中不会重复。

为此，我们将使用 Chrome 开发人员工具。如果您不熟悉，只需按照以下步骤操作即可。

右键单击您的按钮并选择检查。

这将使您能够访问浏览器的开发人员工具来查看按钮的 HTML 和 CSS 源代码。

单击键盘上的CTRL + F来过滤 HTML 文档。

复制并粘贴该类并将其粘贴到过滤器中。我们将复制粘贴single_add_to_cart_button 按钮 alt。

过滤器将显示您的网站上存在多少个此类。

如果过滤器结果是1 of 1 ，这意味着该按钮的类仅有唯一一项。使用与此按钮相关的 GTM 点击类只会跟踪此按钮，而不会跟踪另一个按钮。

如果结果超过 1 个，而您只想追踪特定按键，不是同类的所有按键，则需要进一步过滤。

解决方案是在触发器中添加页面 URL ，以仅跟踪位于 Flying Ninja 海报所在位置的“添加到购物车”按钮。

3、设置触发器

让我们回到All Elements触发器。

默认情况下，我们的触发器会帮助我们检测所有用户点击。我们需要从All Clicks切换为Some Clicks。

接下来是触发条件的设置，在我们的例子中是：Click Classes → contains → single_add_to_cart_button

重命名您的触发器并保存。

4、创建标签

首先，我们创建一个新的 GA4 事件代码。 Tag Type选择Google Analytics: GA4 Event，再根据GA4的衡量ID对应选择Configuration Tag。如果没有预设的Tag，则选择None - Manually Set ID，再手动填入衡量ID即可。

然后我们需要命名我们的事件。建议button_click。遵从Google 的命名规则的最佳实践是小写字母加下划线。

此外，最好不要发明名称，而应该首先查看 Google 跟踪的内容。增强测量中会跟踪点击次数，但没有任何特定于按钮点击的内容。他们将事件命名为Click，我们也可以使用它。

此时，我们可以像这样将事件发送到 GA4。

但是，我们希望向 GA4 发送有关此次点击的更多详细信息，因此我们将使用事件参数。

按钮的文本和页面位置对我们很有价值，因此我们将添加 2 个自定义参数。

我们的设置如下所示。

▶ 注意：我们讨论的命名事件的方法与命名事件参数的方法相同。建议使用推荐事件或增强测量列表中任何适合您需求的事件。如果您选择为事件参数使用自定义名称，并且想要在 GA4 报告（自定义维度）中使用，则参数的数量将被限制为 50 个。

Google 的推荐事件和增强型测量没有与按钮文本相关的参数。我们能找到的最接近的是link_text。link_text参数用于文件下载 。

你也可以自定义Parameter Name。例如，button_text，甚至click_text。

由于目标是显示按钮文本的值，因此我们可以从之前启用的Click Text变量中获取值。

选择Click Text。

如果我们还想知道按钮所在的页面。只需重复上述过程并在Value下选择Page页面 URL即可。

添加我们之前创建的所有触发器。

保存您的标签。

启用Preview模式并单击Add to cart按钮。

您可以看到我们的标签已触发。

在 GA4 的 DebugView 中，您将看到即将发生的事件。

在参数旁边，您可以看到我们的link_text和page_location事件参数及其值。

至此，事件创建已经完成。最多不超过48小时，我们就可以在GA4的事件中找到它，也可以用它创建转化和受众。

么是css的调用方式？

简单来讲，就是解决把css代码写在哪里的问题，这块内容之前在课堂上演示过，这里再用文字说明一下，权当复习。

大体有以下四种方式：

• 外联式样式表；
• 内嵌样式表；
• 元素内定；
• 导入样式表

1，外联式样式表

添加在HTML的头部信息标识符< head>里：

<head> 
        <link rel="stylesheet" href="style.css" type="text/css"> 
</head>

其中href是目标文档的URL， type则规定了目标URL的MIME类型，而media规定了文档将显示在什么设备上。

2，内嵌样式表

添加在HTML的头部信息标识符< head>里：

<head> 
      <style type="text/css"> 
             <!-- 样式表的具体内容 --> 
      </style> 
</head>

type=”text/css”表示样式表采用MIME类型，帮助不支持CSS的浏览器过滤掉CSS代码，避免在浏览器面前直接以源代码的方式显示我们设置的样式表。但为了保证上述情况一定不要发生，还是有必要在样式表里加上注释标识符“< !--注释内容-->”。

3，元素内定

语法：

<Tag style="properties">网页内容</tag>

举个例子：

<p style="color: blue; font-size: 10px">CSS实例</p>

上面例子的代码说明：

用蓝色显示字体大小为10px的“CSS实例”。尽管使用简单、显示直观，但是这种方法不怎么常用，因为这样添加无法完全发挥样式表的优势——即内容结构和格式控制分别保存。

4，导入样式表(高级用法，暂时先放下）

语法：

<style type="text/css"> 
        <!-- @import url("css/base.css"); --> 
</style>

其中外部引用CSS主要用到两种方式link和@import

本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。

link和@import存在如下差别：

差别1：老祖宗的差别。link属于HTML标签，而@import完全是CSS提供的一种方式。

link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。

差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

差别4：当使用javascript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。

从上面的分析来看，还是使用link标签比较好。

课后练习：

步骤一：新建一个名为index.html的网页。

步骤二：在index.html网页文档里加入两个p标签，分别在p标签中加入内容（内容随意）

步骤三：尝试用上面提到的前三种方式，用css代码改变p标签内容的显示格式。