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. jsp前3章试题分析

    /bin:存放各种平台下用于启动和停止Tomcat的脚本文件 /logs:存放Tomcat的日志文件 /webapps:web应用的发布目录 /work:Tomcat把由JSP生成的Servlet存放 ...

  2. sqlServer下展示某库中所有的表

  3. caffe的python接口学习（8）：caffemodel中的参数及特征的抽取

    如果用公式  y=f(wx+b) 来表示整个运算过程的话,那么w和b就是我们需要训练的东西,w称为权值,在cnn中也可以叫做卷积核(filter),b是偏置项.f是激活函数,有sigmoid.relu ...

  4. Sqoop2搭建及使用

    1. 下载并安装配置Sqoop [需要的环境:Hadoop,Java] 首先  Hadoop版本2.7.2 20161013 找了篇Sqoop的文章就开撸  结果发现什么1.3,1.9,又有什么Sqo ...

  5. .NET跨平台之旅：将示例站点从ASP.NET 5 Beta7升级至RC1

    今天,我们将示例站点(about.cnblogs.com,服务器操作系统是Ubuntu)从ASP.NET 5 Beta7升级到了RC1,在升级过程中只遇到了一个问题. 在运行 dnvm upgrade ...

  6. @Autowired的使用

    1.benas的xml文件中需要加入如下代码 <bean class="org.springframework.beans.factory.annotation.AutowiredAn ...

  7. 【USACO 2.4】The Tamworth Two

    题意:C代表cows,F代表farmer,一开始都向北,每分钟前进1步,如果前方不能走,则这分钟顺时针转90°,问多少步能相遇,或者是否不可能相遇,10*10的地图. 题解:dfs,记录状态,C和F的 ...

  8. facebook 用curl获取用户资料

    用facebook获取用户信息 $graph_url= "https://graph.facebook.com/me?scope=email&fields=id,name,email ...

  9. bzoj4591 【Shoi2015】超能粒子炮·改

    由Lucas定理C(n,k)=C(n/2333,k/2333)*C(n%2333,k%2333)%2333 则ans=ΣC(n,i),(i<=k)  =C(n/2333,0)*C(n%2333, ...

  10. 使用 zssh 进行 Zmodem 文件传输

    Zmodem 最早是设计用来在串行连接(uart.rs232.rs485)上进行数据传输的,比如,在 minicom 下,我们就可以方便的用 Zmodem (说 sz .rz 可能大家更熟悉)传输文件 ...