HTML5 การใช้งาน textarea Tag

น HTML5, <textarea> เป็นแท็กที่ใช้สร้างฟิลด์ที่ผู้ใช้งานสามารถพิมพ์ข้อความได้หลายบรรทัด เช่น ในแบบฟอร์มสำหรับกรอกข้อมูล ประโยชน์ของ <textarea> คือการรับข้อมูลที่เป็นข้อความยาว ซึ่งต่างจาก <input> ที่ใช้รับข้อมูลเพียงบรรทัดเดียว

การใช้งาน <textarea> เบื้องต้น

<form>
  <label for="message">ข้อความของคุณ:</label>
  <textarea id="message" name="message" rows="4" cols="50">
  </textarea>
</form>

• rows กำหนดจำนวนแถวในกล่องข้อความ
• cols กำหนดจำนวนคอลัมน์ (ความกว้างของกล่องข้อความ)

คุณสมบัติที่สามารถใช้ได้ของ <textarea>

placeholder: ใช้เพื่อแสดงข้อความตัวอย่างในฟิลด์ก่อนที่ผู้ใช้งานจะพิมพ์

<textarea name="comments" placeholder="เขียนความคิดเห็นของคุณที่นี่..."></textarea>

maxlength: จำกัดจำนวนตัวอักษรที่ผู้ใช้งานสามารถพิมพ์ลงในฟิลด์ได้

<textarea name="description" maxlength="200" placeholder="กรุณาใส่ไม่เกิน 200 ตัวอักษร"></textarea>

readonly: กำหนดให้ฟิลด์เป็นแบบอ่านอย่างเดียว ไม่สามารถแก้ไขได้

<textarea name="note" readonly>ข้อความนี้ไม่สามารถแก้ไขได้</textarea>

disabled: ปิดการใช้งานฟิลด์ ทำให้ไม่สามารถพิมพ์หรือคลิกได้

<textarea name="info" disabled>ฟิลด์นี้ถูกปิดใช้งาน</textarea>

wrap: กำหนดลักษณะการตัดคำในฟิลด์

• soft: ตัดคำเมื่อถึงขอบ แต่ไม่ส่งผลต่อข้อมูลที่ส่งไปในฟอร์ม
• hard: ตัดคำเมื่อถึงขอบและส่งข้อมูลที่ตัดคำไปด้วย

<textarea name="content" wrap="soft"></textarea>

การตั้งค่าเริ่มต้น: สามารถเพิ่มข้อความเริ่มต้นลงใน <textarea> ได้โดยใส่ระหว่างแท็กเปิดและปิด

<textarea name="description">ข้อความเริ่มต้นที่ต้องการแสดง</textarea>

การปรับแต่งเพิ่มเติมด้วย CSS

เราสามารถปรับแต่งการแสดงผลของ <textarea> ได้โดยใช้ CSS เช่น กำหนดความกว้าง, ความสูง, สีพื้นหลัง และอื่น ๆ

<style>
  textarea {
    width: 100%;
    height: 150px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 10px;
  }
</style>

<textarea placeholder="กรุณากรอกข้อความของคุณ..."></textarea>

สรุป

<textarea> ใน HTML5 เป็นเครื่องมือที่ยืดหยุ่นมาก สามารถใช้ในแบบฟอร์มเพื่อรับข้อความจากผู้ใช้ได้หลากหลายรูปแบบ ไม่ว่าจะเป็นการใช้ในแบบฟอร์มแสดงความคิดเห็น หรือการใช้ร่วมกับ JavaScript เพื่อการโต้ตอบกับผู้ใช้