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

打印页面