如何在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+ 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.