HTML Input type Attribute

Definition and Usage The type attribute specifies the input type of the element. Syntax <input type=" type " /> ...

Definition and Usage

The type attribute specifies the input type of the element.

Syntax

<input type="type" />

Parameter Description
type Optional. Specifies the type of input field.Note: This is not a required attribute, but it is recommended to include it. If omitted, most browser will still display a text field, but not all.
Possible values:
  • text (default)
  • button
  • submit
  • checkbox
  • radio
  • hidden
  • password
  • file
  • image
  • reset
A detailed description of each possible value below.


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:

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


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>


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>


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:

I have a bike:
I have a car:
I have an airplane:


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:
Male
Female

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="Example" />
</form>


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:



File

The file input type is used for file uploads.

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

How it looks in a browser:

File:

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.


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="button" />
</form>


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:


Browser Support

The attribute is supported in all major browsers.
Name

ADO,131,ASP,3,C++,61,CORE JAVA,1,CSS,115,HTML,297,index,5,JAVASCRIPT,210,OS,47,PHP,65,SAD,53,SERVLETS,23,SOFTWARE ENGINEERING,245,SQL,71,TCP/IP,1,XHTML,9,XML,18,
ltr
item
Best Online Tutorials | Source codes | Programming Languages: HTML Input type Attribute
HTML Input type Attribute
Best Online Tutorials | Source codes | Programming Languages
https://www.1000sourcecodes.com/2012/05/html-input-type-attribute.html
https://www.1000sourcecodes.com/
https://www.1000sourcecodes.com/
https://www.1000sourcecodes.com/2012/05/html-input-type-attribute.html
true
357226456970214079
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content