HTML value 语法
在 HTML 中，value 属性用于设置或获取元素的当前值。它支持多种元素，包括 input、button、option、meter、progress 等。
语法：
<element value="值">说明：
对于 input 元素来说，value 属性定义了输入字段的初始值。对于不同的 type 类型，其作用有所不同。
- text、password、search 等：value 属性设置了输入框中显示的默认文本。
- radio、checkbox：value 属性定义了在表单提交时发送到服务器的值。用户是否选中该项并不会改变其 value。
- button、submit、reset：value 属性定义了按钮上显示的文本。
对于 button 元素来说，value 属性定义了在表单提交时发送到服务器的值。按钮上显示的文本是 <button> 和 </button> 标签之间的内容。
对于 option 元素来说，value 属性定义了在 select 表单提交时发送到服务器的值。如果省略 value 属性，则默认值为 option 标签之间的文本内容。
HTML value 摘要
| 适用元素 | input、button、option、meter、progress |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML value 示例
接下来，我们将通过几个简单的例子来讲解一下 HTML value 属性是如何使用的。
示例 1：value 属性用于文本框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="/submit" method="post">
<p>
<label>
用户名：
<input type="text" id="username" name="username" value="Jack">
</label>
</p>
<p>
<input type="submit" value="提交">
</p>
</form>
</body>
</html>页面效果如下图所示。
分析：
value="Jack" 表示设置文本框默认值为 “Jack”，该默认值会直接在文本框中显示出来。
示例 2：value 属性用于下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="/submit" method="post">
<p>
<label>
选择城市：
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
</label>
</p>
<p>
<button type="submit">提交</button>
</p>
</form>
</body>
</html>页面效果如下图所示。
