<!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>
<br>
<!-- 密码输入框 -->
<label for="password">密码：</label>
<input type="password" id="password" name="password" required>
<br>
<!-- 单选按钮 -->
<label>性别：</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男性</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女性</label>
<br>
<!-- 复选框 -->
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">订阅新闻邮件</label>
<br>
<!-- 下拉菜单 -->
<label for="country">选择国家：</label>
<select id="country" name="country">
<option value="us">美国</option>
<option value="ca">加拿大</option>
<option value="uk">英国</option>
</select>
<br>
<!-- 多行文本框 -->
<label for="comments">评论：</label>
<textarea id="comments" name="comments" rows="4" cols="50"></textarea>
<br>
<!-- 提交按钮 -->
<input type="submit" value="提交">
</form>
</body>
</html>
在上述示例中，表单包含了常见的表单元素：
- <input> 元素用于文本输入框、密码输入框、单选按钮和复选框。
- <label> 元素用于为表单元素提供标签，提高可访问性。
- <select> 元素用于创建下拉菜单。
- <textarea> 元素用于创建多行文本框。
- <input type="submit"> 用于提交表单。
表单的 action 属性指定了表单数据提交到的服务器端脚本的URL，而 method 属性指定了提交表单时使用的 HTTP 方法（通常为 "get" 或 "post"）。
表单是与用户交互的重要部分，通过合理使用表单元素，可以收集用户输入的信息并进行后续处理。
转载请注明出处：http://www.zyzy.cn/article/detail/12482/HTML5