Step : Adding a form

In this step we add a simple problem report form to the bottom of the page.

1. Add these lines after the line containing the <!-- APPLET --> comment.
   
   <br>
   <br>
   <h2 id=problem> Report a Problem </h2>
   <FORM id=fmReport method="get" action="report.html" >
   Name: <input type="text" name=txtName ><br><br>
   Employee id: <input type="text" name=txtID ><br><br>
   <input type="hidden" name="txtOS" >
   Description of the problem:<br>
   <textarea name=txaDesc rows=4 cols=40></TEXTAREA><BR><BR>
   <input type="submit" name="btnSubmit" value="Submit report">
   <input type="reset" name=btnReset>
   </FORM>
   <br>
   <br>
   <a href="#topholder">Back to Top</a>
   
   At the top of this section we have added a caption, "Report a Problem". At the bottom of this section we have added a hyperlink back to the top of the page.
   
   The FORM element contains four input fields and two buttons:
   • A text input field for the Name of the person submitting the problem.
   • A text input field for the Employee ID of the person submitting the problem.
   • A hidden field to contain the client operating system.
     Note: We will fill in this field using JavaScript in Step 15.
   • A scrollable textarea field for a Description of the Problem.
   • A submit button.
   • A reset button.
     
   
   In the FORM element we have specified method="get" so that the contents of the form's input fields will be appended as name/value pairs to the end of the URL when the submit button is pressed.We have specified action="report.html". The file report.html is a file on the server which contains JavaScript code to process the values.
   
   We chose the "get" method here as simpler to implement in real-life code for this tutorial. In designing your own page, you should follow the recommendation of the World Wide Web Consortium (W3C) by using method="post" and setting action= to the name of a processing script file, such as a PERL file, residing on the server.
   
   For the illustrative purposes of this tutorial, report.html, instead of processing the data, merely displays it.
   
   View the JavaScript in report.html.
   
   View the modified custom HTML template file.
   
   
2. Save and close the custom HTML template file.
   
   
3. Regenerate the Deployment Wizard output files.
   

The resulting Web page is shown below.

When the submit button is pressed the browser jumps to report.html.
View the page generated by report.html.