JAVA WEB开发技术作业个人基本信息表单

张时贰

已于 2022-05-20 23:59:43 修改

阅读量3.6k

点赞数 5

分类专栏： JAVA WEB开发技术文章标签：前端 html web javascript

于 2022-03-21 20:24:30 首次发布

本文链接：https://blog.csdn.net/qq_49488584/article/details/123644821

版权

🌴 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"

最低0.47元/天解锁文章

张时贰

关注

5
点赞
踩
65

收藏

觉得还不错? 一键收藏
5
评论
JAVA WEB开发技术作业个人基本信息表单

🌴 2022.3.13 作业🌳 form表单-个人基本信息文章目录HTML form表单-个人基本信息🚀 要求🚀 效果图🚀 知识总结🚀 要求使用html的form表单中的各个标签，完成在上一题目中“个人基本信息”部分的表单输入页面的设计个人基本信息中至少包括以下内容：姓名、性别、出生日期、所属省份、兴趣爱好、手机号码、个人简介等。大家可以根据各项信息的特点选择合适的表单元素，可以编写css使页面呈现美观的效果注意：可以参照网络上一些页面，表格中的内容
复制链接

扫一扫