- 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).
- 2). Create an HTML form. Between the <body> and </body> tags you'll need to type in <form></form>; 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:
<form action="/bin/process.php" method="post" enctype="multipart/form-data">
Replace "/bin/process.php" with the location of the file that will process the login page data. - 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:
<label>Username:</label>
<input type="text" value="" /> - 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:
<label>Password:</label>
<input type="text" value="" /> - 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:
<input type="submit" value="Submit This Form" />
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:
<input type="image" src="/images/submit.jpg" />
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. - 6). Review your code. Your log-in page when complete should look something like this:
<html>
<body>
<form action="/bin/process.php" method="post" enctype="multipart/form-data">
<label>Username:</label>
<input type="text" value="" />
<label>Password:</label>
<input type="password" value="" />
<input type="submit" value="Submit This Form" />
</form>
</body>
</html>
Save your code as a .html file when complete.
SHARE
