html网页设计:一个简单的登录界面代码!

分类 : Web前端

html网页设计:一个简单的登录界面代码!

在html网页设计中,一个“登录”按钮怎么编写代码?
列如所给图片的“登录”按钮怎么用html代码显示出来,要求能够识别是否输入用户名和密码!


是这样的效果吗?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>3</title>

<script>

function r()

{

var username=document.getElementById("username");

var pass=document.getElementById("password");

if(username.value=="")

{

dualert("请输入用户名");

username.focus();

return;

}

if(pass.value=="")

{

alert("请输入密码");

return;

}

return true;

}

</script>

</head>

<body>

<form>

<table width="350" bgcolor="#ccffcc" style="border-color" border="1">

<tr align=center>

<td>用户名</td><td><input type="text" name="username" id="username"></td>

</tr>

<tr align=center><td>密 码</td><td><input type="password" name="password" id="password"></td></tr>

<tr align=center><td>验证码</td><td><input type="text" name="yanzheng"></td></tr>

<tr align=center><td colspan="2"><input type="button" value="登 录" onclick="r();"/>     <input type="reset" value="重 置"/></td></tr>

</table>

</form>

</body>

</html>



大致形式应该是这样的:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>3</title>

</head>

<body>

<div align="center">

<form action="" name="myform">

<table>

<tr>

<td>用户名:</td>

<td><input type="text" id="user" /></td>

</tr>

<tr>

<td>密  码:</td>

<td><input type="text" id="password" /></td>

</tr>

<tr>

<td>验证码:</td>

<td align="left"><input type="text" size="5" id="code" /></td>

</tr>

</table>

</form>

<table>

<tr>

<td>

<input type="submit" value="提交" onclick=myfun_submit() />

</td>

<td>

<input type="submit" value="重置" onclick=myfun_reset() />

</td>

</tr>

</table>

</div>

<script type="text/javascript">

function myfun_submit(){

var user_val = document.getElementById("user").value;

var password_val = document.getElementById("password").value;

if(user_val==""){

alert("用户名不能为空!!");

}else if(password_val==""){

alert("密码不能为空!!!");

}

}

function myfun_reset(){

document.getElementById("user").value = "";

document.getElementById("password").value = "";

document.getElementById("code").value = "";

}

</script>

</body>

</html>




相关文章

 


分类: Web前端    访问() .NET技术    Web前端    JAVA开发    HTML基础    数据库    CSS基础    电脑知识   
CSS教程-web前端教程-免费教程
HTML教程-web前端教程-免费教程


分类

.NET技术 Web前端 JAVA开发 HTML基础 数据库 CSS基础 电脑知识

随机阅读

JavaScript 中的 let 和 const 关键字
html入门网页制作 零基础学习网页制作,从何学起
JavaScript 调试技巧
ASP.NET Core 奇技淫巧之接口代理转发
JS特效代码,纯CSS简洁TAB标签代码
oracle sql like多个条件函数
oracle数据库模糊查询匹配多个字符串
oracle字段like多个条件
Java:String和Date、Timestamp之间的转换
Spring Boot 教程 - MyBatis-Plus


最新

零基础学习C语言,怎么入门?
C语言使用什么软件?
c语言用什么软件编写(新手c语言基础知识入门)
Oracle如何实现like多个值的查询
Oracle如何实现like多个值的查询 - 数据库
oracle 多个like条件查询
Oracle中关键字like的使用总结
oracle 中模糊查询对like的代替insrt()函数
oracle数据库模糊查询匹配多个字符串
Oracle如何实现like多个值的查询 - Oracle - 服务器

推荐阅读

vscode----vue中HTML代码tab键自动补全
html如何实现鼠标悬停显示文字,鼠标移走文字消失。
c语言中break语句的作用
C#语言之“string格式的日期时间字符串转为DateTime类型”
undefined是什么意思啊
DIV CSS字体(font-family)实现字体样式设置
AirPods怎么删除配对过的设备 airpods可以和电脑连接的
js 中日期 转换成时间戳 例如2013-08-30 转换为时间戳
risk-taking中文是什么意思
replace和replaceAll是JAVA中常用的交换字符的办法

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16