本文已参与「新人创作礼」活动，一起开启掘金创作之路。
🌴 2022.3.13 作业
🌳 form表单-个人基本信息
前言
🎬本文章是 【JAVA WEB开发技术】 专栏的文章，主要是上课的随堂笔记与练习
🔗JAVA WEB开发技术专栏 传送门
🚀 要求
使用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>
🚀 效果图
🚀 知识总结
以前没用过太多display的属性，一直实用
margin和padding来布局位置，这次自己在CSDN学了一下display:flex;，大概意思就是把当前元素设置为一个容器，默认容器内的所有块元素在同一行内，之后通过容器属性来布局位置会方便很多
其它flex属性详见display:flex属性详解
