Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do we set the type of element in HTML?
In HTML, the type attribute is used to specify the type or behavior of various HTML elements. This attribute is essential for defining how elements should function and what kind of content they handle. The type attribute is commonly used with form elements like <input> and <button>, as well as multimedia and resource elements.
The type attribute serves different purposes depending on the element −
Form elements − Defines the input type or button behavior
Script elements − Specifies the scripting language or MIME type
Media elements − Indicates the media format or MIME type
Link elements − Describes the linked resource type
Elements That Support Type Attribute
The type attribute can be used with the following HTML elements −
| Element | Purpose of Type Attribute | Common Values |
|---|---|---|
| <input> | Defines the input control type | text, password, email, number, submit, button |
| <button> | Specifies button behavior | button, submit, reset |
| <script> | Indicates scripting language | text/javascript, application/javascript |
| <link> | Describes linked resource | text/css, text/javascript |
| <source> | Specifies media format | audio/mpeg, video/mp4, image/webp |
| <embed> | Defines embedded content type | application/pdf, video/mp4 |
HTML Button Element
The <button> element creates clickable buttons in HTML forms. The type attribute determines the button's behavior when clicked. There are three main button types: submit (submits form data), reset (resets form fields), and button (performs custom actions via JavaScript).
Syntax
<button type="submit|reset|button">Button Text</button>
Example
Following example demonstrates different button types in an HTML form −
<!DOCTYPE html>
<html>
<head>
<title>Button Type Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Registration Form</h2>
<form action="#" method="post">
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="firstname" style="margin: 5px;"><br><br>
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lastname" style="margin: 5px;"><br><br>
<button type="submit">Submit Form</button>
<button type="reset">Clear Fields</button>
<button type="button" onclick="alert('Custom action!')">Custom Button</button>
</form>
</body>
</html>
The output displays a form with three buttons: Submit Form (submits data), Clear Fields (resets form), and Custom Button (shows alert) −
User Registration Form First Name: [text input] Last Name: [text input] [Submit Form] [Clear Fields] [Custom Button]
HTML Input Element
The <input> element is the most versatile form control in HTML. The type attribute determines what kind of input control is displayed and how user data is collected. Different input types provide built-in validation and specialized user interfaces.
Syntax
<input type="inputType" name="fieldName" id="fieldId">
Example − Various Input Types
Following example shows different input types and their behaviors −
<!DOCTYPE html>
<html>
<head>
<title>Input Type Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Different Input Types</h2>
<form action="#" method="post">
<p><label for="username">Username (text):</label>
<input type="text" id="username" name="username" placeholder="Enter username"></p>
<p><label for="email">Email (email):</label>
<input type="email" id="email" name="email" placeholder="user@example.com"></p>
<p><label for="age">Age (number):</label>
<input type="number" id="age" name="age" min="1" max="120"></p>
<p><label for="password">Password (password):</label>
<input type="password" id="password" name="password"></p>
<p><input type="submit" value="Submit Data">
<input type="reset" value="Reset Form"></p>
</form>
</body>
</html>
Each input type provides specific functionality: email validation, number controls, password masking, and form submission −
Different Input Types Username (text): [text input with placeholder] Email (email): [email input with validation] Age (number): [number input with controls] Password (password): [masked input] [Submit Data] [Reset Form]
HTML Script Element
The <script> element embeds or references executable JavaScript code. The type attribute specifies the MIME type of the script content, helping browsers understand how to process the code.
Syntax
<script type="mimeType"> // JavaScript code </script>
Example
Following example demonstrates using the script element with the type attribute −
<!DOCTYPE html>
<html>
<head>
<title>Script Type Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Content Example</h2>
<p id="message">Original content</p>
<button onclick="changeContent()">Change Content</button>
<script type="text/javascript">
function changeContent() {
document.getElementById("message").innerHTML = "Content changed by JavaScript!";
}
// Auto-execute when page loads
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("message").innerHTML = "Page loaded successfully!";
});
</script>
</body>
</html>
The script automatically changes the paragraph content when the page loads, and provides a button to change it again −
Dynamic Content Example Page loaded successfully! [Change Content] (Clicking button changes text to: "Content changed by JavaScript!")
HTML Source Element
The <source> element provides multiple media resource options for <audio>, <video>, and <picture> elements. The type attribute specifies the MIME type of the media file, helping browsers choose the most suitable format.
Syntax
<audio|video|picture> <source src="mediaFile.ext" type="mimeType"> </audio|video|picture>
Example − Audio with Multiple Sources
Following example shows how to provide multiple audio format options −
<!DOCTYPE html>
<html>
<head>
<title>Source Type Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Audio Player Example</h2>
<p>The browser will choose the first supported audio format:</p>
<audio controls style="width: 300px;">
<source src="sample.ogg" type="audio/ogg">
<source src="sample.mp3" type="audio/mpeg">
<source src="sample.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
<p><strong>Note:</strong> The type attribute helps browsers determine format compatibility without downloading the file.</p>
</body>
</html>
The browser checks each source type and uses the first supported format, providing better compatibility across different browsers.
296 Views
