19 Practical Steps To Creating A Web Forms With HTML - With Code Example.

Digital Photo, a chain of photo printing shops, has decided to add a simple survey to the company Web site to investigate the Internet usage of its customers. You have been asked to create a Web form as shown below.


 19 Practical Steps To Creating A Form Like Above:

To complete this task do the following steps:
  • Use your text editor to create a new file. Save your file as formproject.html. You will create this file yourself. No data files are needed.
  • Add the basic tags required for a Web page. The title of the page should be form project. Also add an HTML comment in the <head> section that identifies you as the author of the page.
  • After the <body> tag, create a level 2 heading as shown. Below the heading, enter the description of the purpose of the form in a paragraph.
  • Begin your form. The form name should be survey. Specify the mailto action with your e-mail, the method attribute with the post value.
  • As you code your form, keep in mind that it is good practice to specify a name and an id for some input types to ensure compatibility across browsers. Also keep in mind that you may want to use <br /> tags and other formatting tags to improve the layout and readability of your form.
  • You will use a table to lay out the form on the page. Create a table that is eight rows by two columns. Give the table cellpadding of 15 and cellspacing of 5. Set the width of the entire table to 65% of the browser window.
  • In the first row of the table, create a selection list to allow the user to choose their type of Internet connection. Place the label in the left column and the list in the right column. Specify that the list size so that it shows all choices at once and the High-Speed Cable choice is the default.
  • In the second row of the table, create option buttons to allow the user to specify the type of computer used at home. Place the label in the left column and the options in the right column.
  • In the third row of the table, create option buttons to allow the user to choose the main reason for using the Internet. Place the label in the left column and the options in the right column.
  • In the fourth row create a fieldset of check boxes and a fieldset of radio buttons. In the left column, use check boxes to allow the user to choose the types of sites visited most. In the right column, use radio buttons to allow the user to choose a time range that best reflects the average weekly time spent on the Internet. Put a descriptive legend on each fieldset.
  • In the fifth row, create a textarea box that spans both columns. This area will allow users to comment on the issues of Internet privacy and safety. Set the dimensions of the text area to 5 rows and 100 columns.
  • In the sixth row, create text boxes for First Name and Last Name, placing one text box in each column as shown. Set the size of each to 50.
  • In the seventh row, create text boxes for Age (size 5) and Zip Code (size 10), placing one text box in each column as shown.
  • In the eighth row create a submit button in the left column and a reset button in the right column. Enter the text of each button as shown.

Save the file.

  • View the formproject.html with your browser. Compare it with the sample page as shown above.

Make corrections as necessary and save your file.

  • You may also want to test your form by completing and submitting it. This should send your data file to you in an email message. You should then be able to open the submitted data in your text editor to view the format of the form output. Note: This will only work if your computer is set up with an email client.

Print a copy from the text editor and from the browser. for offline use.

Code That Will Give You The Best Result For Above Steps And The Picture.

Copy this code to your text editor notepad, notepad++, Bracket etc.

<!DOCTYPE html>
<title> Tutorial Project 6 D16CSC1060</title>
<p><style="color:red" align="center"h6> Yakubu Binuyaminu Adeiza <br> <font color="red">Reg No:</font> D16CSC1060</h6></p></center>
<form name = "survey">

<h2><b> Internet Usage Survey</b></h2>
This survey is being conducted to help identify the internet usage patterns of our customers.</br>
Please take a few moments to complete and submit this short form. Thank you for your cooperation.

<p><table cellpadding = "15" cellspacing = "5" width=65% rules="none" >

What type of internet connection do you have? </br> (Select One)</td>
<select name="int" id ="int" size ="4">
<option> Dail-up
<option> DSL
<option> High Speed Cable
<option> Other

<td>What type of computer do you use most at home?</td>
<td> <input type ="radio" name ="comp" id= "dsk" value="dsk" checked
<label for ="dsk"> Desktop </label> 

<input type ="radio" name ="comp" id= "lapt" value="lapt"
<label for ="lapt"> Laptop </label> </td>


<td>How would you describe your main reason for using the</br>internet?</td>

<td> <input type ="radio" name ="rsn" id= "wrk" value="wrk" 
<label for ="wrk"> To do work related activities </label><br>

<input type ="radio" name ="rsn" id= "sch" value="sch" 
<label for ="sch"> To do school-related activities </label><br>

<input type ="radio" name ="rsn" id= "ent" value="ent" 
<label for ="ent"> For entertainment purposes </label><br> 

<input type ="radio" name ="rsn" id= "oth" value="oth" 
<label for ="oth"> Other activities </label> </td>

<td> <fieldset> 
<legend align ="left"> Types of sites visited</legend>
 <p>What types of web sites do you access most often?<br>Check all that apply. </p>
<input type ="checkbox" name ="sites" id= "slf" value="slf" 
<label for ="slf"> Self Improvement</label><br> 

<input type ="checkbox" name ="sites" id= "entt" value="entt" 
<label for ="entt"> Entertainment</label><br> 

<input type ="checkbox" name ="sites" id= "nws" value="nws" 
<label for ="nws"> News and Sports</label><br>

<input type ="checkbox" name ="sites" id= "ref" value="ref" 
<label for ="ref"> Reference</label><br>  

<input type ="checkbox" name ="sites" id= "eml" value="eml" 
<label for ="eml"> Email</label><br> 

</fieldset> </td>

<td> <fieldset> 
<legend align ="left"> Time spent using internet</legend>

<p> During an average week, how long do you spend<br>online?</p>
<input type ="radio" name ="time" id= "3" value="3" 
<label for ="3"> 0-3 Hours </label><br> 

<input type ="radio" name ="time" id= "6" value="6" 
<label for ="6"> 4-6 Hours </label><br> 

<input type ="radio" name ="time" id= "10" value="10" 
<label for ="10"> 7-10 Hours </label><br> 

<input type ="radio" name ="time" id= "11" value="11" 
<label for ="11"> 11-14 Hours </label><br> 

<input type ="radio" name ="time" id= "15" value="15" 
<label for ="15"> 15+ Hours </label><br>

 </fieldset> </td>

<td colspan="2"> Please comment on your options concerning internet privacy and safety.<br>

<textarea name="comment" id="comm" rows="5" cols="100"> </textarea>


First Name:<br>
<input type="text" name="fname" id="fname" size= "50">

Last Name:<br>
<input type="text" name="lname" id="lname" size= "50">

<input type="text" name="age" id="age" size= "5">

Zip Code:
<input type="text" name="age" id="age" size= "10">

<td align="right">
<input type ="submit" value="Click to Submit">

<input type ="reset" value="Clear Form">


Yakubu Binuyaminu

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

No comments:

Post a Comment