HTML Forms

The <form> element is a container for controls. It is used to create web forms such as Contact Forms, Registration, Login, etc. The form element has two main attributes:

  • Method
  • Action

You can also use the global attributes. The form element can contain text, and form controls will be explained in later tutorials. The <form> element only provides a GUI (Graphical User Interface) so users can enter data; it will not handle and validate the submitted data.

The method attribute takes either of the following values:

  • Get
  • Post

Get: This will show the form data in the URL; the requested document and data are separated by ? and then for any additional values the ampersand symbol [ & ] is used.

Post: The data is passed in the body of the form, and it is not visible to the user. Post is ideal for large amounts of data as there is no limitation.

The get method is commonly used in database searches, while the post method is used when adding data to a database.

For example, this is a simple job search using (the method is get): – This is your protocol (HTTP) and domain name.

jobs – This is the page you requested

? – This separates the  requested info and the data you submitted.

q=web+developer&l=London – These are the  values you entered, where q likely means query and l is the location. As you can see, they come in pairs with the name and value. You can see how the ampersand separates the data.

This is generally referred to as query string, and the q and l are parameters. The script at the other end looks for the parameter q and l and reads their value. If you view the source of the search page on you will see that the two text fields have a name attribute with the value q and l. If you changed it, the script would not run as the parameters are incorrect.

The action attribute is used to specify a value for an eternal script which will handle the data.

How forms work

  1. You request the document and the server responds and sends it to you (for example, this page).
  2. You enter the data and submit the form.
  3. The server passes the data to the correct form handler (the script which will process this information).
  4. The script performs its part, usually validation and so on.


<form action="/content/html/html_forms.cshtml" method=”get” target="_blank">

   Enter your name:<input maxlength="20" name="FullName" placeholder="Enter Your Name" type="text" />

   Select your age:

   <select name="age">



   <input class="tryit" type="submit" value="Submit Form" />


Later tutorials will address the <input> and <select> elements.


Enter your name: Select your age: