HTML type Attribute

The type attribute can be applied to a variety of 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.

Example

#

Three <input> tags with type attributes.
They create a text field, radio buttons, and a submit button respectively.

User Information  

         

<form action="/tutorial/action.html">
  <fieldset style="background: #f6f8ff; border: 2px solid #4238ca;">
    <legend>User Information</legend>
    <label for="fullname">Full name:</label> &nbsp;
    <input type="text" id="fullname" name="fullname"><br /><br />

    <label>Gender:</label> &nbsp;&nbsp;&nbsp;
    &nbsp; <label for="male"><input type="radio" id="male" name="gender" value="male" checked> Male</label>
    &nbsp; <label for="female"><input type="radio" id="female" name="gender" value="female"> Female</label>
    &nbsp; <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.


Using type

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:

  • Input elements use it to specify different control types: text field, button, checkbox, radio, etc.
  • Ordered lists use it to specify a list style numbering format.
  • Media elements use it to specify the media type (formerly MIME type) of a file or resource.

Examples of these elements can be found below.


Syntax

<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.

Values

#

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>
email 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>

Elements that accept type

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.

<button> with type

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.


<link> with type

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.


<style> with type

A type attribute on a <style> element.
The attribute specifies the media type (formerly MIME type) of the CSS rules.

Your order has been approved!

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> with type

A type attribute on an anchor <a> element.
The attribute specifies the media type (formerly MIME type) of the linked page.

Go to Microsoft
Go to <a type="text/html" target="_blank"
         href="https://microsoft.com/">Microsoft</a>

For additional details see our HTML anchor type Reference.


<ol> with type

A type attribute on an <ol> element.
The attribute specifies an alphabetic numbering for the items in the list.

  1. Paris
  2. Amsterdam
  3. London
  4. Berlin
<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.


<script> with type

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.


<source> with type

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.


<embed> with type

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.


<object> with type

A type attribute on a <object> element.
The attribute specifies the media type (formerly MIME type) of the pdf file.

PDF cannot be displayed.
<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.


Browser support

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

You may also like



Guides