HTML Textarea: คู่มือขั้นตอนสำหรับผู้เริ่มต้น

แท็ก HTML textarea ใช้สร้างฟิลด์ป้อนข้อความหลายบรรทัดในฟอร์ม ถูกกำหนดด้วยแท็ก <textarea> และสามารถจัดเก็บตัวอักษรได้ไม่จำกัดจำนวน

เมื่อคุณสร้างฟอร์มใน HTML คุณอาจตัดสินใจว่าต้องการรับสตริงข้อความยาว ตัวอย่างเช่น หากคุณสร้างฟอร์มติดต่อลูกค้าสำหรับเว็บไซต์ร้านค้าปลีก คุณอาจต้องการสร้าง element ฟอร์มที่รับคำอธิบายรายละเอียดของปัญหาที่ลูกค้ากำลังเผชิญ

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

บทช่วยสอนนี้จะอภิปราย พร้อมตัวอย่างบางส่วน วิธีใช้แท็ก HTML <textarea> ในโค้ดของคุณ จนจบบทช่วยสอนนี้ คุณจะมีความรู้ทั้งหมดที่ต้องการเพื่อใช้แท็ก <textarea> อย่างมืออาชีพ!

HTML Textarea Tag

แท็ก <textarea> ใช้กำหนดฟิลด์ควบคุมป้อนข้อความหลายบรรทัดในฟอร์ม แท็ก <textarea> สามารถจัดเก็บตัวอักษรได้ไม่จำกัดจำนวน

Syntax สำหรับแท็ก <textarea> มีดังนี้:

<textarea rows="10" cols="10"> Placeholder contents </textarea>

มาวิเคราะห์โค้ดของเรา แท็ก <textarea> ใช้กำหนดกล่อง text area ในฟอร์มเว็บของเรา ไม่เหมือนแท็ก <input> แท็ก <textarea> ต้องมีทั้งแท็กเปิด (<textarea>) และแท็กปิด (</textarea>) เนื่องจากข้อความเริ่มต้นที่ text area จะแสดงอยู่ระหว่างสองแท็กนี้

เรายังระบุ attribute 2 ตัวในตัวอย่างของเรา:

81% of participants stated they felt more confident about their tech job prospects after attending a bootcamp. Get matched to a bootcamp today.

The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.

• rows สั่งเบราว์เซอร์ว่า text area ควรมีกี่แถวโดยค่าเริ่มต้น กล่าวคือ attribute rows ระบุความสูงของ textarea
• cols คือจำนวนคอลัมน์ที่ text area ควรมีโดยค่าเริ่มต้น กล่าวคือ attribute cols ระบุความกว้างของ textarea

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

เราสามารถใช้โค้ดต่อไปนี้สร้างฟอร์มความคิดเห็น:

<form> <label for="feedback">What feedback do you have for us?</label><br /><br /> <textarea rows="5" cols="30" id="feedback" name="feedback"> Your feedback goes here. </textarea> </form>

โค้ดของเราคืนค่า:

มาวิเคราะห์โค้ดของเรา ก่อนอื่น เราประกาศแท็ก <form> ซึ่งใช้กำหนดฟอร์มเว็บของเรา เราใช้แท็ก <label> เพื่อเพิ่มป้ายชื่อในหน้าถามผู้ใช้ What feedback do you have for us?

จากนั้น เราใช้แท็ก <textarea> สร้างฟอร์มความคิดเห็น เราระบุ 4 attributes ซึ่งมีดังนี้:

• rows ตั้งเป็น 5 และจัดเก็บจำนวนแถวที่ฟิลด์ควรมี
• cols ตั้งเป็น 30 และจัดเก็บจำนวนคอลัมน์ที่ฟิลด์ควรมี
• id เป็น unique identifier ที่กำหนดให้ฟอร์ม ซึ่งจะใช้เมื่อเราส่งฟอร์ม
• name ใช้ระบุฟอร์มเช่นกัน และจำเป็นหากเราต้องการส่งฟอร์มไปยังเว็บเซิร์ฟเวอร์

แท็ก <textarea> ได้รับการรองรับจากเบราว์เซอร์หลักทั้งหมด

ตัวอย่างข้างต้นเป็นการนำไปใช้พื้นฐานของแท็ก <textarea> แต่เราสามารถทำให้ฟอร์มของเราขั้นสูงขึ้นได้

HTML Textarea Examples

