
- HTML Tutorial
- HTML - Home
- HTML - Overview
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Comments
- HTML - Images
- HTML - Tables
- HTML - Lists
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Frames
- HTML - Iframes
- HTML - Blocks
- HTML - Backgrounds
- HTML - Colors
- HTML - Fonts
- HTML - Forms
- HTML - Embed Multimedia
- HTML - Marquees
- HTML - Header
- HTML - Style Sheet
- HTML - Javascript
- HTML - Layouts
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- HTML - Fonts Ref
- HTML - Events Ref
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
How do we set the type of element in HTML?
In this article, we are going to learn about how do we set the type of element in HTML as we are familiar with <input> type in HTML. For <button> elements, the HTML type Attribute is used to define the type of button. The type of input to display is also specified using it in the <input> element. The Internet Media Type is used for embed elements including link, object, script, source, and style. Let’s dive one by one into the examples.
The type attribute can be used to the following elements
Element | Attribute |
---|---|
<a> | type |
<button> | type |
<embed> | type |
<input> | type |
<link> | type |
<menu> | type |
<script> | type |
Let’s look into the following examples to understand how do we set the type of element in HTML.
HTML <button> tag
The clickable button in HTML is defined by the <button> tag. The content is sent using the <button> tag. The <button> tag can contain graphics and text information. Different default types for "button" are used by various browsers.
Example
In the following example we are using two <button> tag where one acts as submit and another one as reset.
<!DOCTYPE html> <html> <body> <form action="#" method="get"> <label for="firstname">Username:</label> <input type="text" id="firstname" name="firstname"><br><br> <label for="lastname">Surname:</label> <input type="text" id="lastname" name="lastname"><br><br> <button type="submit" value="Submit">Submit</button> <button type="reset" value="Reset">Reset</button> </form> </body> </html>
When the script gets executed, it will generate an output consisting of an input field for username and surname, which are set by type="text", along with a submit button and reset button.
HTML <input> tag
The <input> tag designates a field for user-enterable data. The most significant form element is the <input> element. Depending on the type attribute, the <input> element can be presented in a number of different ways.
Example
Consider the following example we are using HTML form with two different input types one is text and another is for submitting.
<!DOCTYPE html> <html> <body> <form action="#"> <label for="Username">Enter name: </label> <input type="text" id="Username" name="Username"><br> <input type="submit" value="Submit"> </form> </body> </html>
When the above script is run, it will produce an output that includes an input field for entering the name with the type=”text” and an input button with the type="submit" attribute.
Using Script
Looking into the following example we are running a script with type attribute specified
Example
In the following example we are using two <button> tag where one acts as submit and another one as reset.
<!DOCTYPE html> <html> <body> <p id="tutorial"></p> <script type="application/javascript"> document.getElementById("tutorial").innerHTML = "Hello,Good Morning."; </script> </body> </html>
On running the above script, the output window will pop up, displaying the text "hello, good morning." On the webpage.
HTML <source> tag
Multiple media resources can be specified using the <source> tag for media components like <video>, <audio>, and <image>. Depending on browser support or viewport width, the <source> element enables you to supply alternative video, audio, and image files that the browser may select from.
Example
Considering the following example, where we are using HTML <source> tag with the type attribute.
<!DOCTYPE html> <html> <body> <audio controls> <source src="https://gaana.com/song/praise-the-lord-da-shine" type="audio/mpeg"> </audio> </body> </html>
When the script gets executed, it will generate an output consisting of audio uploaded on the webpage mentioned with type=” audio/mpeg”.
- Related Articles
- How do we set the text direction for the content in an element in HTML?
- How do we set text font in HTML?
- How do we display the thickness of the border of an element in HTML?
- How do we set the alignment according to surrounding elements in HTML?
- How do we set the input type for an Android EditText programatically?
- How do we add the maximum number of characters allowed in an element in HTML?
- How do we set the visible number of lines in a text area in HTML?
- How to set the name of the element in HTML?
- Use of the DFN element type in HTML
- How do we set the range that is considered to be of low value in HTML?
- How do we set the input type for an Android EditText programmatically using Kotlin?
- How do we set what value is the optimal value for the gauge in HTML?
- Set the width of the element in HTML
- How do we do variable formatting using the tag in HTML?
- How do we set an image to be shown while the video is downloading in HTML?
