HTML的表单元素

关注

原创最新推荐文章于 2026-05-07 10:39:42 发布 288 阅读 AI 写同款· GEO 优化 ›

前端必知必会-html表单元素默认情况下，选择下拉列表中的第一个项目。要定义预选选项，请将 selected 属性添加到选项中：示例</可见值：使用 size 属性指定可见值的数量：示例。阅读详情

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type"content="text/html;charset=utf-8">
		<title>表单</title>
	</head>
	<body>
		<h1>注册账号</h1>
		<form action="regist" method="post">
			用户名：<input type="text" name="username" id="username" value=""/>
			<input type="button" name="checkusername" id="checkusername" value="检查用户名是否被注册" /><br />
			密码：<input type="password" name="password" id="passwoed" value="" /><br /><!-- 密码输入框 -->
			确认密码：<input type="password" name="" id="re_passwoed" value="" /><br />
			性别：<input type="radio" name="sex" id="sex_man" value="man" checked="checked" />男 <input type="radio" name="sex" id="sex_woman" value="woman" />女 <br /><!-- radio表示单选按钮，相同的name属性只能选择一个，默认选中使用checked="checked" -->
			兴趣爱好：<input type="checkbox" name="interest" id="ins_football" value="football" />足球 <input type="checkbox" name="interest" id="ins_volleyball" value="volleyball" />排球 <input type="checkbox" name="interest" id="ins_ping-pong" value="ping-pong" />乒乓球<br />
			选择头像：<input type="file" name="file" id="file" value="" /><br /><!-- checkbox表示多选;file表示选择文件控件，用于文件上传。 -->
			<input type="image" width="80" height="80" src="pic/submit.jpg" /><br />
			<input type="reset" value="重置信息" /><input type="submit" id="submit" value="注册账号">
			<input type="hidden" name="regist" id="" value="default"><!-- hidden表示隐藏某个区域。 -->
		</form>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type"content="text/html;charset=utf-8">
		<title>表单</title>
	</head>
	<body>
		<h1>调查情况</h1>
		<form action="inquire" method="post">
			您什么时候会使用计算机？
			<select name="computer" multiple="multiple">
				<option value="edit">图文编辑</option>
				<option value="game">游戏</option>
				<option value="video">看视频</option>
			</select><br /><br />
			您几岁开始学习的？
			<select name="age" size="3">
				<option value="0+">0-10岁<option>
				<option value="10+">11-20岁<option>
				<option value="20+">21-10岁<option>
			</select><br />
			<input type="submit" id="" name=""/>
		<form>
	</body>
</html>