มาเดินผ่านตัวอย่างขั้นสูงอีก 2 ตัวอย่างเพื่อแสดงวิธีใช้แท็ก <textarea> สร้าง text areas

Minimum and Maximum Lengths

กลับไปที่ตัวอย่างร้านเสื้อผ้า สมมติเราต้องการจำกัดจำนวนตัวอักษรที่ผู้ใช้ส่งให้ไม่เกิน 1000 เพื่อให้ผู้ใช้เขียนกระชับ และตั้งค่าขั้นต่ำ 10 ตัวอักษร เพื่อให้แน่ใจว่าผู้ใช้เขียนบางอย่างในฟอร์ม

นี่คือที่มาของ attributes minlength และ maxlength minlength ใช้ระบุจำนวนตัวอักษรขั้นต่ำที่ผู้ใช้ต้องเขียน และ maxlength ใช้ระบุจำนวนตัวอักษรสูงสุดที่ผู้ใช้สามารถเขียนในฟอร์มได้

นี่คือตัวอย่างฟอร์มเว็บจากก่อนหน้านี้ที่มี attributes minlength และ maxlength:

<form> <textarea rows="5" cols="30" id="feedback" name="feedback" minlength="10" maxlength="1000"> Your feedback goes here. </textarea> </form>

ฟอร์มของเราคืนค่า:

ไม่มีการเปลี่ยนแปลงที่มองเห็นได้ในฟอร์ม แต่หากเราลองส่งฟอร์ม เนื้อหาของฟอร์มจะถือว่า invalid หากผู้ใช้เขียนเกิน 1000 ตัวอักษร

สำคัญคือ แม้ผู้ใช้เขียนน้อยกว่า 10 ตัวอักษรในฟอร์มของเรา textarea ยังถือว่า valid หากเราต้องการบังคับขีดจำกัดขั้นต่ำ เราต้องระบุ attribute required

Placeholder Text

ในฟอร์มเว็บข้างต้น เราระบุข้อความเริ่มต้นภายในฟอร์ม ข้อความนี้ระบุว่า Your feedback goes here. แม้ข้อมูลนี้มีประโยชน์ ผู้ใช้ต้องลบข้อความเริ่มต้นด้วยตนเองหากไม่ต้องการให้มันอยู่ในคำตอบของฟอร์ม

หากคุณต้องการระบุค่า placeholder คุณสามารถใช้ attribute placeholder Attribute นี้ระบุค่า placeholder ที่แสดงเมื่อฟอร์มว่าง ngay เมื่อผู้ใช้เริ่มพิมพ์ในกล่อง placeholder จะหายไป

นี่คือตัวอย่าง <textarea> ที่มี placeholder text Your feedback goes here.:

<textarea placeholder="Your feedback goes here." rows="5" cols="30"> </textarea>

โค้ดของเราคืนค่า:

ตามที่เห็น ข้อความ Your feedback goes here. ปรากฏในกล่องข้อความ อย่างไรก็ตาม เมื่อผู้ใช้เริ่มพิมพ์ ข้อความนี้จะหายไป เรารู้ว่าข้อความนี้เป็น placeholder เพราะมันเป็นสีเทาอ่อน ในขณะที่ข้อความเริ่มต้น เช่น ที่เราระบุในตัวอย่างแรกในบทความนี้ จะปรากฏเป็นสีดำทั้งหมด (เว้นแต่จะระบุอื่น)

HTML Textarea Attributes

แท็ก <textarea> ยอมรับ attribute เฉพาะ tag จำนวนมาก นอกจากนี้ แท็ก <textarea> รองรับ global attributes ทั้งหมดใน HTML

นี่คือ tag-specific attributes ที่รองรับโดยแท็ก <textarea>:

สรุป

แท็ก HTML <textarea> ใช้สร้าง element ป้อนข้อความหลายบรรทัด สามารถใช้งานได้หากคุณต้องการเก็บสตริงข้อมูลยาวจากผู้ใช้

บทช่วยสอนนี้อภิปราย พร้อมอ้างอิงตัวอย่าง วิธีใช้แท็ก <textarea> สร้าง text areas บทช่วยสอนนี้ยังให้ตารางอ้างอิงพร้อม tag-specific attributes ที่เสนอโดยแท็ก <textarea> ตอนนี้คุณพร้อมที่จะเริ่มใช้แท็ก <textarea> อย่างมืออาชีพ HTML แล้ว!