HTMl表单的练习_练习表单-CSDN博客

本文链接：https://blog.csdn.net/qq_48496840/article/details/129046722

这是一个简单的HTML表单练习，包括文本输入、密码输入、单选按钮、复选框、日期选择、下拉菜单、文本区域以及同意协议的复选框。表单使用CSS进行样式设计，包括固定定位和背景颜色。此外，还涉及了隐私政策链接和提交、重置按钮的功能。

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

简单表单的练习。以下是相应代码。

<!DOCTYPE html>
<html>
<head>
	<title>form practice</title>
	<base href="D:\document\">
	<link rel="stylesheet" type="text/css" href="css\form.css">
</head>
<body>
	<form id="form" action="" method="get">
		<label for="element_id" form="form_id">账号： </label>
		<input type="text" name="账号">
		<br><br>

		<label>密码：</label> 
		<input type="password" name="密码">
		<br><br>

		性别： 
		<input type="radio" name="男"> 男
		<input type="radio" name="女" checked="checked"> 女
		<br><br>

		爱好： 
		<input type="checkbox" name="篮球" checked="checked">篮球
		<input type="checkbox" name="足球">足球
		<input type="checkbox" name="跑步" checked="checked">跑步
		<br><br>

		生日：
		<input type="date" name="生日">
		<br><br>

		邮箱地址： <input type="email" name="邮箱">
		<br><br>

		地址：
		<select>
			<option>山西省</option>
			<option>广西壮族自治区</option>
			<option>湖南省</option>
			<option>浙江省</option>
			<option>广东省</option>
		</select>
		验证码： <input type="text" name="check">
		<input type="button" name="获取验证码" value="获取验证码">
		<br><br>

		备注： 
		<textarea rows="10" cols="25">
			123
		</textarea>
		<br><br>

		<input type="checkbox" name="同意协议">同意 <a href="http://www.cpic.com.cn/cpic/cn/contactus/privacypolicy/">《隐私条款》</a>和 <a href="https://www.hngbwlxy.gov.cn/zc.html">《隐私权相关政策》</a>
		<br><br>

		<input type="submit" name="提交按钮" value="提交" id="submit">
		<input type="reset" name="重置" value="重置" id="reset">

	</form>
</body>
</html>

#form {
	width: 50%;
	height: 550px;
	background-color: rgba(100,45,78,0.1);
	position: fixed;
	top: 50px;
	left:400px;
	left-padding: 20px;
}

#submit {
	position: absolute;
	bottom: 1px;
	left: 46%;
}

#reset {
	position: absolute;
	bottom: 1px;
	left: 39%;
}