How WordPress and Gmail Handle User Log in

WordPress

WordpressLoggedOut

WordPress.com handles its user log in through the use of a form (displayed above) which contains:

Two text fields for the user to input their username and password:

  • <input type=”email” name=”log” placeholder=”Email or Username” autocorrect=”off” autocapitalize=”off” spellcheck=”false”>
  • <input type=”password” name=”pwd” placeholder=”Password”>

One checkbox that enables the site to remember the users current input in the text fields above:

  • <input type=”checkbox” name=”rememberme” value=”forever” id=”signin-rememberme” checked=”true”>

And one button with the type of submit:

  • <input type=”submit” value=”Sign in”>

When the user submits the form the values collected are sent using the post method due to a password having been supplied:

The user is then redirected to the logged in section of the website where their user information can be seen in the top right corner of the screen in a drop down menu titled with their name (displayed below) where they can access areas relating to their account and sign out.

WordpressLoggedIn


Gmail

GmailLoggedOut

Gmail.com, much like WordPress.com (almost identically as you will see), also handles its user log in through the use of a form (displayed above) which contains the following elements:

Two text fields for the user to input their username and password:

  • <input type=”email” spellcheck=”false” name=”Email” id=”Email” value=””>
  •  <input type=”password” name=”Passwd” id=”Passwd”>

One checkbox that enables Gmail and all other similar Google services to keep the user logged in until they manually sign out:

  • <input type=”checkbox” name=”PersistentCookie” id=”PersistentCookie” value=”yes” checked=”checked”>

And one button with the type of submit:

  • <input type=”submit” name=”signIn” id=”signIn” value=”Sign in”>

When the user submits the form the values collected are sent using the post method due to a password having been supplied:

The user is then redirected to the logged in section of the website where, much like WordPress, their logged in information can be seen in the top right corner of the screen in a drop down menu titled with their name or email (displayed below) where they can, again, access areas relating to their account and sign out.

GmailLoggedIn

Even though these two websites have different functionality and appearance the core HTML structure and elements of their user login forms are essentially the exact same.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: