Fixing the login control

By default, the ASP.NET login control (as well as some other controls found in ASP.NET) is wrapped in multiple HTML tables. This can cause problems with accessibility.

With the login control, it is possible to remove these tables, and make the control much more accessible.

Removing the 'outer' table

Some of the controls in ASP.NET which are 'wrapped' in a table have a property called 'RenderOuterTable'. To remove this outer table, simply select the login control, and set this property's value to false:

This same step can be applied to the ChangePassword control.

Removing the additional tables

In order to remove the additional tables that remain, we need to modify the template that the login control uses. In design view, select the convert to template from the pop-out menu on the login control as follows:

Your source view will now update with a layout template section. Within the layout template, remove all the table, tr and td tags, ensuring that you leave the labels, inputs and validators in place.

Your login control should now look similar to the code below:

<asp:login id="AndrewsLogin" runat="server" renderoutertable="False">
    <LayoutTemplate>
        Log In
                               
        <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">User Name:</asp:Label>
        <asp:TextBox ID="UserName" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="AndrewsLoginVal">*</asp:RequiredFieldValidator>
        <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Password:</asp:Label>
        <asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox>
        <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password" ErrorMessage="Password is required." ToolTip="Password is required." ValidationGroup="AndrewsLoginVal">*</asp:RequiredFieldValidator>
        <asp:CheckBox ID="RememberMe" runat="server" Text="Remember me next time." />
        <asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
        <asp:Button ID="LoginButton" runat="server" CommandName="Login" Text="Log In" ValidationGroup="AndrewsLoginVal" />
    </LayoutTemplate>
</asp:login>
        

As the HTML table provided formatting for the login view, if you switch back to design view, you should now see the login control without any formatting:

You can now style the form using CSS, though you may want to add additional div tags into the template in order to facilitate the application of new styles.

Remember you can style a text box using the input[type=text] CSS selector, and a password box using input[type=password].