一个简单的form表单登录界面

这个表单挺不错的，适合大多数登录了，分享一下

<head><meta charset="UTF-8"><title>登录</title><link rel="stylesheet" type="text/css" href="css/login.css">
</head>
<body>
<div class="main"><div class="title"><span>密码登录</span></div><div class="title-msg"><span>请输入登录账户和密码</span></div><form class="login-form" action="/authentication/form" method="post" novalidate ><!--输入框--><div class="input-content"><!--autoFocus--><div><input type="text" autocomplete="off"placeholder="用户名" name="username" required/></div><div style="margin-top: 16px"><input type="password"autocomplete="off" placeholder="登录密码" name="password" required maxlength="32"/></div></div><!--登入按钮--><div style="text-align: center"><button type="submit" class="enter-btn" >登录</button></div><div class="foor"><div class="left"><span>忘记密码 ?</span></div><div class="right"><span>注册账户</span></div></div></form></div>
</body>

body{background: #353f42;
}*{padding: 0;margin: 0;
}.main {margin: 0 auto;padding-left: 25px;padding-right: 25px;padding-top: 15px;width: 350px;height: 350px;background: #FFFFFF;/*以下css用于让登录表单垂直居中在界面,可删除*/position: absolute;top: 50%;left: 50%;margin-top: -175px;margin-left: -175px;
}.title {width: 100%;height: 40px;line-height: 40px;
}.title span {font-size: 18px;color: #353f42;
}.title-msg {width: 100%;height: 64px;line-height: 64px;
}.title:hover{cursor: default   ;
}.title-msg:hover{cursor: default   ;
}.title-msg span {font-size: 12px;color: #707472;
}.input-content {width: 100%;height: 120px;
}.input-content input {width: 330px;height: 40px;border: 1px solid #dad9d6;background: #ffffff;padding-left: 10px;padding-right: 10px;
}.enter-btn {width: 350px;height: 40px;color: #fff;background: #0bc5de;line-height: 40px;text-align: center;border: 0px;
}.foor{width: 100%;height: auto;color: #9b9c98;font-size: 12px;margin-top: 20px;
}.enter-btn:hover {cursor:pointer;background: #1db5c9;
}.foor div:hover {cursor:pointer;color: #484847;font-weight: 600;
}.left{float: left;
}
.right{float: right;
}

一个简单的form表单登录界面相关推荐

flask与简单的form表单
flask与简单的form表单文章目录 flask与简单的form表单视频代码 flask html 视频 https://www.bilibili.com/video/BV17W41177oE ...
运用php制作一个表单,PHP 表单处理,一个简单的 HTML 表单
PHP 超全局变量 $_GET 和 $_POST 用于收集表单数据(form-data). PHP - 一个简单的 HTML 表单,我们在平时运用PHP这门语言的时候,最频繁的是就是表单提交了.如:用 ...
asp.net使用post方式action到另一个页面，在另一个页面接受form表单的值！（报错，已解决！）...
asp.net使用post方式action到另一个页面,在另一个页面接受form表单的值!(报错,已解决!) 原文:asp.net使用post方式action到另一个页面,在另一个页面接受form表单 ...
HTML5的表单——登录界面
表单:负责采集用户输入的信息,由相当多的表单元素组成. 基本语法: method:get和post,默认为get.用这种方式提交数据用于设置表单数据的提交方式,保密性差且有数据量限制.post不但保密 ...
使用php创建一个注册表单,如何实现一个简单的注册表单
创建一个注册表单是非常容易的 - 它事实上意味着,你只需要创建一个表单,表单将更新一些User的模型对象(这个例子是一个Doctrine实体)并保存它. 受欢迎的FOSUserBundle 提供了一个 ...
实现一个vue2的Form表单插件
elements组件集源码 1. 代码结构 2. ElementTest.vue <template><el-form :model="userInfo" :ru ...
一个简单的用表单标签做的html学生入校注册页面
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding=& ...
sharepoint 2013基于AD的Form表单登录（三）——选择用户时，屏蔽掉AD。
//来源:http://www.cnblogs.com/lrforever/p/3695820.html 隐藏AD人员选择,$ad.IsVisible设置为true,则显示出AD里用户 $cpm = ...
elementui 按钮表单_仿ElementUI实现一个Form表单的实现代码
使用组件就像流水线上的工人:设计组件就像设计流水线的人,设计好了给工人使用. 一. 目标仿 ElementUI 实现一个简单的 Form 表单,主要实现以下四点: Form FormItem Inp ...
简易封装 element form表单
1.Form 表单由输入框.选择器.单选框.多选框等控件组成,用以收集.校验.提交数据典型表单包括各种表单项,比如输入框.选择器.开关.单选框.多选框等. 在 Form 组 ...

一个简单的form表单登录界面

一个简单的form表单登录界面相关推荐

最新文章

热门文章