- HTML Tutorial
- HTML - Home
- HTML - Introduction
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Headings
- HTML - Paragraphs
- HTML - Fonts
- HTML - Blocks
- HTML - Style Sheet
- HTML - Formatting
- HTML - Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - type Attribute
HTML type attribute specifies the type of an element.
This is used to specify the type of button for the <button> tag, and it is also used in the <input> tag to specify the type of input to display. It determines the internet media type (often referred to as MIME type) for the <embed>, <link>, <object>, <script>, <source>, and <style> elements.
Syntax
<element type="value">
Applies on
The below-listed elements allow the use of the HTML type attribute.
Element | Description |
---|---|
<button> | HTML <button> tag is used to create a button. |
<embed> | HTML <embed> tag is used as a container for external applications, multimedia, and interactive content that the browser don't understand. |
<input> | HTML <input> tag is used to specify the input field. |
<object> | HTML <object> tag in HTML is used to show multimedia on web pages, including audio, video, pictures, webisite, PDFs, and Flash. |
<ol> | HTML <ol> tag is used to create an ordered list. The default order of the ordered list is numerical. |
<script> | HTML <script> tag is used to declared Client-side script (JavaScript). |
<source> | HTML <source> tag is an empty element. It denotes the absence of both a closing tag and any content in the tag. |
<style> | HTML <style> tag contains style information for an HTML document or part of a document. |
<menu> | HTML <menu> tag is used for creating a menu list. |
<link> | HTML <link> tag specifies relationship between the current document and an external resource. |
Examples of HTML type Attribute
Below examples will illustrate the HTML type attribute, where and how we should use this attribute!
Using type attribute with "input" tag
On running the below code, the output window will display the input field along with a submit and reset button on the webpage.
<!DOCTYPE html> <html> <body> <h1>The button type attribute</h1> <form action="" method="post"> <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>
Using type attribute with "embed" tag
When we run the below code, it will generate an output consisting of the image displayed on the webpage.
<!DOCTYPE html> <html> <body> <h1>The embed type attribute</h1> <embed type="image/jpg" src= "https://www.tutorialspoint.com/images/logo.png?v2"/> </body> </html>
Using type attribute with "link" tag
On running the below code, the output window will display the text applied with CSS on the webpage. CSS will not work as it will not able link.
style.css
body{ background-color: purple; } h2{ color: green; } span{ color: black; }
type.html
<!DOCTYPE html> <html> <body> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h2> Tutorials<span>point</span> </h2> <h3>Link element with type attribute</h3> <p>This is external CSS</p> </body> </html>
Using type attribute with "button" tag
On running the below code, a form gets displayed with submit and reset buttons.
<!DOCTYPE html> <html> <head> <title>Button tag with type Attribute</title> </head> <body> <h2>Button Types</h2> <form action= "https://tutorialspoint.com/" method="post"> <label for="first_name">First name:</label> <input type="text" name="first_name" /> <br><br> <label for="last_name">Last name:</label> <input type="text" name="last_name" /> <br><br> <button type="submit"> Submit</button> <button type="reset">Reset</button> </form> </body> </html>
Using type attribute with "object" tag
On running the below code, tutorialspoint logo gets displayed on the output screen.
<!DOCTYPE html> <html> <head> <title>Object tag with type attribute</title> </head> <body> <h1>Tutorialspoint</h1> <object data= "https://www.tutorialspoint.com/cg/images/logo.png" type="image/png"> </object> </body> </html>
Using type attribute with "script" tag
On running the below code, javascript text gets displayed on the output screen.
<!DOCTYPE html> <html> <head> <title>Script tag with type attribute</title> </head> <body> <script type="text/JavaScript"> document.write("You're visiting tutorialspoint!") </script> </body> </html>
Using type attribute with "source" tag
On running the below code, audio file gets displayed on the output screen.
<!DOCTYPE html> <html> <head> <title>Source tag with type attribute</title> </head> <body> <audio controls> <source src= "https://samplelib.com/lib/preview/mp3/sample-3s.mp3" type="audio/mpeg"> </audio> </body> </html>
Using type attribute with "style" tag
On running the below code, content inside h1 tag gets displayed with internal styling applied using style tag.
<!DOCTYPE html> <html lang="en"> <head> <title>Style Tag with type attribute</title> <style type="text/css"> h1 { color: green; font-size: 40px; font-style: italic; } </style> </head> <body> <h1>Applied css internal styling within h1 tag</h1> </body> </html>
Supported Browsers
Attribute | |||||
---|---|---|---|---|---|
type | Yes | Yes | Yes | Yes | Yes |
To Continue Learning Please Login
Login with Google