【HTML5表单API项⽬】⽤户注册页⾯的设计与实现
⽤户注册页⾯的设计与实现
功能要求：使⽤H5表单技术实现⽤户注册页⾯，要求可以输⼊⽤户名，密码，真实姓名，电⼦邮箱等信息进⾏注册。
验证要求：每个输⼊栏⽬的⽂本框均需要显⽰提⽰信息，⽤户在单击按钮提交注册信息时可以验证所有栏⽬均为必填项以及电⼦邮箱的有效性。
最终效果图：
1、为所有输⼊框添加提⽰语句
——使⽤input标签的placeholder属性实现提⽰效果
相关HTML 5代码⽚段修改如下：
<form method="post"action="URL">
<label>⽤户：
<input type="text"placeholder="请输⼊⽤户名"name="username"/>
</label>
<br/>
<label>密码：
<input type="password"placeholder="请输⼊密码"name="pwd"/>
</label>
<br/>
<label>确认：
<input type="password"placeholder="请再次输⼊密码"name="pwd2"/>
</label>
<br/>
<label>姓名：
<input type="text"placeholder="请输⼊真实姓名"name="name"/>
</label>
<br/>
<label>邮箱：
<input type="email"placeholder="请输⼊电⼦邮箱"name="email"/>
</label>
<br/>
<button type="submit">
提交注册
</button>
</form>
页⾯效果：
2、为所有输⼊框添加⾮空验证
——使⽤input标签的required属性添加⾮空验证
相关HTML5代码修改如下：
<form method="post"action="URL">
<label>⽤户：input标签placeholder属性
<input type="text"placeholder="请输⼊⽤户名"name="username"required/>
</label>
<br/>
<label>密码：
<input type="password"placeholder="请输⼊密码"name="pwd"required/>
</label>
<br/>
<label>确认：
<input type="password"placeholder="请再次输⼊密码"name="pwd2"required/> </label>
<br/>
<label>姓名：
<input type="text"placeholder="请输⼊真实姓名"name="name"required/>
</label>
<br/>
<label>邮箱：
<input type="email"placeholder="请输⼊电⼦邮箱"name="email"required/>
</label>
<br/>
<button type="submit">
提交注册
</button>
</form>
运⾏的效果图：
3、为电⼦邮箱进⾏有效性验证
——使⽤input标签的email类型对电⼦邮箱进⾏有效性验证
相关HTML5代码⽚段：
<label>邮箱：
<input type="email"  name="email" />
</label>
运⾏效果图：
4、为输⼊内容进⾏记忆及下次输⼊时⾃动补全
——使⽤form标签的autocomplete属性实现内容的⾃动记忆补全
相关HTML5代码如下：
<form method="post" action="URL" autocomplete="on">
...
</form>
运⾏效果图：
完整代码：
HTML5部分：
<!DOCTYPE html>
<html>
<head>
<meta  http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>⽤户注册页⾯的设计与实现</title>
<link rel="stylesheet" href="reg.css">
</head>
<body>
<div id="container">
<!--页⾯标题-->
<h1>⽤户注册页⾯</h1>
<!--⽔平线-->
<hr/>
<!--表单-->
<form method="post" action="URL" autocomplete="on">
<label>⽤户：
<input type="text" placeholder="请输⼊⽤户名" name="username" required/>
</label>
<br/>
<label>密码：
<input type="password" placeholder="请输⼊密码" name="pwd" required/>
</label>
<br/>
<label>确认：
<input type="password" placeholder="请再次输⼊密码" name="pwd2" required/>            </label>
<br/>
<label>姓名：
<input type="text" placeholder="请输⼊真实姓名" name="name" required/>
</label>
<br/>
<label>邮箱：
<input type="email" placeholder="请输⼊电⼦邮箱" name="email" required/>
</label>
<br/>
<button type="submit">
提交注册
</button>
</form>
</div>
</body>
</html>
CSS部分：
body{
background-color:#CCCC;/*背景设置为浅灰⾊*/
}
/*注册⾯板样式*/
#container{
background-color:white;
color:#2289F0;
padding:15px;
margin:100px auto 0px;/*各边内边距15px，上边距100px，居中显⽰，下边距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;
}
/*输⼊表单样式*/
input{
width:180px;
height:20px;
margin:5px;
font-size:16px;
font-family:"微软雅⿊ Light";
}
/*按钮样式*/
button{
width:120px;
height:40px;
margin:10px;
background-color:#2289F0;
border:0px;
color:white;
font-size:18px;
font-family:"微软雅⿊ Light";
font-weight:bold;
}
/*⿏标悬浮时按钮样式*/
button:hover{
background-color:#0068D0;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。