HTML <button> value Attribute

แอตทริบิวต์ value ขององค์ประกอบ <button> ใช้ตั้งค่าค่าเริ่มต้นของปุ่ม สามารถตั้งค่าใน <form> ได้ ที่นี่เราจะแสดงตัวอย่างโดยไม่ใช้ form

Syntax ดังนี้:

<button value="value">

ด้านบน value คือค่าเริ่มต้น

มาดูตัวอย่างการใช้ value attribute ใน <button>:

ตัวอย่าง

<!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>

ผลลัพธ์เริ่มต้น:

ผลลัพธ์เมื่อคลิก "Get Tutorials":

ผลลัพธ์เมื่อคลิก "Get InterviewQA":

ในตัวอย่างข้างต้น เราสร้าง JavaScript functions เพื่อรับค่าในตัวแปร หนึ่งในนั้นคือ demo1():

function demo1() {
  var val1 = document.getElementById("button1").value;
  document.getElementById("myid").innerHTML = val1;
}

ผลลัพธ์ของด้านบนแสดงเมื่อคลิกปุ่ม onclick property ตั้งให้เรียก demo1():

<button id="button1" value="Learning" onclick="demo1()">Get Tutorials</button>