HTML input type Attribute

HTML <input> tag

Definition and Usage

The type attribute specifies the input type of the element.

Syntax

<input type="type" />

Text Fields

Text fields are used when you want the user to type letters, numbers, etc. in a form.

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

How it looks in a browser:

Note that in most browsers, the width of the text field is 20 characters by default. 

Try it yourself: Input type text

Button

A simple clickable button. This input type is mostly used together with JavaScript to activate a script.

On its own, the button input does not really do anything:

<form action="">
Button:
<input type="button" value="Click me" />
</form>

How it looks in a browser:

Try it yourself: Input type button

Submit Button

The submit input type sends the form data to the specified URL (set in the form element action attribute)

<form action="">
<input type="text" name="firstname" />
<input type="submit" />
</form>

To see how this looks in a browser, use this example: Try it yourself: Input type submit

Checkboxes

Checkboxes are used when you want the user to select one or more options of a limited number of choices.

<form action="">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br>
I have a car: 
<input type="checkbox" name="vehicle" value="Car" />
<br>
I have an airplane: 
<input type="checkbox" name="vehicle" value="Airplane" />
</form>

How it looks in a browser:

Try it yourself: Input type checkbox

Radio Buttons

Radio Buttons are used when you want the user to select one of a limited number of choices.

<form action="">
<input type="radio" name="sex" value="male" /> Male
<br>
<input type="radio" name="sex" value="female" /> Female
</form>

How it looks in a browser:

Note that only one option can be chosen.

Try it yourself: Input type radio

Hidden

A hidden input type is not shown on the page. However, it can still be used to store a value. The it can contain a default value, or have it's value changed (or set when the page loads) by a script.

<form action="">
<input type="hidden" name="hidden1" value="W3Schools Example" />
</form>

Try it yourself: Input type hidden

Password

The password input type is almost completely identical to the text field input. The difference is that characters displayed in this field are masked. The characters will be shown like stars (or circles, depending on the browser).

This input field will mask the text to any onlookers, however, the form sends the data as plain text.

<form action="">
<input type="password" name="pass" value="example" />
</form>

How it looks in a browser:

Try it yourself: Input type password

File

The file input type is used for file uploads.

<form action="">
File: <input type="file" />
</form>

How it looks in a browser:

The file upload attribute "accept" specifies what kind of files can be uploaded. However, it is poorly supported in all major browsers. It is recommended to use server side validation on file uploading.

Try it yourself: Input type file

Image

The image input type is used just like the standard submit button (described further up). Use this input type when you need something other than a standard button. Any image can be used as a button.

By default, if no form action is specified, this input type sends the click coordinates of the image when activated.

When using this input type you must also specify the image url using the src attribute, and the alternate image text, using the alt attribute:

<form action="">
<input type="image" src="input_image.gif" alt="W3Schools button" />
</form>

To see how this looks in a browser, use this example: Try it yourself: Input type image

Reset Button

The reset button clears all data from the form.

Use this button carefully, as it can be an annoyance for users who accidentally activate this button.

In appearance the reset button is similar to the submit and button input types.

<form action="">
<input type="text" name="firstname" />
<input type="reset" />
</form>

How it looks in a browser:

Try it yourself: Input type reset

Browser Support

The attribute is supported in all major browsers.

HTML <input> tag