HTML Types

The type attribute assigns additional features or behavior to an HTML element. There are 8 different HTML elements that accept the type attribute.

HTML Tutorial

Example

A form with <input> elements of different type: text, email, checkbox, and submit.

Mortgage application





<form action="/tutorial/action.html">
  <fieldset style="border: 2px solid #4238ca; background: #f6f8ff; ">
    <legend>Mortgage application</legend>

    <input type="text" placeholder="First name" name="firstname"><br /><br />
    <input type="text" placeholder="Last name" name="lastname"><br /><br />
    <input type="email" placeholder="Email" name="email"><br /><br />

    <div>
      <input type="checkbox" id="self" name="self" value="self">
      <label for="self">Self-employed</label>
    </div>

    <input type="submit" value="Submit" />
  </fieldset>
</form>

Applying type

For buttons, the type attribute sets the type of button: submit, reset, etc.

For input elements, the type attribute sets the type of <input>: text, radio, password, etc.

And there are several other elements that accept type -- they are listed below.

For more information on the input tag, see our HTML input Tag Reference.

The type Attribute

The type attribute can be applied to the following elements.

Elements Attribute Values
<button> type submit, reset, or button
<input> type button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, or week
<link> type A media type such as text/html or text/css.
<script> type A media type such as application/javascript or application/ecmascript.
<source> type A media type such as video/mp4 or audio/mpeg.
<embed> type A media type such as image/jpg or application/pdf.
<object> type A media type such as image/jpg or application/pdf.
<style> type A media type, but only text/css is valid.

Tip:  In some cases, the type value is a media type (formerly MIME type).
See the IANA Media Types website for a complete list of media types.


<button> type example

Two <button> elements; one of type submit, the other of type reset.

First name

Last name



<form action="/tutorial/action.html">
   First name <br />
   <input type="text" name="firstname"> <br />
   Last name <br />
   <input type="text" name="lastname"> <br /> <br /> 
   <input type="submit" value="Submit"> <input type="reset"><br />   
</form>

For more information about the <button> tag, see our HTML button Tag Reference.


<input> type example

Three different <input> elements with types text, checkbox, and submit respectively.

First name

Last name

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

  <div style="margin:20px 0;">
    <input type="checkbox" id="accept" name="accept" checked>
    <label for="accept">Accept terms</label>
  </div>

  <input type="submit">
</form>

For more information about <input>, see our HTML input Tag Reference.


<link> type example

A <link> element referencing a stylesheet with a text/css media type.

<link type="text/css" rel="stylesheet" href="/style.css">

Note:  in HTML5, the type is optional for a link with rel="stylesheet". The default is text/css.

For more information about the link tag, see our HTML link Tag Reference.


<script> type example

A <script> element with JavaScript specifying an application/javascript media type.

<p id="demo"></p>

<script type="application/javascript">
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

Note:  In HTML5, the type is optional for script. The default is application/javascript.

For more information about the <script> tag, see our HTML script Tag Reference.


<source> type example

Two <source> tags with different media types: audio/ogg and audio.mpeg.

<audio controls>
  <source src="/media/epic.mp3" type="audio/mpeg">
  <source src="/media/epic.wav" type="audio/wav">
  Your browser does not support audio. Please upgrade.
</audio>

For more information about the <source> tag, see our HTML source Tag Reference.


<style> type example

A <style> element with a text/css media type.

A styled div element.
<style type="text/css">
  .corn {color: brown; background:cornsilk; padding:20px;}
</style>

<div class="corn">A styled div element.</div>

Note:  In HTML5, the type is optional for the style tag. The default is text/css.

For more information about the style tag, see our HTML style Tag Reference Guide .


Browser Support

Support for the type attribute is universal.

<button> <input> <link> <style> <script> <source> <object> <embed>
Chrome
Yes Yes Yes Yes Yes Yes Yes Yes
Firefox
Yes Yes Yes Yes Yes Yes Yes Yes
IE/Edge
Yes Yes Yes Yes Yes Yes Yes Yes
Opera
Yes Yes Yes Yes Yes Yes Yes Yes
Safari
Yes Yes Yes Yes Yes Yes Yes Yes

You may also like

Guides