Open In App

HTML type Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML
<!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

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.

HTML
<!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:

typeAttribute

HTML | type Attribute


Supported Browsers

The browser supported by HTML type attributes are listed below: 


Last Updated : 12 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads