### 如何在HTML中结合使用form标签和input标签 `<form>` 标签用于创建 HTML 表单，而 `<input>` 标签则是表单中的重要组成部分之一，可以用来收集用户的输入信息。两者结合起来能够实现用户与网站之间的交互功能。 #### 基本结构 以下是 `<form>` 和 `<input>` 结合使用的标准语法： ```html <form action="处理数据的URL" method="提交方法"> <!-- 输入框 --> <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> <!-- 单选按钮 --> 性别：<br> <input type="radio" id="male" name="gender" value="male"> <label for="male">男</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label><br><br> <!-- 提交按钮 --> <input type="submit" value="提交"> </form> ``` #### 属性说明 1. **action属性** `action` 是 `<form>` 标签的一个必需属性，它指定了当表单被提交时，接收并处理这些数据的目标 URL 地址[^2]。 2. **method属性** `method` 定义了发送表单数据的方法，通常是 `"GET"` 或 `"POST"`。其中： - GET 方法会将表单的数据附加到 URL 中传递； - POST 方法则通过 HTTP 请求体传输数据，适合更安全的操作。 3. **type属性** `<input>` 的 `type` 属性决定了该控件的具体形式及其行为。常见的类型包括但不限于： - text：普通的文本输入框[^1]。 - password：隐藏字符的密码输入框[^1]。 - radio：单选项按钮。 - checkbox：复选框[^1]。 - submit：提交按钮，点击后触发表单提交操作。 4. **name属性** 每个 `<input>` 都应该有一个唯一的 `name` 属性值，这样服务器端才能识别各个字段的内容[^3]。 5. **value属性** 对于某些类型的 `<input>`（如单选钮或文件上传），可以通过设置其初始状态或者默认选取项来增强用户体验。 #### 实际案例分析 下面展示了一个完整的登录界面例子，综合运用到了以上提到的知识点： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>登录示例</title> </head> <body> <h2>用户登录</h2> <form action="/login.php" method="post"> <p> <label for="uname">用户名:</label> <input type="text" id="uname" name="user_name" required> </p> <p> <label for="pwd">密 码:</label> <input type="password" id="pwd" name="pswrd" minlength="6" required> </p> <p> 记住我: <input type="checkbox" id="remember_me" name="remember_me"> </p> <button type="submit">登 录</button> </form> </body> </html> ``` 此代码片段展示了如何构建一个简单的登录页面，并且包含了基本验证逻辑（例如必填字段以及最小长度限制）。同时注意这里还引入了一种新的元素——`<button>` 来替代传统的 `<input type="submit">` 方式以获得更好的样式控制能力[^2]。 ---