### HTML 表单中 action 属性的路径设置方法 在 HTML 中，`action` 属性用于指定表单提交时数据的目标地址。路径可以是相对路径或绝对路径，具体使用方式如下： #### 1. 相对路径 相对路径是指相对于当前页面的路径。例如： - 如果当前页面位于 `http://example.com/page1.html`，以下代码将提交到 `http://example.com/pass`。 ```html <form action="./pass"> <input type="submit" value="注册"> </form> ``` 这里的 `./pass` 表示与当前页面同级目录下的文件或接口[^2]。 如果需要访问上一级目录，可以使用 `../` 表示父目录。例如： ```html <form action="../login"> <input type="submit" value="登录"> </form> ``` 这表示提交到当前目录的上一级目录中的 `login` 接口[^3]。 #### 2. 绝对路径 绝对路径包含完整的 URL 地址。例如： ```html <form action="http://example.com/login"> <input type="submit" value="登录"> </form> ``` 无论当前页面位于何处，表单数据都会提交到指定的完整 URL 地址[^4]。 #### 3. 根路径 根路径以 `/` 开头，表示从网站的根目录开始定位。例如： ```html <form action="/login"> <input type="submit" value="登录"> </form> ``` 假设网站域名为 `http://example.com`，则表单数据将提交到 `http://example.com/login`[^3]。 #### 4. 空路径 如果 `action` 属性为空字符串 (`""`)，表单数据将提交到当前页面的 URL。例如： ```html <form action=""> <input type="submit" value="提交"> </form> ``` 这种方式通常用于在同一页面处理表单数据[^1]。 #### 5. 动态路径 可以通过 JavaScript 动态设置 `action` 属性值。例如： ```javascript document.querySelector('form').action = "http://example.com/new-action"; ``` 这样可以在运行时更改表单提交的目标地址[^1]。 ### 示例代码 以下是一个综合示例，展示不同路径的使用方法： ```html <!-- 相对路径 --> <form action="./submit-form" method="post"> <input type="text" name="username" placeholder="用户名"> <input type="submit" value="提交"> </form> <!-- 绝对路径 --> <form action="https://api.example.com/submit" method="post"> <input type="text" name="username" placeholder="用户名"> <input type="submit" value="提交"> </form> <!-- 根路径 --> <form action="/submit-form" method="post"> <input type="text" name="username" placeholder="用户名"> <input type="submit" value="提交"> </form> ```