一个简单的网页登陆(html)

今天和大家分享如何用html做一个简易版的登陆网页。
一般简单的登陆页面有用户名、密码框以及提交与清空两个按钮，效果图如下所示：

1.首先网页制作中应当包含两个部分head以及body;

<html><head></head><body></body>
</html>

2.在head中设置标题为“登陆页面”，把左间距与上间距分别设为535px和20px（也可以点开所制作网页的链接ctr+shift+i键查看源代码，通过尝试设置一个合适的间距），为了让代码简单一点导入了jquery包，设置登陆函数，通过jquery来获取按键信息，逻辑是这样的：首先对用户名和密码进行非空校验，除去空格，判断是否已经输入了用户名，如果没有鼠标自动放在用户名框内，密码同样如此；如果两框内都有相应的“值”，点击提交之后，会弹出登陆成功页面。

选择清空的话会有提示框出现，防止误点现象发生。

head内代码如下图所示

<head><meta charset="utf-8"><title>登录页面</title><style>.innerDiv{margin-left: 535px;margin-top: 20px;}</style><script src ="jquery-1.9.1.min.js"></script><script>function myck(type){var input_username = jQuery("#username");var input_pwd = jQuery("#pwd"); if(type == 1){//提交非空校验if(input_username.val().trim() == ""){alert("请先输入用户名");input_username.focus();return false;}if(input_pwd.val().trim()==""){alert("请先输入密码");input_pwd.focus();return false;}alert("登录成功");}else if(type == 2){if(confirm("是否清空数据？")){input_username.val("");input_pwd.val("");}}}</script></head>

3.body内分为四大块，登陆文字、用户名输入、密码输入、提交清除，都通过div进行包裹，通过style设置其文字大小与间距。
body代码如下：

<body><div style="margin-top: 100px;margin-left: 600px;"> <span style="font-size: 60px;"><div>登录</div></div>   <div class="innerDiv">用户名:<input id = "username" type="text" placeholder="请输入用户名"></div></div></div>   <div class="innerDiv">密&nbsp&nbsp&nbsp码:<input id = "pwd" type="password" placeholder="请输入密码"></div></div><div class="innerDiv"><span style="margin-left: 90px;"><input type="button" onclick="myck(1)" value="提交"><input type="button" onclick="myck(2)" value="清空"></span></div></body>

一个简单的网页登陆(html)相关推荐

使用H5中的表单标签制作一个简单的网页登陆页面
简单介绍H5当中的表单标签.<form></form>表示定义一个表单的开始和结束.在form标签中,有主要的三个属性,action表示声明表单中的数据的处理的url地址.me ...
github密码格式_如何使用GitHub构建一个简单的网页（不用框架版本）
1.申请GitHub账号进入GitHub官网,点击右上角的Sign up进行注册, 注册很简单,只要填写好用户名,邮箱,密码就行(已注册的用户名,邮箱不能再进行注册) 下面有一个你是人类的验证(照着 ...
python3一个简单的网页抓取
python3一个简单的网页抓取都是学PYTHON.怎么学都是学,按照基础学也好,按照例子增加印象也好,反正都是学 import urllib import urllib.requestdata={ ...
如何用Html+css3写一个简单的网页
!DOCTYPE html> */我这次利用一门前端开发语言Html开发一个简单的网页/* <html> <hea ...
一个简单的网页抓取工具
前两天遇到一个妹子,她说不会从拉网页,我想用node做个网页抓取工具是何尝的简单,于是装x之路开始了. 其实想法很简单,由网址得到html,由html解析css,js,image等,分别下载就行了, ...
使用html 语言建立一个简单的网页,如何用记事本建立简单的网页(1).doc
第九章网页制作实验一用记事本建立简单的HTML文件 [实验目的] 学会用HTML语言建立一个简单的网页. [实验内容] 建立一个网页,布局自定,包括自我介绍.图片.自己的电子信箱地址等,要求在标 ...
教你快速制作一个简单的网页
像下面这样一个简单的网页怎么制作呢? 通过这篇文章,可以让你基本掌握一个HTML的结构和常用标签的使用需要用到的常用标签 <b> 加粗</b> ~~~~~~~~~~~~~~~ ...
前端：使用BootStrap搭建一个简单的网页
之前有想法学习一下前端框架的,后来没有坚持下来.连最基础的栅格系统都忘记了.于是,花了一点时间,重新温习了一下.写了一个简单的网页.页面大致是下面这张图.做得比较一般,不过能够自适应各种设备大小了. ...
application实现一个简单的网页计数器
该篇文章首发于我的个人博客:http://cherryblog.site/ 使用github+coding+hexo搭建的静态博客,更多文章请移步至我的个人博客 application(应用对象):存 ...

一个简单的网页登陆(html)

一个简单的网页登陆(html)相关推荐

最新文章

热门文章