HTML Forms

Written by

Aayushi Bansal

Forms are often used to collect data in the form of survey, registration etc.

Before going to the HTML forms let us understand their working.

When a user fills a form and submits the information to the server, the name of each form control is sent to the server along with the value the user enters or selects. The server processes the information using a programming language such as PHP, Java, etc. It may also store the information in a database. The server then creates a new page to send back to the browser-based on the information received.

To differentiate between various pieces of inputted data, information is sent from the browser to the server using name/value pairs.

The HTML <form> element defines a form that is used to collect user input. Form elements can be of different types like text fields, checkboxes, drop-down boxes, radio buttons, submit buttons, etc.

Next, we have the <input> element which is used to create several different form controls. The value of the type attribute determines what kind of input they will be creating.

Example:
1. <input type=”text”> – This defines a one-line text input field.
2. <input type=”submit”> – This defines a submit button for submitting the form.

 

Example of type=text:

<form>
  First name: <input type="text" name="firstname"><br>
  Last name: <input type="text" name="lastname">
</form>

 

The name attribute:

When information is entered into a form, the server needs to know which form control each piece of data was entered into. Therefore, each form control requires a name attribute.

If the name attribute is omitted, the data of that input field will not be sent at all.

 

The action attribute:

It defines the action to be performed when the form is submitted. Its value is the URL for the page on the server that will receive the information.

 

The method attribute :

There are two types of methods used for submitting the forms: get and post method.

For example:

<form action=”/action.php” method=”get”>

If the method attribute is not used, the default method set up is the GET method.

GET method is ideal for short forms and for non-secure data. It is recommended to use POST if the form data contains sensitive or personal information.

HTML Forms