HTML <button> value 属性
htmlweb developmentfront end technology更新于 2025/9/18 2:52:17
<button> 元素的 value 属性用于设置按钮的初始值。您可以在 <form> 中设置此属性。这里，我们将展示一个不使用表单的示例。
以下是语法 −
<button value="value">
以上，value 是初始值。
现在让我们看一个在 <button> 中实现 value 属性的示例 −
示例
<!DOCTYPE html>
<html>
<body>
<p>Click below to get details about the learning content...</p></br></br>
<button id = "button1" value = "Learning" onclick = "demo1()">Get Tutorials</button>
<button id = "button2" value = "InterviewAnswers" onclick = "demo2()">Get InterviewQA</button>
<p id = "myid"></p>
<script>
function demo1() {
var val1 = document.getElementById("button1").value;
document.getElementById("myid").innerHTML = val1;
}
function demo2() {
var val1 = document.getElementById("button2").value;
document.getElementById("myid").innerHTML = val1;
}
</script>
</body>
</html>
最初将产生以下输出 −
点击"获取教程"按钮后输出如下 −
点击"获取面试问答"按钮后输出如下点击按钮 −
在上面的例子中，我们创建了 JavaScript 函数来获取变量的值。其中一个是 demo1()
function demo1() {
var val1 = document.getElementById("button1").value;
document.getElementById("myid").innerHTML = val1;
}
点击按钮时会显示上述结果。onclick 属性设置为调用上述函数 demo1() −
<button id = "button1" value = "Learning" onclick = "demo1()"> Get Tutorials </button>
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
