HTML - value 屬性

HTML value 屬性定義了在頁面載入時在元素中顯示的預設值。

對於各種表單元素，例如輸入欄位、複選框、單選按鈕和選擇選項，初始值或預設值使用 HTML value 屬性指定。頁面載入時，它指定預填充的文字或資訊。

為了便於提交準確的資料，此功能對於讓使用者訪問表單欄位中的預定義資料至關重要。例如，它可以用於在文字輸入中指定預設文字或在下拉選單中預選一個選項，從而簡化使用者互動和資料輸入過程。

語法

<element value=" ">

應用於

以下列出的元素允許使用 HTML value 屬性。

元素	描述
<button>	HTML <button> 標籤用於建立按鈕。
<data>	HTML <data> 標籤用於將給定的內容與機器可讀的翻譯連結起來。
<input>	HTML <input> 標籤用於指定輸入欄位。
<li>	HTML <li> 標籤用於表示列表中的一個專案。
<meter>	HTML <meter> 標籤用於在給定範圍內呈現資料。
<option>	HTML <option> 標籤用於定義自動完成的資料列表項（由<datalist>標籤指定）或下拉列表項（由<select>標籤定義）。標籤，或下拉列表的專案，由
<progress>	HTML <progress> 標籤用於顯示任務完成進度的指示器，通常顯示為進度條。這是 HTML5 中包含的新標籤。
<param>	HTML <param> 標籤用於使用 <object> 標籤向嵌入物件傳遞引數。

HTML value 屬性示例

下面的示例將說明 HTML value 屬性，以及我們應該在哪裡以及如何使用此屬性！

在 "input" 標籤中使用 value 屬性

執行以下程式碼後，輸出視窗將顯示填充資料的輸入欄位以及網頁上的一個點選按鈕。

<!DOCTYPE html>
<html>
<body>
   <h1>The input value attribute</h1>
   <form action="" method="post">
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname" value="tutorials">
      <br>
      <br>
      <label for="lname">Last name:</label>
      <input type="text" id="lname" name="lname" value="point">
      <br>
      <br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

在 "li" 標籤中使用 value 屬性。

執行以下程式碼後，它將生成一個輸出，其中包含顯示在網頁上的列表項。

<!DOCTYPE html>
<html>
<body>
   <h1>The li value attribute</h1>
   <ol>
      <li value="01">Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
      <li>Water</li>
      <li>Juice</li>
      <li>Beer</li>
   </ol>
</body>
</html>

在 "option" 標籤中使用 value 屬性。

執行以下程式碼後，輸出視窗將顯示下拉選單以及網頁上的一個點選按鈕。

<!DOCTYPE html>
<html>
<body>
   <h1>The option value attribute</h1>
   <form action=" " method="post">
      <label for="fruits">Choose a fruit:</label>
      <select id="fruit" name="fruit">
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="pineapple">pineapple</option>
      <option value="pomegranate">Pomegranate</option>
      </select>
      <input type="submit" value="Submit">
   </form>
   <p>Choose a fruit, and click the "Submit" button.</p>
</body>
</html>

在 "progress" 標籤中使用 value 屬性。

執行以下程式碼後，輸出視窗將顯示進度條，顯示已完成的任務量。

<!DOCTYPE html>
<html>
<body>
   <h1> value attribute in progress element</h1>
   <label for="file">Downloading progress:</label>
   <progress id="file" value="40" max="100"> 40% </progress>
</body>
</html>

在 "button" 標籤中使用 value 屬性。

執行以下程式碼後，輸出視窗將顯示三個按鈕。

<!DOCTYPE html>
<html lang="en">

<head>
      <title>Button tag with value attribute</title>
</head>

<body>
      <h1>Medal Types</h1>
      <button value='1'>Gold</button>
      <button value='2'>Silver</button>
      <button value='3'>Bronze</button>
</body>

</html>

在 "param" 標籤中使用 value 屬性。

執行以下程式碼後，輸出視窗將自動播放影片。

<!DOCTYPE html>
<html>

<head>
      <title>Param tag with value attribute</title>
</head>

<body>
      <object data=
"https://cdn.pixabay.com/vimeo/497754241/laptop-61037.mp4?width=640&=d25d7f4b8afa862b3252bdaeaf157934ceb1bb72">
         <param name="autoplay" value="true">
      </object>
</body>

</html>

在 "meter" 標籤中使用 value 屬性。

執行以下程式碼後，輸出視窗將顯示油量表，值為 60。

<!DOCTYPE html>
<html>

<head>
      <title>Meter tag with value attribute</title>
</head>

<body>
      <label>Fuel level:</label>
      <meter value="60" min="0" max="100" 
             low="35" high="70" optimum="80">
      </meter>
</body>

</html>

支援的瀏覽器

屬性
value	62.0	13.0	22.0	否	49.0

html_attributes_reference.htm

列印頁面