HTML5~用户注册页面的设计与实现

用户注册页面的设计与实现

需要制作的效果图如下

大概思路：我们先设置底色灰色，然后写出表单，再利用CSS给表单进行设置。
1、设置底色（css 行内式）

<style>body{background:#cccccc;}
</style>

2、制作表单

 <div id="container"><h1>用户注册页面</h1><hr/><!---表单--><form method="post" action="URL" > <label>用户名：<input type="text" name="username" > </label><br/><label>密码：<input type="password" name="pwd" ></label><br/><label>确认：<input type="password" name="pwd2" > </label><br/><label>姓名：<input type="text" name="name" ></label><br/><label>邮箱：<input type="email" name="email" ></label><br/>        <button type="submit"> 提交注册 </button></form></div>

3、进行CSS设置

<style>
#container{background:white;color:#2289F0;padding:15px;margin:100px auto 0px;width:600px;text-align:center;font-family:"微软雅黑 Light";box-shadow:10px 10px 15px  black  ;   }hr{width:80%;border:#2289F0 1px  solid  ;margin-bottom:15px;}body{background:#cccccc;}input{width:180px;height:20px;margin:5px;font-size:16px;font-family:"微软雅黑 Light";}button{width:120px;height:40px;background:#2289F0;border:0px;color:white;margin:10px;font-size:18px;font-family:"微软雅黑 Light";font-weight:bold;}button:hover{background:#00c8D0;}
</style>

代码解释：box-shadow是阴影效果
button:hover是指我们在鼠标悬浮时的样式，可以百度hover进行了解

4、我们可以看到现在表单左边，用户名那里是没有对齐的，以及我们会有一些内容的补充

autocomplete=“on” 根据记忆自动补全，意思就是我们之前输入过的内容，在此输入的时候会提示，这是默认的，如果你改成autocomplete=“off” 就会变成不提示。
placeholder=添加提示语句，就是说在文本框里你看看到相应的浅浅的提示
required非空验证，意思就是你如果没有输入，也就是如果你没有填写到内容，然后提交，他会提示你此项内容不能为空
& ensp;& ensp;这个是补全空格，只是一个& ensp; 相当于半个中文字符的长度，& emsp; 也是补全空格，只是一个& emsp; 相当于一个中文字符的长度，& ensp;& ensp;==& emsp;还有其他补全空格的形式，一共有6种。
（注意，这个写博客的时候显示就是空格，所以我在&和e之前敲到了空格，本身是没有空格的）

<div id="container"><h1>用户注册页面</h1><hr/><!---表单--><form method="post" action="URL" autocomplete="on">  <label>用户名：<input type="text" name="username"  placeholder="请输入用户名" required /> <!--placeholder=添加提示语句  required非空验证--></label><br/><label>密&ensp;&ensp;码：<input type="password" name="pwd"  placeholder="请输入密码" required /></label><br/><label>确&emsp;认：<input type="password" name="pwd2"  placeholder="请再次输入密码" required /> </label><br/><label>姓&ensp;&ensp;名：<input type="text" name="name" placeholder="请输入真实姓名" required /></label><br/><label>邮&ensp;&ensp;箱：<input type="email" name="email"  placeholder="请输入电子邮箱" required /></label><br/><button type="submit"> 提交注册 </button></form></div>

最后再把代码总的发一次

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>#container{background:white;color:#2289F0;padding:15px;margin:100px auto 0px;width:600px;text-align:center;font-family:"微软雅黑 Light";box-shadow:10px 10px 15px  black  ;  }hr{width:80%;border:#2289F0 1px  solid  ;margin-bottom:15px;}body{background:#cccccc;}input{width:180px;height:20px;margin:5px;font-size:16px;font-family:"微软雅黑 Light";}button{width:120px;height:40px;background:#2289F0;border:0px;color:white;margin:10px;font-size:18px;font-family:"微软雅黑 Light";font-weight:bold;}button:hover{background:#00c8D0;}
</style>
</head><body><div id="container"><h1>用户注册页面</h1><hr/><!---表单--><form method="post" action="URL" autocomplete="on">  <!--根据记忆自动补全--><label>用户名：<input type="text" name="username"  placeholder="请输入用户名" required /> <!--placeholder=添加提示语句  required非空验证--></label><br/><label>密&ensp;&ensp;码：<input type="password" name="pwd"  placeholder="请输入密码" required /></label><br/><label>确&emsp;认：<input type="password" name="pwd2"  placeholder="请再次输入密码" required /> </label><br/><label>姓&ensp;&ensp;名：<input type="text" name="name" placeholder="请输入真实姓名" required /></label><br/><label>邮&ensp;&ensp;箱：<input type="email" name="email"  placeholder="请输入电子邮箱" required /></label><br/><button type="submit"> 提交注册 </button></form></div>
</body>
</html>

上面所有内容为个人总结，如有任何不对的地方，可以私聊我，我会马上进行修正，如果进行转载请告知，谢谢。

HTML5~用户注册页面的设计与实现相关推荐

【HTML5表单API项目】用户注册页面的设计与实现
用户注册页面的设计与实现功能要求:使用H5表单技术实现用户注册页面,要求可以输入用户名,密码,真实姓名,电子邮箱等信息进行注册. 验证要求:每个输入栏目的文本框均需要显示提示信息,用户在单击按钮提交 ...
用户注册页面的设计与实现（html+css）
用户注册页面的设计与实现(html+css) 文章目录用户注册页面的设计与实现(html+css) 1.目的 2.内容 3.步骤 4.代码实现 5.页面展示 6.最后 1.目的熟悉HTML+CSS ...
用户注册页面的设计与实现
用户注册页面的设计与实现功能介绍: 1.使用HTML5表单技术实现用户注册页面,要求用户可以输入用户名.密码.真实姓名和电子邮箱等信息进行注册. 2.验证要求:每个输入栏目的文本框均需要显示提示信息 ...
HTML5~问卷调查页面的设计与实现
问卷调查页面的设计与实现需要制作的效果图如下本来问卷调查是白色的,但是电脑打开一整张截图截不了,所以我用了手机打开. 大概思路:我们先设置底色灰色,然后写出表单,再利用CSS给表单进行设置. 1. ...
html5好看的注册页面设计,Material Design风格用户注册登录界面设计
这是一款Material Design风格用户注册登录界面设计效果.该设计由用户登录,用户注册和忘记密码三个界面组成.设计中的所有元素都以Material Design为基础,整体效果时尚大方. 使用 ...
跨平台html5页面代码,HTML5+CSS3跨平台网页设计实例教程
HTML5+CSS3跨平台网页设计实例教程编辑锁定讨论上传视频 <HTML5+CSS3跨平台网页设计实例教程>是2018年8月清华大学出版社出版的图书,作者是陈承欢.韩耀坤.颜珍平 ...
php用户注册功能设计,利用HTML+CSS设计一个简单的用户注册页面【示例】
本篇文章将要给新手小白们介绍如何使用HTML和css制作简单的注册页面.在开发网站过程中,如果网站内容要求是完善的信息站,那么肯定就离不开用户注册的这个功能.这个用户注册界面对于刚入门的前端新手来说, ...
JavaScript网页设计:用户注册页面
JavaScript网页设计用户注册页面代码如下: <!DOCTYPE html> <html><head><meta charset="UTF- ...
html5文章页面,文章页面的设计《 HTML5 与 Bootstrap 应用实例》
文章页面的设计跟主页差不多,页头,底部边栏,还有页脚都是一样的,不同是,页面的主内容区域分成两部分 ... 左边占用 8 个网格宽度,显示文章的内容,比如标题,正文,文章的评论等等 ... 右边的边栏 ...
html5报名页面设计
在微信或者APP中但凡需要用户参与的活动,一般都会需要用户上传一些资料,这就涉及到报名页面的设计.比如在我做的心愿漂流瓶项目中,就包含报名页面,地址:发布心愿页面.在手机端打开效果图如下图1所示. 图 ...

HTML5~用户注册页面的设计与实现

用户注册页面的设计与实现

HTML5~用户注册页面的设计与实现相关推荐

最新文章

热门文章