Use Adapters?

The adapters are currently turned on. Do you want to keep them enabled?


more about the adapters

Theme Chooser

The examples can use either a "basic" or "enhanced" theme or no theme at all.



more about CSS & themes

Login Control Example

Example Summary and Logic

The Login control presents a simple HTML form for gathering user credentials. When submitted, the web server's Membership Provider determines if the credentials are valid correct and valid. If so, the user is considered "logged in" and, typically, has access to more of the web site than an anonymous visitor.

The server-side functionality provided by the Login control is useful and does not warrant adaptation. After all, validating credentials has nothing to do with how the form that gathers those credentials is presented. So, the goal of the Login control's adapter is to improve the markup used in the form's presentation without touching the server-side functionality. In particular, the adapted HTML uses <div> rather than <table> tags to position form elements. Likewise, the adapted HTML avoids inline CSS styles. (Exception: Internal validators used by the Login control may still render inline styles even when the sample Login adapter is used.)


Working Example

Hints:

Use the following values when filling out the login form.

  • User Name = fred
  • Password = css!

If your user name and password are correct, you'll be taken to a page that demonstrates the LoginStatus control.

Please note that the login form does not display if the user is already logged in.

What would you like to do next?

HTML Snippets

Snippet of HTML when using the adapters

ASP.NET
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="PrettyLogin" id="ctl00_ctl00_MainContent_LiveExample_loginview1_login1">
  <div class="AspNet-Login">
    <div class="AspNet-Login-TitlePanel">
      <span>Login</span>
    </div>
    <div class="AspNet-Login-UserPanel">
      <label for="ctl00_ctl00_MainContent_LiveExample_loginview1_login1_UserName"><em>U</em>ser Name:</label>
      <input type="text" id="ctl00_ctl00_MainContent_LiveExample_loginview1_login1_UserName" name="ctl00$ctl00$MainContent$LiveExample$loginview1$login1$UserName" value="" accesskey="u" />
    </div>
    <div class="AspNet-Login-PasswordPanel">
      <label for="ctl00_ctl00_MainContent_LiveExample_loginview1_login1_Password"><em>P</em>assword:</label>
      <input type="password" id="ctl00_ctl00_MainContent_LiveExample_loginview1_login1_Password" name="ctl00$ctl00$MainContent$LiveExample$loginview1$login1$Password" value="" accesskey="p" />
    </div>
    <div class="AspNet-Login-RememberMePanel">
      <input type="checkbox" id="ctl00_ctl00_MainContent_LiveExample_loginview1_login1_RememberMe" name="ctl00$ctl00$MainContent$LiveExample$loginview1$login1$RememberMe" accesskey="R" />
      <label for="ctl00_ctl00_MainContent_LiveExample_loginview1_login1_RememberMe"><em>R</em>emember me next time.</label>
    </div>
    <div class="AspNet-Login-SubmitPanel">
      <input type="submit" value="Login" id="ctl00_ctl00_MainContent_LiveExample_loginview1_login1_LoginButton" name="ctl00$ctl00$MainContent$LiveExample$loginview1$login1$LoginButton" onclick="WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl00$MainContent$LiveExample$loginview1$login1$LoginButton&quot;, &quot;&quot;, true, &quot;ctl00$ctl00$MainContent$LiveExample$loginview1$login1&quot;, &quot;&quot;, false, true))" />
    </div>
    <div class="AspNet-Login-CreateUserPanel">
      <a href="CreateUserWizard.aspx" title="Create user">Register here.</a>
    </div>
    <div class="AspNet-Login-PasswordRecoveryPanel">
      <a href="PasswordRecovery.aspx" title="Password recovery">Forgot your password?</a>
    </div>
  </div>
</div>

Snippet of HTML when not using the adapters

ASP.NET
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table title="Please login." cellspacing="0" cellpadding="1" cellpadding="4" CssSelectorClass="PrettyLogin" border="0" id="ctl00_ctl00_MainContent_LiveExample_loginview1_login1" style="background-color:White;border-color:#284775;border-width:1px;border-style:Solid;border-collapse:collapse;">
  <tr>
    <td><table cellpadding="0" border="0" style="font-family:Verdana;font-size:0.8em;">
      <tr>
        <td align="center" colspan="2" style="color:#F7F6F3;background-color:#5D7B9D;font-weight:bold;height:2em;">Login</td>
      </tr><tr>
        <td align="right" style="color:#5D7B9D;"><label for="ctl00_ctl00_MainContent_LiveExample_loginview1_login1_UserName">User Name:</label></td><td><input name="ctl00$ctl00$MainContent$LiveExample$loginview1$login1$UserName" type="text" id="ctl00_ctl00_MainContent_LiveExample_loginview1_login1_UserName" style="color:#5D7B9D;border-color:#5D7B9D;border-width:1px;border-style:Solid;" /></td>
      </tr><tr>
        <td align="right" style="color:#5D7B9D;"><label for="ctl00_ctl00_MainContent_LiveExample_loginview1_login1_Password">Password:</label></td><td><input name="ctl00$ctl00$MainContent$LiveExample$loginview1$login1$Password" type="password" id="ctl00_ctl00_MainContent_LiveExample_loginview1_login1_Password" style="color:#5D7B9D;border-color:#5D7B9D;border-width:1px;border-style:Solid;" /></td>
      </tr><tr>
        <td colspan="2" style="color:#5D7B9D;"><input id="ctl00_ctl00_MainContent_LiveExample_loginview1_login1_RememberMe" type="checkbox" name="ctl00$ctl00$MainContent$LiveExample$loginview1$login1$RememberMe" /><label for="ctl00_ctl00_MainContent_LiveExample_loginview1_login1_RememberMe">Remember me next time.</label></td>
      </tr><tr>
        <td align="right" colspan="2"><input type="submit" name="ctl00$ctl00$MainContent$LiveExample$loginview1$login1$LoginButton" value="Login" id="ctl00_ctl00_MainContent_LiveExample_loginview1_login1_LoginButton" style="color:Cyan;background-color:#284775;border-color:#5D7B9D;border-width:1px;border-style:Solid;" /></td>
      </tr><tr>
        <td colspan="2"><a id="ctl00_ctl00_MainContent_LiveExample_loginview1_login1_CreateUserLink" href="CreateUserWizard.aspx">Register here.</a><br /><a id="ctl00_ctl00_MainContent_LiveExample_loginview1_login1_PasswordRecoveryLink" href="PasswordRecovery.aspx">Forgot your password?</a></td>
      </tr>
    </table></td>
  </tr>
</table>