How to Create Login in HTML
Login pages are a normal part of the Web . In this tutorial, you will learn how to create the HTML tags necessary to create the username input box, the password input box, and the submit button. I will also show you how to organize your HTML form by placing it into a table that is two columns wide by three rows tall.
Other People Are Reading
Things You'll Need
- Text editor like Source Edit
- Document uploading software such as FileZilla
- Server space that supports "server-side" applications, such as log-in features.
Instructions
-
Document Steps
-
1
Create the HTML Document
All HTML documents will have, in order to be compliant, the following tags:
• <!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" xml:lang="en" lang="en">
• The <head> beginning tag
• The <title></title> tags
• The </head> end tag
• The <body> beginning tag and the </body> end tag
• And finally, the </html> end tag.
Make sure that you type the following between the beginning <title> tag and ending </title> tag:
• My Login Page
Save the file as login.html and upload it to your Web server. You should see a blank white page and along the top blue edge of the browser it should read, "My Login Page".
EXPLANATION
The doctype declares that you are using XHTML, the new standard of the World Wide Web, as declared by the W3Schools, the authors of HTML.
The <html> tag has several attributes inside the tag, the first one being xmlns, which stands for Extensive Markup Language Name space, which establishes the structuring rules you are following.
The <head></head> tags contain all the information about the document, in this case, the <title></title> which appears on the top blue band at the top of your internet browser.
The <body> tag contains all the information on the page that he end-user will see.
Finally, the </html> end tag completes the HTML page. -
2
The Form Tags
Now that you have created the HTML document, you need to create the login form itself.
Type the following after the beginning <body> tag and before the ending </body> tag:
<form action="#">
</form>
EXPLANATION
The form tag declares to the browser that the tags between the beginning <form> tag and the ending </form> tag will be collecting some kind of user input, whether it is a checkbox, or text box, or a button, or some other kind of interactive item. -
-
3
Complete the Form
Type the following after the beginning <form action="#"> tag and before the ending </form> tags:
<b>Username:</b> <input type="text" name="username" size="40" /><br />
<b>Password:</b> <input type="text" name="password" size="40" /><br />
<input type="submit" value="Login" name="submit" />
Save the file and upload it to your Web server. When you view the page, you should see a login form, as shown in the picture.
EXPLANATION
The <b></b> tags are called bold tags. They change the type style of text between them to bold.
The <input type="text" name="username" size="40" /> tag creates a text box (indicated by the attribute type="text") that is 40 characters long (indicated by the size="40" attribute) and is called "username" (indicated by the name="username" attribute). The name is important for when you process the contents of the form, which is not covered in this tutorial.
The <br /> tag creates a line break, just as if you had entered "Return" or "Enter' in a text document.
The second input tag, named "password," looks identical to the "username" field, with the exception that it has a different value for the "name" attribute.
The final tag, <input type="submit" value="Login" name="submit" />, creates an input button that the user will click on to submit data to the form-processing software. The "input type" attribute creates the button, the "value" attribute writes the text on the button, and the "name" attribute identifies the button for the form-processing software. -
4
Create the Table
Type the <table> beginning tag after the <form action="#"> beginning tag. Hit "enter" so it is on its own line. Hit the "enter" key again and type the <tr> beginning tag.
Type the <td> beginning tag in front of the <b>Username:</b>sequence. Type the </td> end tag after the </b> end tag that follows Username:. The new line will look like this:
<td><b>Username:</b></td>
Type the <td> beginning tag in front of the <input type="text" name="username" size="40" /> tag, and the </td> tag at the end. Delete the <br /> tag.
The new line will look like this:
<td><input type="text" name="username" size="40" /></td>
Hit the enter key and type the </tr> end tag.
Type the beginning <tr> tag and hit enter.
Surround the next line as you did before with the pairs of <td></td> tags as shown below, making sure to delete the <br /> tag:
<tr>
<td><b>Password:</b></td>
<td><input type="text" name="password" size="40" /></td>
</tr>
Hit the enter key and type a new <tr> beginning tag. Type the following beginning <td> tag with the following attribute before the <input type="submit" value="Login" name="submit" /> tag: <td colspan="2">
Type the </td> end tag after the <input type="submit" value="Login" name="submit" /> tag. Hit enter and type the </tr> end tag. Hit enter again and type the </table> tag, as show in the diagram.
EXPLANATION
An HTML table is a very easy way to structure a form. To create a table, first you need the <table></table> tags. Within the <table></table> tags are <tr></tr> or table row tags, which create the rows of the table, and <td></td> table data tags, which create the individual cells of the table. The columns of the table are determined by the number of <td></td> tags that are between each <tr></tr> tag. Each row requires at least 1 set of <td></td> tags.
In the last <td> beginning tag we put an attribute in the tag, which gives the tag a special instruction. In this case, the colspan attribute states that the cell, created by the <td></td> tag is to occupy 2 columns, because we set it equal to 2. -
5
Save and upload your file. You should have noticed a slight change in that the text boxes should be perfectly aligned with each other as shown in the image.
-
1
Tips & Warnings
Add an attribute in the beginning <table> tag called "border" and set it equal to 1, as shown: <table border="1"> . That will allow you to see the lines that make up the cells and rows of the table. To upload your documents to the server, use a free file-transfer program such as FileZilla http://filezilla-project.org/download.php Use a code editor such as Source Edit to write HTML code. Source Edit, which can also be downloaded for free at: http://www.brixoft.net/download.asp#ID1
Your log-in page will only work if you have the appropriate software loaded onto your server. Your server-space provider may be able to help you install and enable that software.
