8 different HTML input type form examples

Input type

HTML form has different elements. The most important is input type element. The <input> element defines what kind of input user can enter. For example:

  • type = text specifies a user can enter text information (alphabets, numbers etc.).
  • type = checkbox specifies a user can select from given check box values.
  • type = radio defines a user can select one of a few given values from radio button.
  • text area allows users to enter multiline text information.
  • type = submit, is a button that will submit form data to form action page to be processes.
  • type = password will give a text box to enter passwords, where entered characters are not shown.

Input type text example

The example below shows a form with three text boxes. Name, email and address.

Experience this online


Input type text example with CSS

Experience this online


Input button example with onclick event

The example below shows creating an input button “Show message”. As you click on this button, the click event will trigger show javascript function that will show an alert.

Experience this online


Input submit example

Input type=”submit” is button type that submits form information to server. The example below shows how to use button as type submit in input element.

Experience this online


As you click on “Save info” button it will post data to form action =””. This is generally a scripting language page that processes submitted information and performs some action.

Input submit with CSS Example

You may also apply CSS to submit button. See example below:

Experience this online


Input type textarea

Input type textarea shows multiple line text box. For example allowing user to write message with contact us form. See example below of using input textarea.

Experience this online


Input hidden Example

The example below shows how you can use hidden field in html form.

Experience this online


Input image example

The input type image allows you to use an image and act as submit button. See example below to have an idea how to use image as input to use it in place of submit button.

Experience this online


Also see HTML table | HTML div | HTML links

Was this article helpful?

Related Articles

Leave A Comment?