HTML Form “CopyMe” Page

This page shows you the different form components that you can have in an HTML form, and the code that you use to create them. This page should not take the place of a tutorial specifically on how to create HTML forms, as it does not go into detail on how you should structure them, how you should set the return values for them, and so on. This page is intended for those who have done forms in the past, but don't remember how to write the code for them.

Text fields

Underlying code:

<form method="post" action="page_to_link_to.jsp">
  <p>
    Field name: <input type="text" name="text_field_name">
  </p>
</form>

Radio buttons

The following sample shows a set of radio buttons with one of them selected already. You can opt to have a set of radio buttons without having one of them already checked. To do this, leave the SELECTED keyword out of the radio button definition.

Underlying code:

<form method="post" action="page_to_link_to.jsp">
  <p>
    <input type="radio" name="radio_button_name" value="return_value_1" SELECTED>
    Radio button text #1
  </p>
  <p>
    <input type="radio" name="radio_button_name" value="return_value_2">
    Radio button text #2
  </p>
  <p>
    <input type="radio" name="radio_button_name" value="return_value_3">
    Radio button text #3
  </p>
</form>

Check boxes

When you collect data using JSP, you only check to see if a check box has a value. So, the value that you specify in the value parameter is not important, though you do need to specify some value.

Underlying code:

<form method="post" action="page_to_link_to.jsp">
  <p>
    <input type="checkbox" name="checkbox" value="checkbox_return_value">
    Check box text #1
  </p>
  <p>
    <input type="checkbox" name="checkbox2" value="checkbox_return_value">
    Check box text #2
  </p>
</form>

Drop-down list boxes

As with radio buttons, you can opt to not have an option already selected by omitting the SELECT keyword.

Underlying code:

<form method="post" action="page_to_link_to.jsp">
  <p>List box caption:
    <select name="drop_down_list_box_name">
      <option value="Item #1 Return Value" SELECTED>Item #1 Label</option>
      <option value="Item #2 Return Value">Item #2 Label</option>
      <option value="Item #3 Return Value">Item #3 Label</option>
    </select>
  </p>
</form>

Standard list boxes

There is very little difference between the code for drop-down list boxes and for standard list boxes. To put the caption at the vertical center of the list box, create a two-column table, and set the valign value for the cell with the caption in it equal to "middle".

Underlying code:

<form method="post" action="page_to_link_to.jsp">
  <p>List box caption:
    <select name="list_box_name" size="3">
      <option value="Item #1 Return Value" SELECTED>Item #1 Label</option>
      <option value="Item #2 Return Value">Item #2 Label</option>
      <option value="Item #3 Return Value">Item #3 Label</option>
    </select>
  </p>
</form>

Buttons

Underlying code:

<form method="post" action="page_to_link_to.jsp">
  <input type="submit" name="Submit_button_name" value="Submit">
  <input type="reset" name="Reset_button_name" value="Reset">
</form>