<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 表单示例</title>
</head>
<body>
<h1>用户登录</h1>
<form action="/submit" method="post">
<!-- 文本输入框 -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
<!-- 密码输入框 -->
<label for="password">密码：</label>
<input type="password" id="password" name="password" required>
<!-- 单选框 -->
<p>性别：</p>
<label><input type="radio" name="gender" value="male"> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>
<!-- 复选框 -->
<p>兴趣爱好：</p>
<label><input type="checkbox" name="hobby" value="reading"> 阅读</label>
<label><input type="checkbox" name="hobby" value="traveling"> 旅行</label>
<!-- 下拉菜单 -->
<label for="country">选择国家：</label>
<select id="country" name="country">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="uk">英国</option>
</select>
<!-- 提交按钮 -->
<button type="submit">提交</button>
</form>
</body>
</html>
在上述示例中：
- <form> 元素定义了一个表单，action 属性指定了表单数据提交的目标URL，method 属性定义了提交数据的HTTP方法（这里是POST）。
- <label> 元素用于关联表单元素，提供更好的用户体验。for 属性指定了与之关联的表单元素的 id。
- <input> 元素用于创建文本输入框、密码输入框、单选框等。type 属性定义了输入框的类型。
- <select> 元素用于创建下拉菜单，其中的 <option> 元素定义了下拉菜单中的选项。
- <button> 元素用于创建提交按钮。
这只是一个简单的例子，表单还支持更多的输入类型、属性和事件，以满足各种需求。提交表单时，通常会通过后端服务器处理表单数据。
转载请注明出处：http://www.zyzy.cn/article/detail/12410/HTML