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

本文将教你如何在HTML中添加元素的值。我们已经对HTML中的value属性以及使用value属性的情况有了基本的了解。让我们期待对HTML value属性有更深入的理解。

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

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

  • 在“button”、“reset”和“submit”中存在时，它指定按钮上的文本。

  • 在“text”、“password”和“hidden”值中存在时，它指定输入字段的初始值。

  • 当存在“checkbox”、“radio”和“picture”时，它表示与输入关联的值。

HTML <button>标签

<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"。

更新于：2022年12月16日

2K+ 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告