“用户注册页面”_用户注册页面的-CSDN博客

本文链接：https://blog.csdn.net/qq_64771790/article/details/127472384

学号后四位：0101（必填）
邀请人ID：（非必填）

通过这次学校安排的专属投稿活动，也让我倍加兴奋与激动，让我这个小白水平有一丝丝发挥的空间。开个玩笑，本次我参与讲解的项目是“用户注册页面”。

注意事项：

1.制作表单的目的让用户使用一目了然，通常用户会快速浏览来获取信息，看看网站内容内容是否对他们的胃口或者符合需CSS布局HTML，如何应对交互，一目了然的表单让用户立马知道他们需要填写的信息量的多少；

2.所有input的长度都做限制，都有验证方式；

3.限制表单只能提交一次；

项目名称：

用户注册页面

项目代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登陆注册页面</title>
		<style type="text/css">
			.contect{
				width: 70%;
				margin: 0 auto;
			}
			.contect ul{
				width: 750px;
				list-style: none;
				margin: 0px;
				padding: 0px;
			}
			.contect li{
				padding: 12px;
				border-bottom: 1px solid #eee;
			}
			.contect li:first-child,
			.contect li:last-child{
				border-bottom: 1px solid #777;
			}
			.contect span{
				width: 150px;
				display: inline-block;
			}
			.usually input{
				height: 20px;
				width: 220px;
				padding: 5px 8px;
			}
			*:focus{
				outline: none;
			}
			.usually input,
			.usually textarea{
				box-shadow: 0 10px 15px #eee inset;
				border-radius: 2px;
			}
			.contect textarea{
				padding: 8px;
				width: 300px;
			}
			.usually input:focus,
			.usually textarea:focus{
				background: $fff;
			}
			input[type=submit]{
				margin-left: 156px;
				background-color: darkgrey;
				border: 1px solid #808080;
				border-radius: 3px;
				color: white;
				padding: 6px 20px;
				text-align: center;
			}
			input[type=submit]:hover{
				opacity: ,85;
				cursor: pointer;
			}
			.xb{
				text-align: center;
			}
			.sport{
				text-align: center;
			}
		</style>
	</head>
	<body>
		 <form class="contect" action="#" method="post">
		 	<ul>
		 		<li class="usually">
		 			<h2>用户注册</h2>
		 		</li>
		 		<li class="usually">
		 			<span>昵称：</span>
		 			<input type="text" id="name" name="name" autocomplete="off" required pattern="^[a-zA-Z0-9_-]{6,16}$"/>
		 		</li>
		 		<li class="usually">
		 			<span>注册邮箱：</span>
		 			<input type="text" id="dzyx"/>(必须包含@字符)
		 		</li>
		 		<li class="usually">
		 			<span>性别：</span>
		 			<span class="xb" style="width: 228px;">
		 				<input type="radio" name="sex" value="男" checked="checked" />
		 				男
		 				<input type="radio" name="sex" value="女" />
		 				女
		 			</span>
		 		</li>
		 		<li class="usually">
		 			<span>年龄：</span>
		 			<input type="text" id="age"/>
		 		</li>
		 		<li class="usually">
		 			<span>兴趣爱好：</span>
		 			<span class="sport" style="width: 228px;">
		 				<input type="checkbox" name="sport" value="足球" />足球
		 				<input type="checkbox" name="sport" value="篮球" />篮球
		 				<input type="checkbox" name="sport" value="游泳" />游泳
		 				<input type="checkbox" name="sport" value="唱歌" />唱歌
		 				<input type="checkbox" name="sport" value="跑步" />跑步
		 				<input type="checkbox" name="sport" value="瑜伽" />瑜伽
		 			</span>
		 		</li>
		 		<li class="usually">
		 			<span>自我介绍：</span>
		 			<textarea name="option" cols="30" rows="10"></textarea>
		 		</li>
		 		<li>
		 			<input class="submit" type="submit" value="立即注册" />
		 		</li>
		 	</ul>
		 </form>
	</body>
</html>

项目完成思路

