Home > Article > Web Front-end > How do we set the type of an element in HTML?
In this article, we will learn how to set the type of an element in HTML, just like we are familiar with the type in HTML. For the
The type attribute can be used on the following elements
element | Attributes |
---|---|
type | |
type | |
type | |
type | |
type | |
type | |
type |
Let’s go through the following example to understand how to set the type of an element in HTML.
Clickable buttons in HTML are defined by the
In the example below, we use two
<!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 executes, it will generate an output with input fields for the username and lastname (set by type="text"), as well as a submit button and a reset button.
Tags specify fields into which users can enter data. The most important form element is the element. Depending on the type attribute, the element can be rendered in a number of different ways.
Consider the following example where we use an HTML form with two different input types, one for text and another for submission.
<!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 you run the above script, it will produce an output that includes an input field with a name of type="text" and an input button with a type="submit" attribute.
Look at the following example, we are running a script with the type attribute specified
In the example below, we use two
<!DOCTYPE html> <html> <body> <p id="tutorial"></p> <script type="application/javascript"> document.getElementById("tutorial").innerHTML = "Hello,Good Morning."; </script> </body> </html>
When running the above script, an output window will pop up showing the text "Hello, good morning". on the web page.
You can use the
Consider the following example where we use HTML
<!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 executes, it will generate an output containing the audio uploaded on the webpage mentioned with type="audio/mpeg".
The above is the detailed content of How do we set the type of an element in HTML?. For more information, please follow other related articles on the PHP Chinese website!