วิธีแสดงพื้นที่ข้อความ (Textarea) ใน HTML

ใช้แท็ก <textarea> เพื่อแสดงพื้นที่ข้อความ (Text Area) แท็ก <textarea> ใน HTML ใช้ภายในฟอร์มเพื่อประกาศองค์ประกอบ textarea - คอนโทรลที่อนุญาตให้ผู้ใช้ป้อนข้อความหลายบรรทัด

แอตทริบิวต์ของแท็ก <textarea>

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อแสดงพื้นที่ข้อความใน HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML textarea Tag</title>
  </head>
  <body>
    <form action="/cgi-bin/hello_get.cgi" method="get">
      <label for="description">Enter subjects:</label>
      <br />
      <textarea id="description" rows="5" cols="50" name="description"
        placeholder="Enter your subjects here..."></textarea>
      <br />
      <input type="submit" value="submit" />
    </form>
  </body>
</html>

ตัวอย่างขั้นสูง

1. Textarea พร้อมนับตัวอักษร

<textarea id="message" name="message" rows="4" cols="50" 
  maxlength="200" placeholder="Max 200 characters"></textarea>
<div><span id="charCount">0</span>/200 characters</div>

<script>
document.getElementById('message').addEventListener('input', function() {
  document.getElementById('charCount').textContent = this.value.length;
});
</script>

2. Textarea แบบ Read-only (แสดงผลอย่างเดียว)

<textarea rows="6" cols="60" readonly>
This content cannot be edited.
It's useful for displaying code snippets or terms.
</textarea>

3. การจัดสไตล์ด้วย CSS

textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical; /* อนุญาต resize แนวตั้งอย่างเดียว */
  box-sizing: border-box;
}

textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.15);
}

คำแนะนำ: cols/rows vs CSS

แอตทริบิวต์ cols และ rows เป็น จำเป็น ใน HTML แม้จะใช้ CSS กำหนดขนาดก็ตาม เพื่อให้ทำงานได้แม้ CSS ไม่โหลด ให้ใช้ CSS สำหรับขนาดจริง และ cols/rows เป็น fallback