HTML Form check homework

Homework assignment:

Add a page to the Internet site to collect demographic information for a customer mailing list.

We want to collect customer demographic information in order to send out information to our customers about sales and in-store events. We want to capture the customer's name, mailing address, e-mail address and telephone number. Upon submission of the information, the customer should be directed to another HTML page that acknowledges receipt of their information.

We just want to see a prototype at this stage, so formatting to match the rest of the Internet site is not required.

Expected Results/Impact when completed:

An HTML page that contains a form to collect customer demographic data. An HTML acknowledgment page.

Code for Form:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Request Form</title>


   <meta name="Description" content="This webpage is for Customer Demographics" />
   <meta name="Keywords" content="Rhonda , email, " />
   <meta name="author" content="Rhonda " />
   <meta name="copyright" content="Copyright 2010 Rhonda , All Rights 

Reserved" />
   <meta name="robots" content="all" />
   <meta name="revisit-after" content="15 days" />
   <meta name="rating" content="safe for kids" />

<script type="text/javascript" >

</script>

</head>

<body>

<body style="background-color:lightsteelblue">


<h1>
        Welcome Kudler Fine Foods customer.
        <br />
        <br />
        <br /> 
    Please enter the following details in order
    to be added to our preferred customer mailing list:
        <br />
        <br />
        <br />
</h1>       

    <form action="">
    <fieldset>
    <legend>Personal information:</legend>

<p>

        First Name:

        <br />

        <input type="text" name="txtFName" VALUE="" SIZE="30" MAXLENGTH="50"  />

</p>

<p>

         Middle Initial:

         <br />

         <input type="text" name="txtMiddle" VALUE="" SIZE="5" MAXLENGTH="3" />

</p>

<p>

    Last Name:

        <br />

        <input type="text" name="txtLName" VALUE="" SIZE="30" MAXLENGTH="50" />
    <br />
    <br />
    </fieldset>
    </form>

</p>       

    <form action="">
    <fieldset>
    <legend>Address:</legend>


<p>
    Mailing Address: 
    <br />
    <br />
    Street <INPUT TYPE="TEXT" NAME="Street" VALUE="" SIZE="25"  

MAXLENGTH="50" />
    <br />
    City   <INPUT TYPE="TEXT" NAME="City" VALUE="" SIZE="35" MAXLENGTH="50"     

/><br />
    State  <INPUT TYPE="TEXT" NAME="State" VALUE="" SIZE="2" MAXLENGTH="2"  

/> <br />
    Zip Code <INPUT TYPE="TEXT" NAME="State" VALUE="" SIZE="5"      

MAXLENGTH="5" /> <br />
        <br />
    <br />

    </fieldset>
    </form>
</p>


<p>
    Email Address:    
    <br />

    <INPUT TYPE="TEXT" NAME="Email" VALUE="" SIZE="25" MAXLENGTH="50" />
</p>


<p> 
    Telephone Number:
    <br />
    <input type="TEXT" NAME="AreaCode" VALUE="" SIZE="3" MAXLENGTH="3"/> 
    <INPUT TYPE="TEXT" NAME="Telephone" VALUE="" SIZE="7" MAXLENGTH="7" /> 
    <br />
</p>        


<!--NOTES 
This part was not mandantory. I was just trying some of the extra ways of adding input that the book discussed-->       

<p>     
    Gender:
    <br />
    <input type="radio" name="sex" value="male" /> Male<br />
        <input type="radio" name="sex" value="female" /> Female

</p>

<p> 
    How did you hear about us?
    <br />
    <input type="checkbox" name="Friend" value="Friend" /> From a friend
    <br />
    <input type="checkbox" name="Advertisement" value="Advertisement" />    

Store Advertisement
    <br />
    <input type="checkbox" name="Online" value="Online" /> From Online
    <br />
    <input type="checkbox" name="Other" value="Other" /> Other
    <br />
</p>

<p>

    How do you wish to be contacted?
    <br />
    <form action="">
    <select name="contact">
    <option value="telephone">Telephone</option>
    <option value="E-mail">E-mail</option>
    <option value="Snail-mail">Snail-mail</option>
    </select>
    </form>

</p>

<p>

<form>  
    <form name="input" 
    <form action="acknowledgement.html">
    <INPUT TYPE="SUBMIT" NAME="submit" VALUE="Submit and Verify"> 
</form>             
</p>

<form>  

<p>

<input type="reset" Name="resetbutton" Value="Reset Form Now">

</p>


</form>
<p><a href="#top">Back to Top</a></p> 

</body>

</html>

Code for Acknowledgement Page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Acknowledgement Page</title>


   <meta name="Description" content="This webpage is for  Customer Demographics" />
   <meta name="Keywords" content=" email, " />
   <meta name="author" content="Rhonda " />
   <meta name="copyright" content="Copyright 2010 Rhonda, All Rights Reserved" />
   <meta name="robots" content="all" />
   <meta name="revisit-after" content="15 days" />
   <meta name="rating" content="safe for kids" />


</head>

<body>

<body style="background-color:lightsteelblue">

<script type="text/javascript">

document.write("<h1>Request Confirmation</h1>");
document.write("<p>Your request has been received.</p>");
document.write("<p>Thank you. You will be added to our customer mailing list</p>");
document.write("<p>Please use your browsers back button or, </p>");


</script>

<address>

<a href="index.htm">Click here</a>

</address>

</body>

</html>

ansaurus

tags:

views:

answers:

HTML Form check homework

related questions