html表单制作及实例
时间: 2023-09-09 07:06:09 浏览: 45
HTML表单是Web开发中非常重要的组成部分,可以用于收集用户输入的数据。以下是一个简单的HTML表单制作的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML表单制作实例</title>
</head>
<body>
<form>
<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>
<label for="gender">性别:</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><br>
<label for="hobby">爱好:</label>
<input type="checkbox" id="hobby1" name="hobby" value="reading">
<label for="hobby1">阅读</label>
<input type="checkbox" id="hobby2" name="hobby" value="music">
<label for="hobby2">音乐</label>
<input type="checkbox" id="hobby3" name="hobby" value="sports">
<label for="hobby3">运动</label><br><br>
<label for="city">城市:</label>
<select id="city" name="city">
<option value="shanghai">上海</option>
<option value="beijing">北京</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</select><br><br>
<label for="introduction">个人简介:</label><br>
<textarea id="introduction" name="introduction" rows="4" cols="50"></textarea><br><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>
```
上述代码中,我们使用了 `<form>` 标签来定义表单元素,包含了多个输入框和按钮。其中,`<label>` 标签用于关联表单元素和其标签,为表单元素增加可读性。`<input>` 标签用于创建输入框,`<select>` 标签用于创建下拉列表,`<textarea>` 标签用于创建文本框。最后,`<input>` 标签的 `type` 属性设置为 `submit` 和 `reset` 分别创建了提交按钮和重置按钮。
当用户填写完表单后,可以点击提交按钮进行提交,提交的数据会被发送到服务器进行处理。