action 属性的基本用法

action 属性的值通常是一个指向服务器端脚本的 URL，例如 PHP、Python 或 Node.js 等。这个脚本负责接收表单提交的数据，进行处理，并可能返回结果给用户。

示例：

立即学习“前端免费学习笔记（深入）”；

<form action="process_form.php" method="post">
  <!-- 表单元素 -->
</form>

在这个例子中，当表单提交时，数据将被发送到 process_form.php 文件。

method 属性的重要性

除了 action 属性，method 属性也至关重要。 method 属性指定了表单数据提交的方式，常用的有两种：

• GET: 数据作为 URL 的一部分发送，以 ? 分隔 URL 和数据，多个数据之间用 & 连接。 这种方式不适合发送敏感数据，且 URL 长度有限制。
• POST: 数据在 HTTP 请求的主体中发送，更加安全，且可以发送大量数据。

通常，对于需要修改服务器端数据的操作（例如创建、更新或删除），应该使用 POST 方法。

示例：

立即学习“前端免费学习笔记（深入）”；

<form action="process_form.php" method="post">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username"><br><br>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="提交">
</form>

在这个例子中，我们添加了 method=”post”，确保数据以 POST 方式发送。同时添加了提交按钮 ，用户点击该按钮即可提交表单。

服务器端处理表单数据 (PHP 示例)

以下是一个简单的 PHP 脚本，用于接收并处理上面表单提交的数据：

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $username = $_POST["username"];
  $password = $_POST["password"];

  // 在这里可以对用户名和密码进行验证、存储等操作
  echo "您输入的用户名是: " . htmlspecialchars($username) . "<br>";
  echo "您输入的密码是: " . htmlspecialchars($password) . "<br>";
}
?>

代码解释：

• $_SERVER[“REQUEST_METHOD”] == “POST”: 检查请求方法是否为 POST，确保只有通过 POST 方式提交的表单数据才会被处理。
• $_POST[“username”] 和 $_POST[“password”]: 分别获取名为 username 和 password 的表单字段的值。
• htmlspecialchars(): 对用户输入的数据进行转义，防止 XSS 攻击。

关于本地资源路径

当在 HTML 中链接本地资源（例如图片、视频、样式表等）时，通常不需要使用完整的绝对路径（例如 file:///C:/Users/Name/Desktop/Web%20Developement%20Code/notes.php）。 相对路径，即相对于当前 HTML 文件或网站根目录的路径，就足够了。

示例：

立即学习“前端免费学习笔记（深入）”；

如果你的 HTML 文件和 notes.php 文件在同一个目录下，你可以这样链接：

<a href="notes.php">查看笔记</a>

如果 notes.php 文件在 assets 目录下，你可以这样链接：

<a href="assets/notes.php">查看笔记</a>

总结

正确使用 HTML 表单的 action 和 method 属性，是构建动态 Web 应用的基础。 action 属性指定数据提交的 URL，method 属性指定提交方式。 同时，合理使用相对路径链接本地资源，可以提高代码的可维护性和可移植性。 在服务器端，需要编写相应的脚本来接收和处理表单数据，并进行必要的安全措施，例如数据验证和转义。