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.

Input type text example with CSS

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.

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.

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:

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.

Input hidden Example

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

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.

Also see HTML table | HTML div | HTML links

Was this article helpful?

Related Articles

Leave A Comment?