TOC PREV NEXT INDEX



Create an HTML Form


We will now create an HTML form for use with the servlet. This form will allow users to enter their name and send this information to the Servlet. In the IDE, you see on the left the Project Tree, which has three sections. The first is called "Project Groups", and contains a list of group names.

  1. Choose the last item in Project Groups, labeled 'All Files'. You will see a list of all the files currently in the Tutorial7 main directory.
  2. In the IDE, choose 'Create a Form' from the button bar (to the right of the cup). A new Icon appears with a name similar to Untitled1.Form.
  3. Click this new icon once to select it. (It will become highlighted.)
  4. From the Edit menu, choose 'Rename selection'. A text field will appear to the right of the icon. Replace the old name with 'NameForm.Form'. Click the mouse anywhere else in the window to accept the change.
  5. Double click the new 'NameForm.Form' to open the HTML Form Editor.

You should see a new window on the screen. It is the HTML Form Editor. At the top of the Form Editor you will see the name of the HTML file it will generate, NameForm.html.

  1. Press the Add button on the right of the screen. This will add a new form element to the table in the center of the Form Editor, with a name, 'Untitled0', and a type, 'Hidden'.
  2. Double click in the first cell on the left, which reads 'Untitled0'. You will see an insertion point in the cell, which indicates you may edit the contents.
  3. Change the name from 'Untitled0' to 'Rep Name'.
  4. Click once in the 'Value' cell. You will see the name change to 'Rep_Name'. Names should be one word, so any spaces will be changed to underscores ( _ ).
  5. Next, click the mouse once on the cell in the 'Type' column. A list will pop up of the possible types of form elements.
  6. Select 'Text', the first item on the list.
  7. The Value field will let you type the default value for your text field. In this case, leave it blank so the text box will start off empty.
  8. Double click on the Label cell.
  9. Type 'What is your name?' into it. This is the text which will appear immediately above the text field in your form.
  10. Press the Add button two times. You will see two new rows in the table, named 'Untitled1' and 'Untitled2'.
  11. Change the name of Untitled1 to 'Send'.
  12. Change its type to 'Submit'. This will become a button that is used to send the information from the form to the servlet.
  13. Change its value to 'Send'. The value of a submit button is the text displayed on the button.
  14. Change the name of Untitled2 to 'Clear'.
  15. Change its type to 'Reset'. This will be a button that is used to clear the user input and reset all fields to their default values.
  16. Change its value to 'Clear'.

At the bottom of the page is a ComboBox which lists the names of the servlets in the current Project directory.

  1. Type "Response" into the ComboBox and hit return.

You have now set up a simple form which will be used to invoke the Servlets that you will create.

  1. To finish, press the save button. This will save your Form file and generate HTML code.
  2. Close the form generator.

If you wish to view the html which was generated, you may double click the file 'NameForm.html' in the IDE. You may be asked for the path to your preferred web browser. The 'Send' button will not work properly yet, though, because we have not yet created a servlet to respond to this form. That will be the next task we do.


Data Representations, Inc.
http://www.datarepresentations.com
support@datarepresentations.com
sales@datarepresentations.com
TOC PREV NEXT INDEX