❶ 如何写一个web登陆网页
这个不是几句话就能说出来的 ，需要做很多的配置文件处理，前端比较简单的就不要说了，你要有php的服务器和mysql数据库，然后你得装环境，让你的php能运行起来，你需要用代码配置接口，服务器，如果没有接触过这个的话，估计很难成功
❷ 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登陆页面的全部代码
51aspx上一大锥
❹ JAVA Web 编写登陆界面
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!-- fck编辑器引入-->
<%@ taglib uri="/FCKeditor" prefix="FCK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script language="javascript" src="<%=path%>/images/js/calendar.js">
</script>
<script type="text/javascript">
var getNow = new Date().getYear() + '-' + new Date().getMonth() + '-'
+ new Date().getDate();<!--标题验证-->
function testtitle(){
var title=document.getElementsByName("t_notice.title")[0].value;
var titleSpan=document.getElementById("titleSpan");
if(title.length==0){
titleSpan.innerHTML='公告标题不能为空';
titleSpan.style.color='red';
return false;
}else if(title.length>=50){
titleSpan.innerHTML='公告标题长度不能超过50';
titleSpan.style.color='red';
return false;
}else{
titleSpan.innerHTML='正确';
titleSpan.style.color='green';
return true;
}
}
<!-- 有效时间-->
function DateDiff(sDate1, sDate2){ //sDate1和sDate2是2006-12-18格式 ，时间天数之差
var aDate, oDate1, oDate2, iDays ;
aDate = sDate1.split("-") ;
oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) ; //转换为12-18-2006格式
aDate = sDate2.split("-") ;
oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) ;
iDays = parseInt((oDate1 - oDate2) / 1000 / 60 / 60 /24) ; //把相差的毫秒数转换为天数
return iDays ;
}
function testbegindate(){//判断生效时间
var begindate=document.getElementsByName("t_notice.begindate")[0].value;
var begindateSpan=document.getElementById("begindateSpan");
var result=DateDiff(getNow,begindate)+30;
if(begindate.length==0){//生效时间未选
begindateSpan.innerHTML='生效时间不能为空';
begindateSpan.style.color='red';
return false;
}else{//生效时间有选
if(result>0){//当前时间在选中的时间之后，这个生效时间可以
begindateSpan.innerHTML='生效时间不能小于当前时间';
begindateSpan.style.color='red';
return false;
}else{
begindateSpan.innerHTML='正确';
begindateSpan.style.color='green';
return true;
}
}
}
function testenddate(){//判断失效时间
var begindate=document.getElementsByName("t_notice.begindate")[0].value;
var begindateSpan=document.getElementById("begindateSpan");
var enddate=document.getElementsByName("t_notice.enddate")[0].value;
var enddateSpan=document.getElementById("enddateSpan");
if(begindate.length==0){//生效时间未选
begindateSpan.innerHTML='生效时间不能为空';
begindateSpan.style.color='red';
return false;
}else if(enddate.length==0){//失效时间未选
enddateSpan.innerHTML='失效时间不能为空';
enddateSpan.style.color='red';
return false;
}
var result=DateDiff(begindate,enddate);
if(result>0){//生效时间在失效时间之后
enddateSpan.innerHTML='失效时间不能小于生效时间';
enddateSpan.style.color='red';
return false;
}else{
enddateSpan.innerHTML='正确';
enddateSpan.style.color='green';
return true;
}
}
//添加附件
var i=1;
function addMore(){
var buttonSpan=document.getElementById("buttonSpan");
if (i > 3) {
buttonSpan.innerHTML='附件个数不能超过3个';
buttonSpan.style.color='red';
return false;
}
var td = document.getElementById("td");
var br = document.createElement("br");
var input = document.createElement("input");
var button = document.createElement("input");
input.name = "upload";
input.contentEditable="false";
input.type = "file";
button.type = "button";
button.value = "移除该附件" + i;
button.onclick = function() {
if (confirm("确定移除该文件吗？")) {
td.removeChild(br);
td.removeChild(input);
td.removeChild(button);
i--;
}
}
td.appendChild(br);
td.appendChild(input);
td.appendChild(button);
i++;
}
//公告内容判断
function testcontext(){
//var content=document.getElementsByName("t_notice.content")[0].value;
var content=document.getElementById("t_notice.content");
var contentSpan=document.getElementById("contentSpan");
if(content.length==0){
contentSpan.innerHTML='公告内容不能为空';
contentSpan.style.color='red';
return false;
}else{
contentSpan.innerHTML='正确';
contentSpan.style.color='green';
return true;
}
}
function testall(){
if(testtitle()&&testbegindate()&&testenddate()&&testcontext()){
alert('验证成功！');
return true;
}else{
alert('验证失败,请按要求完善公告相关信息');
return false;
}
}
</script>
<s:head />
</head>
<body>
<s:form action="notice!add" namespace="/dsd" method="post"
enctype="multipart/form-data" onsubmit="return testall();">
<s:hidden name="t_notice.status" value="0"></s:hidden>
<table width="100%" height="100%">
<tr bordercolor="blue">
<td align="center" background="images/top_bg.gif" colspan="2">
公告发布
</td>
</tr>
<tr>
<td align="center" width="50%">
公告标题：
</td>
<td>
<s:textfield name="t_notice.title" onblur="testtitle();"></s:textfield>
<span id="titleSpan"></span>
</td>
</tr>
<tr>
<td align="center" width="50%">
生效时间：
</td>
<td>
<s:textfield name="t_notice.begindate"
onfocus="show_cele_date(this,'','',this)"
onblur="testbegindate();"></s:textfield>
<span id="begindateSpan"></span>
</td>
</tr>
<tr>
<td align="center" width="50%">
失效时间：
</td>
<td>
<s:textfield name="t_notice.enddate"
onfocus="show_cele_date(this,'','',this)" onblur="testenddate();"></s:textfield>
<span id="enddateSpan"></span>
</td>
</tr>
<tr>
<td align="center" width="50%">
上传附件：
</td>
<td id="td">
<input type="button" value="添加附件" onclick="addMore();" />
<span id="buttonSpan"></span>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<!--<s:hidden name="t_notice.content"/>
-->
<FCK:editor id="t_notice.content" width="80%" height="320"
fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"
imageBrowserURL="/OA/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
linkBrowserURL="/OA/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
flashBrowserURL="/OA/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
imageUploadURL="/OA/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"
linkUploadURL="/OA/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"
flashUploadURL="/OA/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">
</FCK:editor>
<span id="contentSpan"></span>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="button" value="返回" onclick="javascript:window.history.back();"/>
<s:submit value="添加" />
<s:reset value="重置" />
</td>
</tr>
<tr>
<td>
<s:fielderror />
</td>
</tr>
<tr>
<td>
<s:actionerror />
</td>
</tr>
</table>
</s:form>
</body>
</html>
类似这样的 你好好研究下下吧
❺ web前端的登录界面怎么写，有没有demo包括后台的验证，求教
点击页面左下角的“关于此页”，再展开字段，搜索上一个页面的字段名称，再点击一个按钮查找sql代码，在代码里面找表操作步骤大概是这样。
❻ javascript html 设计一个登录界面
注册页面代码：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>注册</title>
</head>
<body>
<formmethod="post"onsubmit="returnfalse"id="form">
<inputtype="text"name="username"placeholder="用户名"><br>
<inputtype="password"name="password"placeholder="密码"><br>
<inputtype="password"name="rePassword"placeholder="再次输入密码"><br>
<inputtype="submit"onclick="register_user()"value="注册"><br>
</form>
<ahref="login.html">去登录</a><script>
varlocalDB=openDatabase('localDB','1.0','TestDB',2*1024*1024);
localDB.transaction(function(ts){
ts.executeSql('CREATETABLEIFNOTEXISTSuser(username,password)')
});
functionregister_user(){
varusername=document.getElementsByTagName("input")[0].value;
varpassword=document.getElementsByTagName("input")[1].value;
varrePassword=document.getElementsByTagName("input")[2].value;
if(password!=rePassword)
{
alert("两次输入的密码不同，请重新输入");
}else
{
localDB.transaction(function(ts){
ts.executeSql("INSERTINTOuser(username,password)VALUES('"+username+"','"+password+"');");
alert("注册成功");
});
}
}
</script>
</body>
</html>
登录页面代码：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>登录</title>
</head>
<body>
<formonsubmit="returnfalse"method="post">
<inputtype="text"placeholder="用户名"><br>
<inputtype="password"placeholder="密码"><br>
<inputtype="submit"value="登录"onclick="login()"><br>
</form>
<ahref="register.html">去注册</a>
<script>
varlocalDB=openDatabase('localDB','1.0','TestDB',2*1024*1024);
localDB.transaction(function(ts){
ts.executeSql("SELECT*FROMuser",[],function(tx,results){
varlen=results.rows.length;
if(len<=0)
{
localDB.transaction(function(ts){
ts.executeSql('CREATETABLEIFNOTEXISTSuser(username,password)')
});
}
});
});
functionlogin(){
varusername=document.getElementsByTagName("input")[0].value;
varpassword=document.getElementsByTagName("input")[1].value;
localDB.transaction(function(ts){
ts.executeSql("SELECT*FROMuserWHEREusername='"+username+"';",[],function(ts,res){
if(res.rows.length<=0)
{
alert("登录失败，用户未注册");
}elseif(password==res.rows[0].password)
{
alert("登录成功,三秒后跳转到网络");
setInterval(function(){
location.href="https://www..com";
},3000);
}else
{
alert("登录失败，密码错误");
}
});
})
}
</script>
</body>
</html>
以上代码使用了WEB SQL，还请选择合适的浏览器查看。
❼ jsp登陆界面源代码
1、login.jsp文件
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<%@ page import="java.util.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>登录页面</title>
</head>
<body>
<form name="loginForm" method="post" action="judgeUser.jsp">
<table>
<tr>
<td>用户名:<input type="text" name="userName" id="userName"></td>
</tr>
<tr>
<td>密码:<input type="password" name="password" id="password"></td>
</tr>
<tr>
<td><input type="submit" value="登录" style="background-color:pink"> <input
type="reset" value="重置" style="background-color:red"></td>
</tr>
</table>
</form>
</body>
</html>
2、judge.jsp文件
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<%@ page import="java.util.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>身份验证</title>
</head>
<body>
<%
request.setCharacterEncoding("GB18030");
String name = request.getParameter("userName");
String password = request.getParameter("password");
if(name.equals("abc")&& password.equals("123")) {
3、afterLogin.jsp文件
%>
<jsp:forward page="afterLogin.jsp">
<jsp:param name="userName" value="<%=name%>"/>
</jsp:forward>
<%
}
else {
%>
<jsp:forward page="login.jsp"/>
<%
}
%>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>登录成功</title>
</head>
<body>
<%
request.setCharacterEncoding("GB18030");
String name = request.getParameter("userName");
out.println("欢迎你:" + name);
%>
</body>
</html>
(7)web登录界面代码扩展阅读：
java web登录界面源代码：
1、Data_uil.java文件
import java.sql.*;
public class Data_uil
{
public Connection getConnection()
{
try{
Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
}catch(ClassNotFoundException e)
{
e.printStackTrace();
}
String user="***";
String password="***";
String url="jdbc:sqlserver://127.0.0.1:1433;DatabaseName=***";
Connection con=null;
try{
con=DriverManager.getConnection(url,user,password);
}catch(SQLException e)
{
e.printStackTrace();
}
return con;
}
public String selectPassword(String username)
{
Connection connection=getConnection();
String sql="select *from login where username=?";
PreparedStatement preparedStatement=null;
ResultSet result=null;
String password=null;
try{
preparedStatement=connection.prepareStatement(sql);
preparedStatement.setString(1,username);
result=preparedStatement.executeQuery();//可执行的 查询
if(result.next())
password=result.getString("password");
}catch(SQLException e){
e.printStackTrace();
}finally
{
close(preparedStatement);
close(result);
close(connection);
}
System.out.println("找到的数据库密码为："+password);
return password;
}
public void close (Connection con)
{
try{
if(con!=null)
{
con.close();
}
}catch(SQLException e)
{
e.printStackTrace();
}
}
public void close (PreparedStatement preparedStatement)
{
try{
if(preparedStatement!=null)
{
preparedStatement.close();
}
}catch(SQLException e)
{
e.printStackTrace();
}
}
public void close(ResultSet resultSet)
{
try{
if(resultSet!=null)
{
resultSet.close();
}
}catch(SQLException e)
{
e.printStackTrace();
}
}
}
2、login_check.jsp:文件
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>验证用户密码</title>
</head>
<body>
<jsp:useBean id="util" class="util.Data_uil" scope="page" />
<%
String username=(String)request.getParameter("username");
String password=(String)request.getParameter("password");
if(username==null||"".equals(username))
{
out.print("<script language='javaScript'> alert('用户名不能为空');</script>");
response.setHeader("refresh", "0;url=user_login.jsp");
}
else
{
System.out.println("输入的用户名:"+username);
String passwordInDataBase=util.selectPassword(username);
System.out.println("密码："+passwordInDataBase);
if(passwordInDataBase==null||"".equals(passwordInDataBase))
{
out.print("<script language='javaScript'> alert('用户名不存在');</script>");
response.setHeader("refresh", "0;url=user_login.jsp");
}
else if(passwordInDataBase.equals(password))
{
out.print("<script language='javaScript'> alert('登录成功');</script>");
response.setHeader("refresh", "0;url=loginSucces.jsp");
}
else
{
out.print("<script language='javaScript'> alert('密码错误');</script>");
response.setHeader("refresh", "0;url=user_login.jsp");
}
}
%>
</body>
</html>
3、loginSucces.jsp文件
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<hr size="10" width="26%" align="left" color="green">
<font size="6" color="red" >登录成功 </font>
<hr size="10" width="26%" align="left" color="green">
</body>
</html>
4、user_login.jsp文件
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>登录界面</title>
</head>
<body background="C:Userswin8workspaceLoginimage\_10.jpg" >
<center>
<br><br><br><br><br><br>
<h1 style="color:yellow">Login</h1>
<br>
<form name="loginForm" action="login_check.jsp" method="post">
<table Border="0" >
<tr >
<td>账号</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password">
</td>
</tr>
</table>
<br>
<input type="submit" value="登录" style="color:#BC8F8F">
</form>
</center>
</body>
</html>