首先我们制作表单第一个需要用到的就是<form>（也算是耳闻熟知了），再用<ul></ul>把表单里的信息内容放在表单之中（防止信息出现在表单之外），接下来再用<li>编写出我们表单要设计的一些用户需要填的信息，如：昵称、性别、年龄等等重要信息，一个<li></li>就代表表单其中的一项主要信息。（可能有同学会问了，为什么<li>里的用户信息用的是<span>而不用<div>标签呢？）在下面的笔记整理中就有详解哦。首先表单的昵称，用<span>把昵称在表单中显示出来，其后也需要<input>来“陪伴”它，如果没有它（“<input />”）的陪伴，让用户填了个寂寞，在这里我用的正则表达式只有a-z、A-Z、0-9、_(下划线)、字符长度是6-16位；在编写“性别”信息在<input />不仅把type属性设置成“radio”，其name属性值也要都是“sex”，否则用户在选择性别时“男”和“女”都可以选上。接下来年龄信息原理与昵称类似，年龄就仅仅需要填数字即可；如果有兴趣爱好等等需要复选框的按钮，<input>标签里的“type”属性就必须是“checkbox”，就可以实现单选又可以多选的效果了。在制作“自我介绍”信息其后运用了<textarea></textarea>标签，其标签可以输入任意长度的文本，文本默认字体是等宽字体（Courier），可以通过CSS来改变。最后在“立即注册”中就很简单了，添加文本框<input />其type属性设置为“submit”，再给它设置value值为“立即注册”，然后按钮上就会显示“立即注册”文字。最后的最后再给这个表单通过CSS进行修饰就好了。

项目实现过程中遇到的问题及解决方案

1.在HTML编写“性别”信息时，一开始出现的效果是“男”和“女”都可以选上，这让我当时很诧异，后来通过调试，才发现是因为文本框里的name属性设置的名字并不统一，在用户选择性别时如果一不小心点错了造成“男”，“女”多选的情况，会让用户觉得很奇怪同时也很尴尬，最后只要把name属性值设置为“sex”即可。
                    <span>性别：</span>
		 			<span class="xb" style="width: 228px;">
		 				<input type="radio" name="sex" value="男" checked="checked" />
		 				男
		 				<input type="radio" name="sex" value="女" />
		 				女
		 			</span>
2.html与css基本实现功能之后，但其页面美观有点不太令人舒适，如下图所示：

这就导致了文本框下面的文字统一靠左对齐，页面读取性不太友好，因此怎么把文字设置到文本框中间呢？？？

首先我们要对页面检查一下代码，看看“性别”与“兴趣爱好”的文本框设置了多长的宽度，如下图所示：

从这里可以看出文本框宽度为220px，而<span></span>标签设置的宽度为150px，所以要想把”男“和”女“放到文本框下面的正中间，只能从<span>入手，在其标签里设置style样式，设置width属性为合适的大小值，就可以实现其效果了。（前提是<span>标签里要设置class样式并且在CSS里设置text-align: center; 才可以）。
                <li class="usually">
		 			<span>性别：</span>
		 			<span class="xb" style="width: 228px;">
		 				<input type="radio" name="sex" value="男" checked="checked" />
		 				男
		 				<input type="radio" name="sex" value="女" />
		 				女
		 			</span>
		 		</li>
如上两个图片所示，我只需要在<span>标签里设置合适的宽度就可以把文字放在文本框的正下方（前提是<span>标签里要设置class样式并且在CSS里设置text-align: center; 才可以）。接下来的”兴趣爱好“也是如此。

笔记整理

1.一般input type常用的属性：

type="text"”：创建单行文本输入框

type="password"：密码输入框

type="radio"：单选按钮

type="checkbox"：复选框

type="button"：普通按钮

type="submit"：提交按钮

type="reset"：重置按钮

type="image"：图像按钮

type="hidden"：隐藏域

type="file"：文件域

2.本项目CSS中运用到的知识：

margin: 0 auto;

“这个元素处于其父元素的居中位置，并且这个元素的上下边距为0”

list-style: none;

“列表样式：无”

border-bottom: 1px solid #eee;

“底部边框宽度为1px，底部边框的样式为实线，底部边框的颜色为宝石蓝”

display: inline-block;

（融于行内于块级）“就相当于不独占一行的块级元素”

outline: none;
“通常用户输入表单在默认情况下，点击时有一圈蓝色轮廓线，但是通过outline: none 可以使轮廓线消失。”

box-shadow: 0 10px 15px #eee inset;

“box-shadow是阴影类型，默认的投影方式为外阴影，此参数可选；在这里我取inset值就是将外阴影变成内阴影。”（box-shadow: 0 10px 15px #eee 中因X轴（正值X轴向右）的值为0所以无阴影效果，10px代表Y轴正值为15px（正值Y轴向下）阴影效果，颜色为宝石蓝。）

        border-radius: 2px;

“设置圆角边框为2px”

        opacity: ,85;

“opacity属性指定了一个元素的透明度，也就是一个元素后面的背景被覆盖程度。”

        cursor: pointer;

“cursor指的是网页浏览时用户鼠标指针的样式或图形形状。属性值pointer就是鼠标光标为一只手。”

3.补充：

"div"与"span"标签的区别，div标签会独占一行，span标签不会；div是一个容器级别的标签，而span标签是一个文本级别的标签。

容器级别的标签可以嵌套所有标签，而文本级别的标签只可以嵌套文字/超链接/图片。