HTML Forms Tutorials and Training

What is HTML Form?

HTML Forms are required for, when you intend to gather some information from the website visitor. For example, throughout customer registration, you want to collect info such as name, email address, mobile, and so on. A Form will certainly take input from the website visitor and it will publish it to a back-end application such as CGI, ASP script or PHP script, etc. The back-end application will certainly perform the required handling on the passed data based on specified business logic inside the application.

There are various Form elements offered that are listed below:

  • text
  • number
  • radio
  • checkbox
  • textarea
  • dropdown
  • color
  • date
  • datetime-local
  • email
  • month
  • range
  • Search
  • tel
  • time
  • URL
  • week

Input Element

The <input> element is the most important FORM element. The <input> element can be displayed in several ways, depending on the type attribute.

Examples:

Submit Button and Action

Defines a button for submitting the form data to a form handler. The form handler is typically a server page with a script for processing input data. The form handler is specified in the form’s action attribute: When you click on submit button the button will send data to the action script. The action attribute sends user form data to the server page when the visitor clicked on the button.

Method and Fieldset

When to Use GET?

The default method when submitting form data is GET. However, when GET is used, the submitted form data will be visible in the page address field: “/action_page.php?firstname=Mickey&lastname=Mouse"

Notes on GET:

  • Appends form data into the URL in name/value pairs
  • The length of a URL is limited (about 3000 characters)
  • Never use GET to send sensitive data! (will be visible in the URL)
  • Useful for form submissions where a user wants to bookmark the result
  • GET is better for non-secure data, like query strings in Google

When to Use POST?

Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field.

Notes on POST:

  • POST has no size limitations and can be used to send large amounts of data.
  • Form submissions with POST cannot be bookmarked

Grouping Form Data with

The 

 element is used to group related data in a form.

The 

 the element defines a caption for the element.

Example:

Text Area and Size of Field

The <select> Element

The <select> the element defines a drop-down list. The <option> elements define an option that can be selected. By default, the first item in the drop-down list is selected.

The <textarea> Element

The <textarea> the element defines a multi-line input field (a text area):

HTML Form Task 1

HTML Form Task 1

HTML Form Task 2

HTML Form Task 2

HTML Form Task 3

HTML Form Task 3

HTML Form Task 4

HTML Form Task 4

Take Your Free Live Demo Class Now

We Will Call Back You Shortly

Enter Your DETAILS BELOW

We Will Send You the Course Fees Details In Below Number

Enter Your DETAILS BELOW

We Will Call Back You Shortly

Enter Your DETAILS BELOW

We Will Call Back You Shortly

Enter Your DETAILS BELOW

Enter Your DETAILS BELOW TO take

free demo class