HTML+CSS制作登录界面+H5表单特性

最新推荐文章于 2024-04-24 10:01:52 发布

开心肖肖乐-

最新推荐文章于 2024-04-24 10:01:52 发布

阅读量1.7k

点赞数 1

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/weixin_45750195/article/details/105173948

版权

HTML 同时被 2 个专栏收录

19 篇文章 2 订阅

订阅专栏

CSS

16 篇文章 1 订阅

订阅专栏

首先，给大家看一下效果图。不过这里用到了一些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="&nbsp;&nbsp;登录账号" data-validate="required:请填写密码"/>
     <span><i class="fa fa-user-o" aria-hidden="true"></i></span>
     
     <input type="password" class="box" placeholder="&nbsp;&nbsp;登录密码" 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;}

开心肖肖乐-

关注

1
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS制作登录界面+H5表单特性

首先，给大家看一下效果图。不过这里用到了一些H5表单的新特性，下面在来讲解。HTML5新增的表单属性autocomplete属性autocomplete属性用于指定表单是否有自动完成功能。所谓“自动完成”是指将表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一一个下拉列表里，以实现自动完成输入。autocomplete属性有2个值:on: 表单有自动完成功能。...
复制链接

扫一扫