Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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".
172 Views
