html用户注册界面

 

先上一张简约的界面的效果图

这里是style里面的内容

<style>

        input[type]{

            border: 1px solid darkorange;

            background: white;

        }

        #button{

            border: 10px solid orange;

            width: 200px;

            box-shadow:0px 4px 5px #666;

            background: orange;

            color: white;

        }

    </style>

再来body里面的内容,这里用到的是失焦 onblur  和聚焦 onfocus

<body>
<center>
<div>
<form>
<h3>用户注册</h3>
<hr>
<p>用户名:<input type="text" id="name" placeholder="请填写用户名" required="required" onblur="name1()" <!--onfocus="name2()-->"><br><span id="tel"></span></p>
<p>密码:<input id="paswd" type="password" placeholder="请填写密码" onblur="pwd1()" required="required" onfocus="pwd2()"><br><span id="pw"></span></p>
<p>确认密码:<input id="paswd2" type="password" placeholder="请确认密码" required="required" onkeyup="validate()" ><br><span id="qpwtx"></span></p>
<p>邮箱:<input type="email" placeholder="请填写邮箱" required="required"></p>
<p><input type="checkbox" required="required">我已阅读注册手册</p>
<p><input type="submit" id="button" value="注册"></p>
</form>
</div>
</center>
</body>

最后是js里面的代码

<script>
function name1(){
var name=document.getElementById("name").value;
if(name.length==""){
document.getElementById("tel").innerHTML="用户名不能为空"
document.getElementById("tel").style.color="red";
}else{
document.getElementById("tel").innerHTML="√"
document.getElementById("tel").style.color="green";
}
}
// function name2(){
// document.getElementById("tel").innerHTML="请填写用户名"
// document.getElementById("tel").style.color="#999";
// }
function pwd2(){
document.getElementById("pw").innerHTML="请填写6-12位的密码"
document.getElementById("pw").style.color="#999";

}
function pwd1(){
p=document.getElementById("paswd").value;

if(p.length>=6&&p.length<=20)
{
document.getElementById("pw").innerHTML="√"
document.getElementById("pw").style.color="green";
}else{
document.getElementById("pw").innerHTML="格式错误,请输入6-20位"
document.getElementById("pw").style.color="red";
}
}
function validate(){
var qpw=document.getElementById("paswd").value;
var qpw2=document.getElementById("paswd2").value;

if(qpw==qpw2 && p.length>=6&&p.length<=20){
document.getElementById("qpwtx").innerHTML="<font color='green'>√</font>";
document.getElementById("button").disabled = false;
}
else { 
document.getElementById("qpwtx").innerHTML="<font color='red'>两次密码不相同或者格式错误</font>";
document.getElementById("button").disabled = true;
}
}

</script>

html用户注册界面的更多相关文章

  1. php创建新用户注册界面布局实例

    php创建新用户注册界面布局实例 <!DOCTYPE> <html> <head> <title>Load page</title> < ...

  2. html+css的用户注册界面

    注册界面样图 代码实现 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  3. Android之QQ新用户注册界面1

    还没到睡觉时间所以再加了一个界面... 问题: 1.下拉列表(因为还没看到这里...) 2.标题栏显示问题 3.按钮的 Enable 设置 .......... 以下是代码: 布局 fragment_ ...

  4. Java-Web 用html写一个简单的用户注册界面

    代码: <!doctype htpl> <html> <head> <meta charset="utf-8" /> <tit ...

  5. Android物联网应用程序开发（智慧城市）—— 用户注册界面开发

    效果: 布局代码: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns: ...

  6. HTML登录注册界面怎么制作？

    在没有学习CSS样式的前提下,是如何做一个简单的注册界面的. 一.表单标签(form) 首先我们先写一个<form></form>的标签,form标签属于表单标签,通常我们的登 ...

  7. express框架+jade+bootstrap+mysql开发用户注册登录项目

    完整的项目代码(github):https://github.com/suqinhui/express-demo express是基于Node.js平台的web应用开发框架,用express框架开发w ...

  8. HTML表格表单综合——用户注册表

    今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

  9. ASP.NET Core 一步步搭建个人网站（2）_一键部署和用户注册登录

    俗话说,磨刀不费砍柴工.为了更方便的进行项目管理,我们先将个人网站项目配置一下,满足以下2个目标: VS2017中支持Git存储库,绑定Github项目,实现本地VS程序与线上Github一键代码提交 ...

随机推荐

  1. 【C#】【Thread】Barrier任务并行

    Barrier  是一个对象,它可以在并行操作中的所有任务都达到相应的关卡之前,阻止各个任务继续执行. 如果并行操作是分阶段执行的,并且每一阶段要求各任务之间进行同步,则可以使用该对象. --MSDN ...

  2. Andrew N.G的机器学习公开课学习笔记（一）：机器学习的动机与应用

    机器学习由对于人工智能的研究而来,是一个综合性和应用性学科,可以用来解决计算机视觉/生物学/机器人和日常语言等各个领域的问题,机器学习的目的是让计算机具有像人类的学习能力,这样做是因为我们发现,计算机 ...

  3. PhpStorm XDebug 远程调试

    现在我们自己公司的各种开发和测试服务器,都是使用阿里云的服务器.一些PHP的项目,无法在本地搭建完整的环境,在外网服务器上调试更方便定位问题.发现网上没有完整的关于如何配置PHPStorm和XDebu ...

  4. Android View 事件分发机制 源码解析 （上）

    一直想写事件分发机制的文章,不管咋样,也得自己研究下事件分发的源码,写出心得~ 首先我们先写个简单的例子来测试View的事件转发的流程~ 1.案例 为了更好的研究View的事件转发,我们自定以一个My ...

  5. Moto C118 基于 Osmocom-BB 和 OpenBTS 搭建小型GSM短信基站

    此文章PDF文档下载地址:点击下载 0x00 写在前面 大家应该都听说过摩托罗拉C118配合Osmocom-BB实现GSM网络下的短信拦截功能吧,在14年左右新出了一种玩法就是Osmocom-BB的s ...

  6. 聊聊 Web 项目二维码生成的最佳姿势

    在设计和实现的过程之后,你永远不知道部署上去的程序会已什么样的姿势运行. 本篇借一次生成二维码逻辑的不同实现,阐述 Web 项目中二维码生成的正确姿势. 文中如有批量,欢迎各位看客老爷拍砖.试运行前5 ...

  7. 【JavaScript】操作Canvas画图

    1.页面添加 Canvas 标签 标签内可以写文字,浏览器不支持Canvas的情况下显示, 2.js获取 Canvas 标签 3.利用js函数画图,[线][图][文字] 源:http://www.li ...

  8. hibernate通过xml配置文件实现表与实体的映射

    这里讨论的是一对多的关系 在做公交卡系统,会涉及到两张表,忽略两种表的作用,只关心他们之间的关系 : 卡规格表和卡类表,一种卡规格会对应多个卡类 实体类: /** * 卡类型表的实体 */ publi ...

  9. html与htm区别

    1.index.html与index.htm同时有,先访问.html 2.htm是为了兼容以前的DOS系统.

  10. [转]EL表达式和JSTL表达式实例

    /* **Title:EL表达式和JSTL表达式实例 **Author:Insun **Blog:http://yxmhero1989.blog.163.com/ */ 为了方便写JSP,我们引入了E ...