ค่าแอตทริบิวต์ value ของ Input Text

วิธีการทำงานของตัวเมนู Input Text ใน HTML DOM

การระบุและการใช้งาน

value ตั้งค่าหรือกลับค่าของค่าแอตทริบิวต์ value ของฟิลด์ข้อความ

ค่าแอตทริบิวต์ value ของ HTML มีค่าเริ่มต้นหรือค่าที่ใส่โดยผู้ใช้ (หรือค่าที่ตั้งโดยสคริปต์)

ดูเพิ่มเติมที่

คู่มืออ้างอิง HTMLคุณสมบัติ value ของ HTML <input>

ตัวอย่าง

ตัวอย่าง 1

เปลี่ยนค่าของฟิลด์ข้อความ

document.getElementById("myText").value = "Bill Gates";

ทดลองด้วยตัวเอง

มีตัวอย่างเพิ่มเติมที่ด้านล่างของหน้า

ศัพท์

กลับค่าแอตทริบิวต์ value:

textObject.value

ตั้งค่าค่าแอตทริบิวต์ value:

textObject.value = text

ค่าของแอตทริบิวต์

ค่า คำอธิบาย
text กำหนดค่าของฟิลด์ข้อความ

รายละเอียดเทคนิค

ค่าที่กลับมา ค่าข้อความภาษาไทยสั้นๆ ที่แสดงค่าของฟิลด์ข้อความ

ตัวอย่างเพิ่มเติม

ตัวอย่าง 2

เรียกค่าของฟิลด์ข้อความ:

var x = document.getElementById("myText").value;

ทดลองด้วยตัวเอง

ตัวอย่าง 3

การตรวจสอบฟอร์ม:

var at = document.getElementById("email").value.indexOf("@");
var age = document.getElementById("age").value;
var fname = document.getElementById("fname").value;
submitOK = "true";
if (fname.length > 10) {
  alert("The name may have no more than 10 characters");
  submitOK = "false";
}
if (isNaN(age) || age < 1 || age > 100) {
  alert("The age must be a number between 1 and 100");
  submitOK = "false";
}
if (at == -1) {
  alert("Not a valid e-mail!");
  submitOK = "false";
}
if (submitOK == "false") {
  return false;
}

ทดลองด้วยตัวเอง

ตัวอย่าง 4

ลิสต์ด้านล่างในฟอร์ม:

var mylist = document.getElementById("myList");
document.getElementById("favorite").value = mylist.options[mylist.selectedIndex].text;

ทดลองด้วยตัวเอง

ตัวอย่าง 5

ลิสต์ด้านล่างอื่น:

var no = document.getElementById("no");
var option = no.options[no.selectedIndex].text;
var txt = document.getElementById("result").value;
txt = txt + option;
document.getElementById("result").value = txt;

ทดลองด้วยตัวเอง

ตัวอย่าง 6

แสดงตัวอย่างของความแตกต่างระหว่าง defaultValue และ property value:

var x = document.getElementById("myText");
var defaultVal = x.defaultValue;
var currentVal = x.value;

ทดลองด้วยตัวเอง

การสนับสนุนเบราเซอร์

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน

วิธีการทำงานของตัวเมนู Input Text ใน HTML DOM