❶ 如何寫一個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>