How to Create a Registration Form for a Website
A website registration form can provide you--the website's owner--with useful user information, such as who is visiting your site, and what his preferences and interests are. It can also add a level of security to a website by allowing you to choose who has access to your site. You can create a registration form using some basic JavaScript and HTML formatting.
Other People Are Reading
Instructions
-
Creating the Form's JavaScript Instructions
-
1
Open Notepad or an HTML editor, and create a basic HTML page by typing:
<!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">
<head> -
2
Add a title to your registration form:
<title>Registration Form</title> -
-
3
Type in the registration form's JavaScript instructions:
<script type="text/javascript" language="JavaScript">
//<![CDATA[
<!-- start script here
function checkform(thisform)
{
if (thisform.name.value == null || thisform.name.value == "")
{
alert ("Please enter your name");
thisform.name.focus();
thisform.name.select();
return false;
}
var selected = false ;
for (var i = 0; i
//]]>
</script> -
4
Add font style and colors to your form:
<style type="text/css">
/*<![CDATA[*/
body
{
background-color: [add color code];
}
input.required
{
width: 300px;
font: [add font attributes, size and type];
background-color: [add color code];
border: solid 2px #000;
}
select.required
{
width: 300px;
font: [add font attributes, size and type];
background-color: [add color code];
border: solid 2px #000;
}
td.required
{
font: [add font attributes, size and type];
}
input.optional
{
width: 300px;
font: [add font attributes, size and type];
background-color: [add color code];
border: solid 2px #999;
}
textarea.optional
{
width: 300px;
font: [add font attributes, size and type];
background-color: [add color code];
border: solid 2px #666;
}
td.optional
{
font: [add font attributes, size and type];
}
input.submit
{
background-color: [add color code];
border: solid 2px #000;
font[add font attributes, size and type]; -
5
Close the JavaScript instructions:
}
/*]]>*/
</style>
</head>
Creating the Form Fields
-
6
Type in the registration form's title and instructions. This will be the text that appears on the user side of the form.
<body>
<h1>[add registration form title here]</h1>
<p>[add form instructions here]</p> -
7
Add the email address where you want the form information to be sent:
<form action="mailto:[add email address here]" method="post" onsubmit="return checkform(this)" -
8
Add the information fields that you want the user to fill out. In this example, the user's name, email address and gender are requested. Each table contains one information field. You can modify the examples by simply changing the field titles that are in the bold tags. You can also delete a table, or add additional tables, depending on how many information fields you will need.
<table>
<tr>
<td align="right" class="required"><b>Name:</b></td>
<td><input name="name" class="required" /></td>
</tr>
<tr>
<td align="right" class="required"><b>Email Address:</b></td>
<td><input name="name" class="required" /></td>
</tr>
<tr>
<td align="right" class="required"><b>Gender:</b></td>
<td class="required"><input type="radio" name="gender"
value="male" /> male <input type="radio" name="gender"
value="female" /> female</td>
</tr> -
9
Add the HTML to close out the registration form:
<tr>
<td colspan="2" align="right"><input type="submit" value="register"
class="submit" /></td>
</tr>
</table>
</form>
</body>
</html> -
10
Save the Notepad document as a .txt file. Upload it to the server, which will read it as an HTML document, and publish it as a web page that can be linked to your website.
-
1
Tips & Warnings
The easiest way to create this form is by typing or pasting the HTML into a Notepad document, and adding the modifications indicated in the brackets. You can then save it as an .html or .htm document, and upload it to your server.
More Like This
Comments
View all 10 Comments-
Uhh...not useful I need it in my project in computer >.< but it Didn't work >.< erk!
-
it still can not....
-
man man!!!!!
-
1 thing... you forgot to add a MYSQL database connection so it can save. into a database so people can log in and stuff.
-
it nice and t give me the challenge to read more than I do.
