logo


Modelling: Creation of Forms



What are HTML Forms?

A form is simply an HTML element designed to get data from a user.

You use a form everytime you login. Here is an example of such a form:

You should be able to pick out the code for each element but this Coding Block will take you through each type of element and how they work.

image of key terms code

The HTML Form Element

As you can see above, the HTML Form Element is made up like all other HTML elements using a tag, in this case the tag is form. It has the following properties:

  1. The form element can have a class. In this case, it is used to apply a bespoke style from styles.css
  2. The form can have an id property. This is so that it can be identified and used by the JS/jQuery code
  3. Any HTML element inside the opening and closing tags is deemed to be part of the form.
  4. Some of these elements are input elements for getting input from the user. There are many types that you will have used and we will go through later on.
  5. At least one of the HTML elements must be a button element. This is so that the act of submitting the form can be captured. There are many ways to do this but you will be shown a particular way that provides the greatest control over the action.

Different Types of Form Input Elements

Remember that an input element is something that a user interacts with to provide the program with data or to enable a particular action to be carried out.

A form can be made from a variety of different input elements and this coding block will look at some of the basic input elements:

  • standard text input (including numbers)
  • select menus
  • radio buttons
  • check boxes

Standard Text Input

As already mentioned, this includes the entry of numbers - in fact it covers all possible ASCII and Unicode characters.


You can see that the input element has a type. This type can be set to many values but some of them are:

  • text meaning that it accepts any character
  • email meaning that the text must form a recognised email address
  • password meaning that it will put "stars" in place of any characters enetered to obsucre the text

You can find more input types here

image of code for an input box


Select Menu Input

These inut elements provide a list of choices.


You can see that the input element has a type. This type can be set to many values but some of them are:

image of code for an input box


This video goes through the modelling on this page: