HTML Textarea:คำแนะนำทีละขั้นตอน

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

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

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

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

แท็กพื้นที่ข้อความ HTML

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

ไวยากรณ์สำหรับ <textarea> แท็กเป็นดังนี้:

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

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

เราได้ระบุแอตทริบิวต์สองรายการในตัวอย่างของเรา:

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

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

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

เราสามารถใช้รหัสต่อไปนี้เพื่อสร้างแบบฟอร์มคำติชม:

<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> แท็กเพื่อสร้างแบบฟอร์มคำติชม เราได้ระบุคุณลักษณะสี่ประการซึ่งมีดังนี้:

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

<textarea> แท็กได้รับการสนับสนุนโดยเบราว์เซอร์หลักทั้งหมด

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

ตัวอย่าง HTML Textarea

มาดูตัวอย่างขั้นสูงอีกสองตัวอย่างเพื่อแสดงให้เห็นว่าเราจะใช้ <textarea> . ได้อย่างไร tag เพื่อสร้างพื้นที่ข้อความ

ความยาวขั้นต่ำและสูงสุด

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

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

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

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

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

แบบฟอร์มไม่มีการเปลี่ยนแปลงที่มองเห็นได้ แต่ถ้าเราพยายามส่งแบบฟอร์ม เนื้อหาของแบบฟอร์มจะถือว่าไม่ถูกต้องหากผู้ใช้เขียนมากกว่า 1,000 อักขระ

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

ข้อความตัวแทน

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

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

นี่คือตัวอย่าง <textarea> ซึ่งมีข้อความตัวยึด Your feedback goes here. :

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

รหัสของเราส่งคืน:

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

แอตทริบิวต์ HTML Textarea

<textarea> tag ยอมรับแอตทริบิวต์เฉพาะของแท็กจำนวนหนึ่ง นอกจากนี้ <textarea> แท็กรองรับแอตทริบิวต์สากลทั้งหมดใน HTML

นี่คือแอตทริบิวต์เฉพาะแท็กที่สนับสนุนโดย <textarea> แท็ก:

บทสรุป

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

บทช่วยสอนนี้กล่าวถึงวิธีการใช้ <textarea> . โดยอ้างอิงจากตัวอย่าง แท็กเพื่อสร้างพื้นที่ข้อความ บทแนะนำนี้ยังให้ตารางอ้างอิงพร้อมแอตทริบิวต์เฉพาะแท็กที่นำเสนอโดย <textarea> แท็ก ตอนนี้คุณพร้อมที่จะเริ่มใช้ <textarea> แท็กอย่างผู้เชี่ยวชาญ HTML!