2022年4月12日 星期二

[研究][ASP.NET]登入畫面表單美工設計(一)

[研究][ASP.NET]登入畫面表單美工設計(一)

2022-04-12

環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#

只是設計一個還可以看的畫面，筆記一下。

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
    Inherits="WebApplication1.Default" %>

<!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>
    <%--和 bootstrap.css 不相容--%>
    <%--<link href="Content/bootstrap.css" rel="stylesheet" />--%>
    <style>
        .submitButton {
            text-align: right;
            padding-right: 10px;
        }
    </style>
       <script>
        function ShowPwd() {
            var x = document.getElementById("TextBoxPassword");
            if (x.type === "password") {
                x.type = "text";
            } else {
                x.type = "password";
            }
        }
       </script>
</head>
<body>
    <form id="form1" runat="server">
        <h1>登入</h1>
        <div style="width: 20%;">
            <fieldset style="border-radius: 10px; background-color: #eeeeee;">
                <legend>帳戶資訊</legend>
                <p>
                    <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">帳號：</asp:Label>
                    <asp:TextBox ID="UserName" runat="server" PlaceHolder="請輸入" required="required"></asp:TextBox>
                </p>
                <p>
                    <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password" Text="password">密碼：</asp:Label>
                    <asp:TextBox ID="TextBoxPassword" runat="server" TextMode="Password" PlaceHolder="請輸入" required="required"></asp:TextBox>
                    <%--<input type="checkbox" onclick="ShowPwd()">顯示密碼--%>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <asp:CheckBox ID="CheckBox1" OnClick="ShowPwd()" runat="server" Text="顯示密碼" />
                </p>
            </fieldset>
            <p class="submitButton">
                <asp:Button ID="LogOnButton" runat="server" CommandName="LogOn" Text="登入" />&nbsp;
                <asp:Button ID="Button_FogotPassword" runat="server" Text="忘記密碼" />
            </p>
        </div>
    </form>
    <asp:Label ID="Label_Message" runat="server" Text=""></asp:Label>
</body>
</html>

結果

(完)

相關

[研究][ASP.NET]MasterPage中ContentPlaceHolder內的 JavaScript「顯示密碼」功能
[研究][ASP.NET]JavaScript 抓取 ContentPlaceHolder 中 ASP.NET 控制項的 ID
https://shaurong.blogspot.com/2022/04/aspnetmasterpagecontentplaceholder.html

[研究][JavaScript]切換顯示和隱藏密碼
http://shaurong.blogspot.com/2019/02/javascript.html

[研究][ASP.NET]讓超連結或 LinkButton 看起來像是按鈕
https://shaurong.blogspot.com/2022/04/aspnet-linkbutton.html

[研究][ASP.NET]登入畫面表單美工設計(六)
https://shaurong.blogspot.com/2022/04/aspnet_50.html

[研究][ASP.NET]登入畫面表單美工設計(五)
https://shaurong.blogspot.com/2022/04/aspnet_85.html

[研究][ASP.NET]登入畫面表單美工設計(四)
https://shaurong.blogspot.com/2022/04/aspnet_24.html

[研究][ASP.NET]登入畫面表單美工設計(三)
https://shaurong.blogspot.com/2022/04/aspnet_14.html

[研究][ASP.NET]登入畫面表單美工設計(二)
https://shaurong.blogspot.com/2022/04/aspnet_12.html

[研究][ASP.NET]登入畫面表單美工設計(一)
https://shaurong.blogspot.com/2022/04/aspnet.html



張貼者： 於
標籤： , , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)