How to Create an HTML Login Page

By Tim Searles

Log-in pages are used in websites as initial screens to get access to confidential information. Log-in pages require at minimum a username and password. Sometimes you are allowed to select an option to save your log-in information for future use, but it's best not recommended to do this unless you're on a private computer. For Web developers, it's fairly simple to create the HTML for a log-in page. The real work is on the back-end in verifying the log-in credentials. This guide will help you create a HTML log-in page for your website needs.

Things You'll Need

  • Text editor

Step 1

Open a text editor and create an HTML file. Dreamweaver is the most popular program to use for Web development, but you can also use free programs, such as TextEdit (on Mac) or Notepad (on Windows).

Step 2

Create an HTML form. Between the

andtags you'll need to type in
; these are HTML form tags. In the starting form tag, you'll need an action, method, and enctype (encryption type). For action type in where the form will process, the method value will be "get" or "post", the normal enctype is "multipart/form-data," but you can also use "text/plain." The "text/plain" value involves no formatting when submitted. Your final starting form tag will look something like this:
Replace "/bin/process.php" with the location of the file that will process the login page data.

Step 3

Create a username label and username field. Label tags have descriptive text to indicate what field is next. On the next line code an input tag with type equal to "text" for a user to type in data. Follow the example below:

Step 4

Create a password label and password field. Users will not see their password when they type in the password field, only asterisks. This is to protect the user's information. Follow the example below:

Step 5

Create a submit button. There are two ways to create an HTML submit button. The first is an input tag with a submit type which looks like this:Place the text that you want the button to say inside the value attribute as illustrated above. The second way to create a submit button is an input tag with an image type which looks like this:This makes an image a submit button instead of a typical HTML button. Replace "/images/submit.jpg" with the location of the image you want people to click when submitting the form. It is general practice to have one of the two types of input tags to submit a form, but not both.

Step 6

Review your code. Your log-in page when complete should look something like this:

Save your code as a .html file when complete.

Tips & Warnings

  • It is good practice to add name attributes and/or IDs to every input tag.
  • You may want to consider a table or div structure for proper spacing of labels and adjacent input tags.