html输入框placeholder颜色_HTML+CSS+JavaScript模拟登陆注册数据验证（二）

“

登录界面想必是我们生活中非常常见的一个网页，最典型的，就比如：游戏登录、邮箱登录，抑或是我们身边的爱云校。

本次，杨老师就带领同学们来学习了如何制作一个简单的登录界面。

”

github：https://yangdan1992.github.io/calculator/denglu-1.html

01

CSS——“有头有脸”

搭建网页，通常先要设计它的外观——也就是元素与样式。打开你的Dw后，新建一个html文件，title标记中间改为登录。

首先设置好背景颜色等等

*/*所有样式最高级选择器*/{      margin: 0px;      padding:0px;      background: #E9E9E9;}

(设置内外边距为0px是为了让元素与网页边缘之间没有空隙)

为了网页的美观，我们要在网页上方拉一条线，你也可以理解为占地方。

在中创建一个div标记class名为“line“：

在head中添加style标记，开始设置其样式(让它看起来是一条好看的线)：

.line{      height: 5px;      background: #FFDF3D;  }

(反正就是装饰物，怎么好看怎么来。记得打分号，接下来将不再提醒)

设置登录界面中间的“功能区“

观察效果图：

logo，标题，和登录操作区以及注册的超链接都集中在网页中间，设置一个div标记存放这些东西，class名“content”：

设置样式(样式都在head里)，调整位置

.content{      text-align: center;      margin-top: 50px;}

以网页制作的手段插入logo图片：

(此处用到的是img标记，src插入图片，图片的文件夹要与网页的相同才能顺利添加，并且文件夹名和文件名不能出错)

再添加文字“登录”所需要的标记，并设置文字样式：

登录

h1{      color: #676767;      font-family: 微软雅黑;      margin-top: 20px;}

添加一个form表单标记，将操作区需要的所有标记层次分明地添加出来并设置id、class名：

(placeholder：原本文本框里默认出现的文字)

(需要两个文本框、一个登录按钮)

(直接在标记中设置按钮名字：value=“登录”)

设置样式：

form{      background: #FFFFFF;      border:solid 1px #D0D0D0;      width: 300px;      margin:30px auto;      padding:20px 0;} input{      width: 250px;      height: 30px;      outline: none;/*轮廓*/      border: solid 1px #D0D0D0;      border-radius: 10px;      background: #fff;      margin:10px 0px;      font-family: 微软雅黑;      font-size: 16px;      padding-left: 10px;}.btn{      background: #FFDF3D;      width: 87%;      color: #FFFFFF;      cursor: pointer;}.btn:hover{      background: #F9FF46;}

(用hover，单独使登录按钮有另外的颜色)

当你没有输入用户名密码时，会有警示语出现，文本框之间添加p标记存放：

#remind_u,#remind_p{      color: #FF1E1E;      background: #FFFFFF;      text-align: left;      padding-left: 26px;      font-family: 微软雅黑;      font-size: 10px;}

最后是超链接(a标记)：

没有帐户？

注册

a{      text-decoration: none;      color: #005CFF;      font-family: 微软雅黑;}#sg2{      color: #4D4D4D;}

样式设置结束。

02

“识别正确”——“功能实现”

Body中打出script标记，首先定义所需变量：

var username = document.getElementById("username");var password = document.getElementById("password");var remind_u = document.getElementById("remind_u");var remind_p = document.getElementById("remind_p");

设置你点进文本框时发生的事件、不点进去时的事件：

利用if...else if...else...，写出控制“警示语”的程序：

function verify_username(){      if(username.value == ""){        remind_u.innerHTML = "请输入用户名！";      }else{        remind_u.innerHTML = "";      }}function verify_password(){      if(password.value == ""){        remind_p.innerHTML = "请输入密码！";      }else{        remind_p.innerHTML = "";      }}function input_username(){      remind_u.innerHTML="";}function input_password(){      remind_p.innerHTML="";}

if和else if后面加小括号，括号里加判断条件，两个=用于判断，一个=用于定义。

然后着手最后几个问题：数据的提交，登录是否成功的判断、网页的跳转。

设置登录按钮被点击时的事件以及以action确定成功登录——也就是提交数据以后刷新到哪个网页

这个网页需要新建一个html文件来制作，你可以仅仅是让上面写上“登录成功”几个大字，当然也可以是别的什么网页——如果你足够聪明的话，这里就不详讲了。别忘了一定要输入正确的文件夹路径。

仍然是定义函数以及if...else if... else...：

function submitText(){      if(username.value==""&& password.value==""){        remind_u.innerHTML = "请输入用户名！";        remind_p.innerHTML = "请输入密码！";        return false;      }else if(username.value!=""&& password.value==""){        remind_u.innerHTML = "";        remind_p.innerHTML = "请输入密码！";        return false;      }else if(username.value==""&& password.value!=""){        remind_u.innerHTML = "请输入用户名！";        remind_p.innerHTML = "";        return false;      }else if(username.value=="xjy"&& password.value=="123456"){        return true;      }else{        alert("用户名或密码错误！");        return false;      } }

这里是判断输入的用户名和密码是否正确，并相应的决定按下登录按钮时是否刷新，顺便也相应地打出警示语。

&&可以理解为“并且”，因为这时我们需要判断两个条件，&&就是其中的连结。它可以连结两个以上的判断条件。

最后：到这里，登录网页就基本完成了。以此类推，我们也可以制作出注册界面等等。

当然，这次网页制作是没有真正的数据支持的——账户密码都已经在脚本中写好了，真正的登录注册肯定不能把账户密码全部都写到脚本里啊！

页面制作、代码编写、图文撰写：

全能的八年级徐佳怡