The type attribute can be applied to different elements, such as <input>, <a>, <ol>, <button>, <script>, <style> and more.
Generally, type specifies what type of element to create, or it defines the media type, formerly MIME type, of a linked file or resource.
Three <input> tags with type attributes. They create a text field, radio buttons, and a submit button respectively.
<form action="/tutorial/action.html">
<fieldset style="background: #f6f8ff; border: 2px solid #4238ca;">
<legend>User Information</legend>
<label for="fullname">Full name:</label>
<input type="text" id="fullname" name="fullname"><br /><br />
<label>Gender:</label>
<label for="male"><input type="radio" id="male" name="gender" value="male" checked> Male</label>
<label for="female"><input type="radio" id="female" name="gender" value="female"> Female</label>
<label for="other"><input type="radio" id="other" name="gender" value="other"> Other</label><br /><br />
<input type="submit" value="Submit">
</fieldset>
</form>
For additional details see our HTML input type Reference.
The type attribute specifies the type of element to create, or the media type of a linked file.
Elements that use type fall into three categories:
Examples of these elements can be found below.
<tagname type="button | checkbox | color | date | datetime-local | email | file |
hidden | image | number | password | radio | range | reset | search |
submit | tel | text | time | url | week |
1 | a | A | i | I |
media-type">
Note: No element accepts all values. See the list below for details.
| Value | Description | Elements |
|---|---|---|
| button |
Creates a clickable button. |
<input>, <button> |
| checkbox | Creates a checkbox or tickbox. | <input> |
| color | Creates a color picker. | <input> |
| date | Creates a date picker (year, month, day). | <input> |
| datetime-local | Creates a date and time picker without timezone. | <input> |
| Creates a text field for email address. | <input> | |
| file |
Creates a file upload field with browse button. |
<input> |
| hidden | Defines a hidden text field. | <input> |
| image | Use an image as submit button. | <input> |
| month | Creates a date picker without timezone (month and year). | <input> |
| number | Creates a number field with spinner (add or minus value). | <input> |
| password | Creates a password field. | <input> |
| radio | Creates a radio button. | <input> |
| range | Creates a range or slider control. | <input> |
| reset | Creates a reset button. | <input>, <button> |
| search | Creates a search text field. | <input> |
| submit |
Creates a submit button. |
<input>, <button> |
| tel | Creates a text field for telephone number. | <input> |
| text |
Creates a single-line text field. |
<input> |
| time | Creates a time picker without timezone. | <input> |
| url | Creates a text field for URL. | <input> |
| week | A date picker with week/year controls. | <input> |
| 1 | Specifies numbers for ordered list. This is the default. (1, 2, 3, 4). | <ol> |
| a | Specifies lowercase alphabet for ordered list (a, b, c, d).< | <ol> |
| A | Specifies uppercase alphabet for ordered list (A, B, C, D). | <ol> |
| i | Specifies lowercase roman numerals for ordered list (i, ii, iii, iv). | <ol> |
| I | Specifies uppercase roman numerals for ordered list (I, II, III, IV). | <ol> |
| media-type | Media type (formerly MIME type) of a linked resource. | <a>, <link>, <style>, <script>, <area>, <source>, <embed>, <object> |
The following elements accept the type attribute.
| Elements | Description | |
|---|---|---|
| <input> | Specifies an input field -- see example above | |
| <button> | Creates a clickable button. | |
| <link> | Introduces a stylesheet or icon into the page. | |
| <style> | Creates CSS rules for the current page. | |
| <a> | Specifies an anchor link. | |
| <ol> | Creates an ordered list. | |
| <script> | Introduces script to the page. | |
| <source> | Defines the audio, video, or picture source. | |
| <embed> | Displays an external resource in the page. | |
| <object> | Embeds external source as an object. |
A type attribute on a <button> element.
The attribute specifies the button is a submit button.
<form action="/tutorial/action.html">
<input type="text" name="email" placeholder="Enter your email">
<button type="submit">Submit</button>
</form>
For additional details see our HTML button type Reference.
A type attribute on a <link> element.
The attribute specifies the media type (formerly MIME type) of the stylesheet.
A paragraph styled with external css.
<link rel="stylesheet" type="text/css" href="/tutorial/style.css">
<p class="aliceblue">A paragraph styled with external css.</p>
For additional details see our HTML link type Reference.
A type attribute on a <style> element.
The attribute specifies the media type (formerly MIME type) of the CSS rules.
We will send you a confirmation email shortly.
<style type="text/css">
.success { color: teal; }
</style>
<h4 class="success">Your order has been approved!</h3>
<p>We will send you a confirmation email shortly.</p>
For additional details see our HTML style type Reference.
A type attribute on an anchor <a> element.
The attribute specifies the media type (formerly MIME type) of the linked page.
Go to <a type="text/html" target="_blank"
href="https://microsoft.com/">Microsoft</a>
For additional details see our HTML anchor type Reference.
A type attribute on an <ol> element.
The attribute specifies an alphabetic numbering for the items in the list.
<ol type="a">
<li>Paris</li>
<li>Amsterdam</li>
<li>London</li>
<li>Berlin</li>
</ol>
For additional details see our HTML ol type Reference.
A type attribute on a <script> element.
The attribute specifies the media type (formerly MIME type) of the script.
<p id="target"></p>
<script type="application/javascript">
(() => {
document.getElementById("target").innerHTML = "This text is written by JavaScript.";
})();
</script>
For additional details see our HTML script type Reference.
A type attribute on two <source> elements.
The attribute specifies the media type (formerly MIME type) of the video files.
<video width="320" height="240" controls>
<source type="video/mp4" src="/media/movie.mp4">
<source type="video/ogg" src="/media/movie.ogg">
</video>
For additional details see our HTML source type Reference.
A type attribute on a <embed> element.
The attribute specifies the media type (formerly MIME type) of the embedded image.
<embed type="image/jpg"
src="/img/html/vangogh-bedroom.jpg">
For additional details see our HTML embed type Reference.
A type attribute on a <object> element.
The attribute specifies the media type (formerly MIME type) of the pdf file.
<object data="/media/sample.pdf" type="application/pdf"
style="width:100%;height:500px;">
PDF cannot be displayed.
</object>
For additional details see our HTML object type Reference.
Here is when type support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
