How to Create a Web Log-In Page
The work of a Web log-in page begins when it prompts a Web user for log-in name and password. After the user enters this information, the page's script may do a preliminary validation of the information, such as ensuring the user entered the correct number of characters. The page then sends the log-in data to a server, which compares the data against a login-password pair in a server database. Log-in Web pages provide an essential function to a website's security framework, while also potentially presenting an image of trustworthiness to those viewing such pages.
Other People Are Reading
Instructions
-
-
1
Open a new document in Notepad or other word processor and paste in the following text, which defines a blank Web page.
<html>
<head>
<title>XYZ Company Login Page</title>
</head>
<body>
</body>
</html>
-
2
Type the HTML codes at the end of this step between the "<body>" and "</body>" tags. These codes create a log-in form, laid out with the aid of an HTML table.
<form action="LoginChecker.php" onsubmit="return checkLoginText(this);" >
<table>
<tr>
<td>
Login id:
</td>
<td>
<input type="text" name="loginid">
</td>
</tr>
<tr>
<td>
Password:
</td>
<td>
<input type="password" name="pword">
<input type="submit" value="Submit Password" />
</td>
</tr>
</form>
</table>
-
-
3
Type in your HTML document this JavaScript program, which validates the log-in data. The program determines if the form's log-in field is blank. If it is, it returns the value "false" to the calling program. This value prevents the form from sending the log-in data to the page specified in the form's "action" attribute. If the log-in field is not blank, the program returns "true," which allows the form to send the log-in data.
<script type="text/javascript">
function checkLoginText(loginForm) {
if (loginForm.loginid.value == "") {
alert ("Loginid cannot be blank.");
return false;
}
return true;
}
</script>
-
4
Save the document with a file name ending with ".htm" and the file type "Plain text."
-
5
Double-click (in Windows Explorer) the saved document to open it in a browser. Type any nonblank text for the "Login ID" field and any text for the password field. Press the "Submit Password" button. The JavaScript function you wrote in Step 3 will validate your log-in ID text. The form will then call the validation script on your website ("http://www.YourWebSite/LoginChecker.php"). This script would search the login-password pair in your server's database and then permit or deny access to your page's visitor, based on the results of that search.
-
1
References
- Photo Credit world wide web image by dead_account from Fotolia.com
