How to add the value of the element in HTML?

HTML Web Development Front End Technology

This article will teach you how to add the value of the element in HTML. We have a basic idea about the value attribute in HTML and the situations where we use the value attribute Let’s look forward to a better understanding of the HTML value attribute.

In HTML, the value property is used to describe the value of the element that it is used with. For various HTML components, it has a varied meaning. Usage− It can be put to use with the <input>, <button>, <meter>, <li>, <option>, <progress>, and <param>, <output> elements. <input> − When the value attribute is present, it indicates what the input element's default value is.

For various types of input, it has a distinct meaning:

It specifies the text on the button when it is present in "button," "reset," and "submit."
It specifies the initial value of the input field when it is present in the "text," "password," and "hidden" values.
When "checkbox," "radio," and "picture" are present, it indicates the value connected to the input.

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 creating two <button> tag for subjects where one acts as HTML subject button and another one acts as JAVA subject button.

<!DOCTYPE html>
<html>
<body>
   <form action="#" method="get">
      Choose The Subject:
      <button name="subject" type="submit" value="HTML">HTML</button>
      <button name="subject" type="submit" value="java">JAVA</button>
   </form>
</body>
</html>

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

Considering the following example, where we are using HTML form with <input> tag with default values

<!DOCTYPE html>
<html>
<body>
   <form action="#">
      <label for="firstname">FIRST NAME:</label>
      <input type="text" id="firstname" name="firstname" value="TUTORIALS"><br><br>
      <label for="lastname">LAST NAME:</label>
      <input type="text" id="lastname" name="lastname" value="POINT"><br><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 displaying default values for the first name and last name using the value attribute along with a submit button on the webpage.

<li> HTML element

A list item is defined using the <li> tag. Ordered lists, unordered lists, and menu lists all use the <li> tag. The list items are typically displayed with bullet points in <ul> and <menu>. The list items in <ol> are typically represented by numbers or letters.

Example

Consider the following example we are using the value attribute in the ordered list.

<!DOCTYPE html>
<html>
<body>
   <ol>
      <li value="100">THAR</li>
      <li>BMW</li>
      <li>DUCATI</li>
      <li>BENZ</li>
      <li>TERRANO</li>
      <li>CIAZ</li>
   </ol>
</body>
</html>

On running the above script, the output window will pop up, displaying the ordered list of different cars used in the script, starting with number 100 as we mentioned value="100" on the webpage.

Using Script

In the following example we are running a script to change the value of textfield.

Example

<!DOCTYPE html>
<html>
<body>
   Name: <input type="text" id="mytutorial" value="THOR">
   <p>Click To Change Value </p>
   <button onclick="mytutorial1()">Click</button>
   <script>
      function mytutorial1() {
         document.getElementById("mytutorial").value = "BLACK WIDOW";
      }
   </script>
</body>
</html>

When the script gets executed, it will generate an output consisting of an input field with a value ="thor" along with a click button. When the user clicks the button, the event gets triggered and changes the input value="black widow" on the webpage.