### HTML中 `<form>` 标记的作用及其常用属性 #### 1. `<form>` 标记的作用 `<form>` 标记用于创建一个表单，允许用户输入数据并通过提交操作将这些数据发送到服务器。表单是网页中与用户交互的重要组成部分，通常包含各种输入控件（如文本框、按钮、复选框等）[^1]。 --- #### 2. `<form>` 标记的常用属性 以下是一些常用的 `<form>` 属性及其功能： ##### （1）`action` 指定表单数据提交的目标URL地址。例如： ```html <form action="https://example.com/submit"> ``` 如果未设置 `action`，表单数据将提交到当前页面的URL[^1]。 ##### （2）`method` 定义表单数据提交的方式，可取值为 `get` 或 `post`。默认值为 `get`。两者的区别包括： - **GET**：将数据附加到URL中，适合传输少量数据，但安全性较低。 - **POST**：通过HTTP请求体发送数据，适合传输大量或敏感数据，安全性较高[^2]。 示例代码： ```html <form action="https://example.com/submit" method="post"> ``` ##### （3）`enctype` 指定表单数据的编码类型，主要用于 `post` 提交方式。常见的值有： - `application/x-www-form-urlencoded`：默认值，适用于普通表单数据。 - `multipart/form-data`：用于上传文件时的数据编码[^3]。 - `text/plain`：简单文本格式，较少使用。 示例代码： ```html <form action="https://example.com/upload" method="post" enctype="multipart/form-data"> ``` ##### （4）`name` 为表单命名，主要用于标识表单。例如： ```html <form name="userForm"> ``` ##### （5）`id` 为表单提供唯一的ID，便于通过CSS或JavaScript进行操作。例如： ```html <form id="myform"> ``` ##### （6）`target` 指定表单提交后显示结果的目标窗口或框架。常见值包括： - `_self`：在当前窗口中打开（默认值）。 - `_blank`：在新标签页中打开。 - `_parent`：在父框架中打开。 - `_top`：在整个窗口中打开。 示例代码： ```html <form action="https://example.com/submit" target="_blank"> ``` ##### （7）`autocomplete` 控制表单是否启用自动完成功能。可取值为 `on` 或 `off`。例如： ```html <form autocomplete="on"> ``` ##### （8）`novalidate` 禁用浏览器的默认验证机制。例如： ```html <form novalidate> ``` ##### （9）HTML5新增属性 HTML5引入了一些新的 `<form>` 属性，增强表单的功能： - **`form`**：允许将表单控件与特定的 `<form>` 关联，即使它们不在 `<form>` 标签内。例如： ```html <form id="myform" action="https://example.com/submit"> </form> <input type="text" form="myform"> ``` - **`autofocus`**：使某个表单控件在页面加载时自动获得焦点。例如： ```html <form> <input type="text" autofocus> </form> ``` --- ### 示例代码 以下是一个完整的 `<form>` 示例，展示多个常用属性的使用： ```html <form action="https://example.com/submit" method="post" enctype="multipart/form-data" target="_blank" autocomplete="on" > <label for="username">用户名：</label> <input type="text" id="username" name="username" required><br><br> <label for="password">密码：</label> <input type="password" id="password" name="password" required><br><br> <label for="file">上传文件：</label> <input type="file" id="file" name="file"><br><br> <button type="submit">提交</button> </form> ``` --- ###