How do we set the type of element in HTML?

HTML Web Development Front End Technology

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”.