HTML Form - Instructions

HTML uses form elements with sub input, label, textarea, select and option elements. This form is formatted using a table element. Submitting a form will POST the information to another part of the application.

HTML Form

This HTML Form shows a simple form with no validation.

It contains a variety of input types:

  • text
  • password
  • textarea
  • file
  • checkboxes
  • radio boxes
  • multi-select
  • dropdown select

Your file will not be processed or stored by the backend.

Synchronization

No synchronization is required for this page or the results page triggered by submit.

Results Page

The results page will show you the details you typed in, and those fields which had no values.

There are a lot of location possibilities and attributes on the results page to assert that your entered details are passed through to the server.

Dev Tools

Use the dev tools to inspect and explore the page DOM to understand the controls.

Image

Note the presence of the image in the form. It can not be changed, but it is an input element. What function does it perform?

Number Fields

  • What can you enter as a number which might cause validation errors on the server side?

Image

Try changing the src on the image` so that you can see what is rendered when the wrong or missing image is used.

Form Submission

Try to identify different ways to submit the form. Then experiment with them all.

Hint: I know of at least 6

Form Validation

When a form is submitted, some of the input types provide some validation protection e.g. email, url, etc.

Explore the form to find out which types offer validation, and when the validation is applied.

Can you think of any risks associated with this type of validation?

You can learn more about Testing Input Elements in our reference section.