HTML初学者指南：创建基本表单-优快云博客

本文链接：https://blog.youkuaiyun.com/DDL_lalala/article/details/100671412

这篇博客适合HTML初学者，详细介绍了如何创建基本的表单元素，包括输入框、选择框和提交按钮等，帮助理解HTML表单结构和应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初学者：
很基础的表单创建：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>06-html表单</title>
	</head>
	<body>
		<form action="" method="post">
			<!--昵称：<input type="text" name="haha" id="hehe" value="请输入用户名"/>-->
			昵称：<input type="text" name="haha" id="hehe" placeholder="请输入用户名" autofocus="autofocus"/><br/>
			密码：<input type="password"/><br/>
			性别：<input type="radio" name="xb" id="nan" checked="checked"/> <label for="nan">男</label><input type="radio" name="xb" id="nv"/> <label for="nv">女</label><input type="radio" name="xb" id="bm"/> <label for="bm">保密</label><br/>
			地址：<select name="">
				<option>中国</option>
				<option>法国</option>
				<option>加拿大</option>
			</select>
			<select name="">
				<optgroup label="北京">
					<option>顺义区</option>
					<option>海淀区</option>
					<option>朝阳区</option>
				</optgroup>
				<optgroup label="西安">
					<option>长安区</option>
					<option selected="selected">未央区</option>
					<option>莲湖区</option>
				</optgroup>
			</select><br/>
			介绍：<textarea rows="10" cols="10" width="5" height="5" placeholder="请输入文字">
			</textarea><br/>
			你的爱好是：<input type="checkbox" id="kdm"/><label for="kdm">看动漫</label>
			<input type="checkbox" id="hh"/><label for="hh">画画</label>
			<input type="checkbox" id="dyx"/><label for="dyx">打游戏</label><br/>
			<input type="submit" value="提交" />
			<input type="reset" value="重置" />
			<input type="button" value="按钮" />
			<button>按钮</button>
		</form>
	</body>
</html>

效果图：
在这里插入图片描述