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.
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
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:
HTML | type Attribute
Supported Browsers
The browser supported by HTML type attributes are listed below:Â
Share your thoughts in the comments
Please Login to comment...