HTML - value 属性_HTML 菜鸟教程

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>标签用于定义数据列表中的自动完成项 tag, or the items of a drop-down list, defined by the
<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="QikepuCom">
			<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”标签的值属性。

当我们运行下面的代码时，输出窗口将显示值为 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>

支持的浏览器

浏览器
是否支持	62.0	13.0	22.0	No	49.0

<< HTML - usemap 属性 HTML - width 属性 >>