HTML form表单-个人基本信息

🌴 2022.3.13 作业

🚀 要求

使用html的form表单中的各个标签，完成在上一题目中“个人基本信息”部分的表单输入页面的设计
个人基本信息中至少包括以下内容：
姓名、性别、出生日期、所属省份、兴趣爱好、手机号码、个人简介等。大家可以根据各项信息的特点选择合适的表单元素，可以编写css使页面呈现美观的效果
注意：
可以参照网络上一些页面，表格中的内容要为自己的真实内容（身份证号除外），所有代码在一个html文件中
页面上所有的代码自己书写，注意增加一些有别于其他同学的内容，所有的代码都要知道其作用、含义
编码整洁、规范，清晰易读，添加必要的注释，对页面元素或样式进行说明

🚀 代码

小张自己的代码，仅供参考。源文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人信息表单</title>
		<style>
		/* 调整页面布局 */
			html {
				font-size: 20px;
				height: 100%;
				display: flex;/* 设置flex容器 */
				justify-content: center;/* 居中 */
				align-items: center;/* 交叉轴的中点对齐 */
			}
			
			form {
				width: 500px;
				height: 430px;
				background-color: papayawhip;
				border-radius: 1rem;
				box-shadow: 0 0 0.5rem 0.5rem #999;
				padding: 1rem;
			}
			
			form>div {
				display: flex;/* 设置flex容器，块元素不换行 */
				margin: 0.2;
			}

			form>div>label {
				width: 30%;
				text-align: right;
			}
			
			/* label与label后input/section/textarea的间距 */
			form>div>div,
			form>div>label {
				margin-top: 10px;
				margin-left: 10px;
			}
			
			input,
			section,
			textarea,
			select {
				font-size: 20px;
				border-radius: 5px;
				border: 2px solid #2233ee;
			}

			input[type="submit"] {
				border: 1px solid #CCCCFF;
				box-shadow: 0 0 5px 5px #CCCCCC;
				background-color: #66ff88;
				color: #ffbaff;
			}

			input[type="reset"] {
				border: 1px solid #CCCCFF;
				box-shadow: 0 0 5px 5px #CCCCCC;
				background-color: #ff6688;
				color: #aaffaa;
			}
			
			/* 设置触发样式 */
			input[type="submit"]:hover,
			input[type="reset"]:hover {
				color: #FFFFFF;
				transform: scale(1.1);
                cursor: pointer;
			}
		</style>
	</head>
	<body>
		<form>
				<!-- 姓名 -->
				<div>
					<label>姓名:</label>
					<div>
						<input name="userName" type="text" />
					</div>
				</div>

				<!-- 性别 -->
				<div>
					<label>性别:</label>
					<div>
						<input name="sex" type="radio" value="male" />男
						<input name="sex" type="radio" value="women" />女
					</div>
				</div>
				
				<!-- 出生日期 -->
				<div>
					<label>出生日期:</label>
					<div>
						<input name="birthday" type="date" />
					</div>
				</div>
				
				<!-- 所属省份 -->
				<div>
					<label>所属省份:</label>
					<div>
						<select name="province">
							<option value="Beijing">北京</option>
							<option value="NeiMenggu">内蒙古</option>
							<option value="TianJin">天津</option>
							<option value="HeBei">河北</option>
							<option value="ShanXi">山西省</option>
						</select>
					</div>
				</div>
				
				<!-- 兴趣爱好 -->
				<div>
					<label>兴趣爱好:</label>
					<div>
						<input type="checkbox" name="like" value="sport" />体育
						<input type="checkbox" name="like" value="travel" />旅游
						<input type="checkbox" name="like" value="music" />音乐
						<input type="checkbox" name="like" value="book" />读书
					</div>
				</div>
				
				<!-- 手机号码 -->
				<div>
					<label>手机号码:</label>
					<div>
						<input name="phone" type="text" />
					</div>
				</div>
				
				<!-- Email -->
				<div>
					<label>Email:</label>
					<div>
						<input name="nserName" type="text" />
					</div>
				</div>
				
				<!-- 个人简介 -->
				<div>
					<label>个人简介:</label>
					<div>
						<textarea name="introduction" cols="22" rows="2"></textarea>
					</div>
				</div>

				<div style="margin-top: 20px; justify-content: space-around;">
					<input type="submit" value="保存" />
					<input type="reset" />
				</div>
		</form>
	</body>
</html>