[研究][ASP.NET]登入畫面表單美工設計(三)
2022-04-14
環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#
只是設計一個還可以看的畫面，筆記一下。
Login.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs"
Inherits="WebApplication1.Login" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="shortcut icon" href="/favicon.ico" />
<style>
.LoginForm {
padding: 10px;
width: 500px;
border: 4px solid #1199CD;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
margin-bottom: 30px;
border-radius: 12px;
overflow: auto;
}
td {
height: 25px;
font-size: 20px;
padding: 8px;
}
input {
height: 20px;
font-size: 20px;
padding: 8px;
border-radius: 5px;
}
input[type=button], input[type="submit"] {
height: 40px;
font-size: 16px;
padding: 8px 15px 8px 15px;
border-radius: 5px;
}
</style>
<script type="text/javascript">
function forgotPw() {
var url = "forgot.aspx";
//window.location(url);
location.href = url;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="LoginForm">
<tr>
<th colspan="2" style="font-size: xx-large">登入<br />
<hr />
</th>
</tr>
<tr>
<td>帳 號</td>
<td>
<asp:TextBox ID="TextBox1" AutoComplete="Off" required="required" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>密 碼</td>
<td>
<asp:TextBox ID="TextBox2" TextMode="Password" AutoComplete="Off" required="required" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>驗證碼</td>
<td>
<asp:TextBox ID="txtCheckCode" Width="100px" AutoComplete="Off" required="required" runat="server"></asp:TextBox>
<img src="/CheckImageCode.aspx" width="69" height="20" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<asp:Button ID="Button_Login" runat="server" Text="登入" />
<input id="Button1" type="button" value="忘記密碼" onclick="forgotPw()" />
<input id="Button2" type="button" value="說明" onclick="javascript:location.href='Doc.aspx'" />
</td>
</tr>
</table>
<asp:Label ID="Label_Message" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
|
注意，忘記密碼按鈕不要用 ASP.NET 控制項按鈕 Button，否則會觸發其他欄位 HTML5 的 required 必填欄位要求，使得無法轉向到其他網址，請直接用 HTML 的 Input(button) 搭配 JavaScript 才行。
(下圖)結果
注意：aspx.cs檔案中可能不要用下面這種彈出對話盒視窗
Response.Write("<script>alert('" + DateTime.Now.ToString() + " Captcha 圖形驗證碼錯誤');</script>");
否則驗證碼輸入錯誤，按下登入按鈕後，Input ( TextBox) 輸入框會扁掉，要用 ASP.NET 專用寫法，例如：Page.ClientScript.RegisterStartupScript(Page.GetType(), "message", "<script language='javascript' defer>alert('" + DateTime.Now.ToString() + " Captcha 圖形驗證碼錯誤');</script>");
敝人某方案會有此狀況，但在另一成方案中又很正常。
(完)
[研究][ASP.NET]登入畫面表單美工設計(三)
[研究][ASP.NET]登入畫面表單美工設計(二)
https://shaurong.blogspot.com/2022/04/aspnet_12.html
[研究][ASP.NET]登入畫面表單美工設計(一)
https://shaurong.blogspot.com/2022/04/aspnet.html
沒有留言:
張貼留言