如何在 HTML 中添加元素的值?

htmlweb developmentfront end technology更新于 2024/8/13 3:56:17

本文将教您如何在 HTML 中添加元素的值。我们对 HTML 中的 value 属性以及使用 value 属性的场景有了基本的了解。让我们期待更好地理解 HTML value 属性。

在 HTML 中，value 属性用于描述与其一起使用的元素的值。对于不同的 HTML 组件，它具有不同的含义。用法:它可以与 <input>、<button>、<meter>、<li>、<option>、<progress> 以及 <param>、<output> 元素一起使用。 <input> − 当 value 属性存在时，它指示输入元素的默认值。

对于不同类型的输入，它具有不同的含义:

当 value 属性出现在"button"、"reset"和"submit"中时，它指定按钮上的文本。
当 value 属性出现在"text"、"password"和"hidden"值中时，它指定输入字段的初始值。
当 value 属性出现在"checkbox"、"radio"和"picture"中时，它指示与输入相关的值。

HTML <button> 标签

HTML 中的可点击按钮由 <button> 标签定义。内容使用 <button> 标签发送。 <button> 标签可以包含图形和文本信息。不同浏览器使用不同的默认"按钮"类型。

示例

在下面的示例中，我们为主题创建了两个 <button> 标签，其中一个用作 HTML 主题按钮，另一个用作 JAVA 主题按钮。

<!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> 标签

<input> 标签指定用户可输入数据的字段。最重要的表单元素是 <input> 元素。根据 type 属性，<input> 元素可以以多种不同的方式呈现。

示例

考虑以下示例，其中我们使用带有默认值的 <input> 标签的 HTML 表单

<!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>

运行上述脚本时，它将生成一个输出，其中包含一个输入字段，该字段使用 value 属性显示名字和姓氏的默认值，并在网页上显示一个提交按钮。

<li> HTML 元素

列表项使用 <li> 标签定义。有序列表、无序列表和菜单列表均使用 <li> 标签。列表项通常在 <ul> 和 <menu> 中以项目符号显示。<ol> 中的列表项通常用数字或字母表示。

示例

请考虑以下示例，我们在有序列表中使用了 value 属性。

<!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>

运行上述脚本后，将弹出输出窗口，显示脚本中使用的不同汽车的有序列表，从数字 100 开始，因为我们在网页上提到了 value="100"。

使用脚本

在下面的示例中，我们运行一个脚本来更改文本字段的值。

示例

<!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>

脚本执行后，将生成一个输出，其中包含一个值为"thor"的输入字段和一个点击按钮。当用户点击按钮时，事件会被触发，并更改网页上的输入值"black widow"。