HTML type Attribute - HTML Attribute - Horje

Definition and Usage

For <button> elements, the type attribute specifies the type of button.

For <input> elements, the type attribute specifies the type of <input> element to display.

For <embed>, <link>, <object>, <script>, <source>, and <style> elements, the type attribute specifies the Internet media type (formerly known as MIME type).

Applies to

The type attribute can be used on the following elements:

Elements	Attribute
<a>	type
<button>	type
<embed>	type
<input>	type
<link>	type
<menu>	type
<object>	type
<script>	type
<source>	type
<style>	type

Browser Support

The type attribute has the following browser support for each element:

How to add Two button elements that act as one submit button and one reset button (in a form) - HTML type Attribute

Button Example. The button type attribute.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The button type attribute</h1>

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <button type="submit" value="Submit">Submit</button>
  <button type="reset" value="Reset">Reset</button>
</form>

</body>
</html>

Output should be:

How to add An embedded flash animation with a specified media type - HTML type Attribute

Embed Example.

index.html

Example: HTML

<embed type="image/jpg" src="https://horje.com/avatar.png">

Output should be:

How to add An HTML form with two different input types; text and submit - HTML type Attribute

Input Example.

index.html

Example: HTML

<form action="/action_page.php">
  <label for="username">Username: </label>
  <input type="text" id="username" name="username"><br>
  <input type="submit" value="Submit">
</form>

Output should be:

How to add In the following example, the type attribute indicates that the linked document is an external style sheet -

Link Example.

index.html

Example: HTML

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

Output should be:

How to add An <object> element with a specified media type - HTML type Attribute

The object type attribute.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The object type attribute</h1>

<object data="https://horje.com/avatar.png" type="image/jpg" width="500" height="300">
</object>
 
</body>
</html>

Output should be:

How to add A script with the type attribute specified - HTML type Attribute

The script type attribute.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The script type attribute</h1>

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

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

</body>
</html>

Output should be:

How to Use of the type attribute - HTML type Attribute

Source Example.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The source type attribute</h1>

<audio controls>
  <source src="https://file-examples.com/wp-content/storage/2017/11/file_example_MP3_5MG.mp3" type="audio/ogg">
  <source src="https://file-examples.com/wp-content/storage/2017/11/file_example_MP3_5MG.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

</body>
</html>

Output should be:

How to Use the type attribute to specify the media type of the <style> tag - HTML type Attribute

Style of This is a heading This is a paragraph.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Output should be:

html type attribute

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Attribute
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference