首先,给大家看一下效果图。不过这里用到了一些H5表单的新特性,下面在来讲解。
HTML5新增的表单属性
-
autocomplete属性
autocomplete属性用于指定表单是否有自动完成功能。
所谓“自动完成”是指将表单控件输入的内容记录下来,当再次输入时,会将输入的历史记录显示在一一个下拉列表里,以实现自动完成输入。
autocomplete属性有2个值:
on: 表单有自动完成功能。
off:表单无自动完成功能。 -
novalidate属性
novalidate属性用于指定在提交表单时取消对表单进行有效的检查。为表单设置该属性时,可以关闭整个表单的验证.
-
input标签
试验代码部分
这一个页面的框架主
要是通过一个大的div标记,然后在里面放标题标记和input标签。输入框最右边是使用的字体图标,然后设置了相应的透明属性和圆角属性。
下面是实现代码:
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="login.css">
</head>
<body >
<div class="div1">
<h2 align="center">网课学习登录</h2>
<div>
<form action="" method="">
<input type="text" class="box" placeholder=" 登录账号" data-validate="required:请填写密码"/>
<span><i class="fa fa-user-o" aria-hidden="true"></i></span>
<input type="password" class="box" placeholder=" 登录密码" style="margin-top: 30px;"/>
<span><i class="fa fa-key" aria-hidden="true"></i></span>
<input type="button" value="登录" class="log" autocomplete="on"/><br>
<a href="#">没有账号?点击注册</a>
</form>
</div>
</div>
</body>
</html>
CSS部分:
body{
width: 100%;
background: url(bg.jpg) repeat-y;
background-size: cover;
}
.div1{
position: fixed;
width: 450px;
height: 280px;
margin-left: 35%;
margin-top: 9%;
background-color: white;
border-radius: 15px;
filter: opacity(0.8);
}
.box{
width: 250px;
height: 30px;
border: gray 2px solid;
border-radius: 5px;
}
.log{
width: 120px;
height: 40px;
background-color: deepskyblue;
border-radius: 5px;
margin-top: 30px;
margin-left: 65px;
}
.div1 div{margin-left: 100px;}
i{margin-left: -30px;}
a{font-size: 12px;
margin-left: 70px;}