I have experimented with many different login control layouts and have settled on a very simple implementation of the out of the box LoginCtrl that ships with ASP.NET 2.0 and above, and as such thought I would share:
HTML
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>
<!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 runat="server">
<title>Demo Login Page</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
fieldset
{
margin: 0 0 10px 0;
padding: 5px;
}
fieldset p
{
clear: left;
padding-top: 5px;
}
legend
{
margin: 0;
padding: 5px;
background-color: #DDDDDD;
border-style: solid;
border-width: 1px;
border-color: #FFF #AAA #666 #FFF;
font-size: 1em;
font-weight: bold;
}
dt
{
float: left;
width: 150px;
padding: 5px;
font-weight: bold;
}
dd
{
margin-left: 155px;
padding: 5px;
}
.txtNormal
{
width: 250px;
}
</style>
</head>
<body>
<form id="frm" runat="server">
<fieldset>
<legend>Existing Users</legend>
<p>
<asp:Login ID="LoginCtrl" runat="server" Width="100%">
<LayoutTemplate>
<dl>
<dt>Username:</dt>
<dd>
<asp:TextBox ID="UserName" runat="server" CssClass="txtNormal"></asp:TextBox></dd>
<dt>Password:</dt>
<dd>
<asp:TextBox ID="Password" TextMode="Password" runat="server" CssClass="txtNormal"></asp:TextBox></dd>
</dl>
<asp:Literal ID="FailureText" runat="server"></asp:Literal>
<p>
<asp:Button ID="Login" runat="server" CommandName="LogIn" Text="Log In" /></p>
</LayoutTemplate>
</asp:Login>
</p>
</fieldset>
<br />
<fieldset>
<legend>New Users</legend>
<p>
Click <a href="NewUser.aspx">here</a> to register for an account.</p>
</fieldset>
</form>
</body>
</html>
Code-Behind
C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
TextBox txtUserName = (TextBox)LoginCtrl.FindControl("UserName");
txtUserName.Focus();
}
}
}
VB.NET
Partial Class Login
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
CType(LoginCtrl.FindControl("UserName"), TextBox).Focus()
End If
End Sub
End Class
I am quite sure that others can improve further on this but as a starter for ten, it works for me. As always, any comments, positive or negative, are always welcome.
JOATIT 