HTML type Attribute

Last Updated : 12 Mar, 2024

The type attribute in HTML specifies the type of content associated with an element, such as the button type, the media type of a source in an audio or video tag, or the type of input in a form element.

Syntax:

<element type="value">

Note: This attribute has been DEPRECATED and is no longer recommended.

Supported Tags:

Tag name	Description
<a>	Is used to create a hyperlink on the webpage.
<area>	Is used to defines an area inside an image map.
<embed>	Is used embeds external content like images, audio, or video.
<input>	Is used to defines an input field that allows users to enter data.
<link>	Is used to define a link between a document and an external resource.
<menu>	Is used to defines an Unordered List of items.
<object>	Is used to display multimedia like audio, videos, images, PDFs, and Flash on web pages.
<script>	The HTML <script> tag is used to embed or reference JavaScript code.
<source>	Is used to specifies multiple media resources for <picture>, <audio>, or <video> elements.
<style>	Is used to defines internal CSS styles for a document.

HTML type Attribute Examples

Example 1: In this example we created a form with input fields for username and password, utilizing the type attribute to specify input types. It includes buttons for submission and reset functionalities.

<!DOCTYPE html>
<html>

<head>
    <title>HTML type Attribute</title>
</head>

<body>
    <h3>HTML type Attribute</h3>

    <form action="#" method="get">
        Username:
        <input type="text" name="uname" />

        <br /><br />

        Password:
        <input type="password" name="pwd" />

        <br /><br />

        <button type="submit" value="submit">
            Submit
        </button>

        <button type="reset" value="reset">
            Reset
        </button>
    </form>
</body>

</html>

Output:

HTML type attribute

Example 2: In this example the type attribute specifies media formats for <embed> and <object>, stylesheet language for <style>, and scripting language for <script>, ensuring proper rendering and functionality.

<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    embed[type="image/jpg"] {
      width: 300px;
      height: 200px;
    }
  </style>
</head>

<body>

  <h1>The type attribute</h1>

  <embed type="image/jpg" 
         src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301084411/HTML-tutorial.jpg">
  <br><br>
  <object data=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301084507/javascript.webp" 
          type="image/webp"
          width="300" 
          height="200">
  </object>
  <br><br>
  <button type="button" 
          id="myButton">
    Click here
  </button>

  <script type="text/javascript">
    document.getElementById("myButton").addEventListener("click", function () {
      alert("Hello Geeks");
    });
  </script>

</body>

</html>

Output: