การเรียนรู้ HTML ตอนที่ 31: การใช้องค์ประกอบข้อความในรูปแบบ HTML

ในการสนทนานี้เราจะศึกษาการใช้องค์ประกอบ textarea ในรูปแบบ HTML องค์ประกอบนี้เป็นองค์ประกอบที่ใช้บ่อยที่สุดในเว็บไซต์

ฉันจะพยายามอธิบายให้ละเอียดมากที่สุดเกี่ยวกับการใช้อิลิเมนต์ textarea ต่อไปนี้พร้อมกับคุณลักษณะคือแถวและ cols โดยทั่วไปองค์ประกอบ <textarea> ... </texraea> ใช้เพื่อป้อนข้อมูลในกล่องข้อความ สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับองค์ประกอบและคุณสมบัติเหล่านี้ลองดูบทแนะนำด้านล่าง

<textarea> แท็ก

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

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Elemen Textarea pada Form HTML</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo">Masukkan teks disini....</textarea>
<br>
<input type="submit">
</form>
</body>
</html>

หลังจากทำงานในเบราว์เซอร์ผลลัพธ์จะเป็นดังนี้:

แท็กนี้รองรับคุณสมบัติหลายอย่างเช่นชื่อ, แถว, cols, ความยาวสูงสุด, ที่ต้องการและอื่น ๆ

1. แอตทริบิวต์ของแถว

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

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Rows pada Elemen Textarea</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo" rows="15">Masukkan teks disini....</textarea>
<br>
<input type="submit">
</form>
</body>
</html>

หลังจากรันโค้ดข้างต้นในเบราว์เซอร์มันจะปรากฏดังแสดงด้านล่าง:

2. คุณสมบัติ Cols

คุณลักษณะ cols ใช้เพื่อกำหนดความกว้าง(จำนวนคอลัมน์) ในองค์ประกอบ textarea เช่นเดียวกับแอตทริบิวต์แถวค่าในแอตทริบิวต์นี้อาจเป็นตัวเลขเช่น 80, 20 หรือ 20% โดยที่ยิ่งมีค่ายิ่งองค์ประกอบ textarea ก็จะกว้างขึ้น ต่อไปนี้เป็นตัวอย่างของรหัสสำหรับการเขียนและการใช้แอตทริบิวต์ cols ในแท็ก <textarea> ใน HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Cols pada Elemen Textarea</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo" cols="50">Masukkan teks disini....</textarea>
<br>
<input type="submit">
</form>
</body>
</html>

หลังจากรันโค้ดข้างต้นในเบราว์เซอร์มันจะปรากฏดังแสดงด้านล่าง:

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

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Rows dan Cols pada Elemen Textarea</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo" rows="15" cols="50">Masukkan teks disini....</textarea>
<br>
<input type="submit">
</form>
</body>
</html>

หลังจากรันโค้ดข้างต้นในเบราว์เซอร์มันจะปรากฏดังแสดงด้านล่าง:

3. แอตทริบิวต์ maxlength

คุณลักษณะนี้ยังใช้กับแท็ก TextArea ซึ่งมีฟังก์ชั่นเพื่อ จำกัด จำนวนอักขระที่ป้อนใน TextArea ตัวอย่างของรหัสเช่นนี้:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Maxlength pada Elemen Textarea</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo" rows="10" cols="30" maxlength="40">Masukkan teks disini....</textarea>
<br>
<input type="submit">
</form>
</body>
</html>

เมื่อทำงานในเบราว์เซอร์ผลลัพธ์จะเป็นดังนี้:

ในรหัสด้านบนฉันตั้งค่าความยาวสูงสุดเป็น 40 ดังนั้นคุณสามารถป้อนได้สูงสุด 40 ตัวอักษรเท่านั้นไม่เกิน

4. คุณสมบัติที่จำเป็น

ไม่เพียง แต่แอตทริบิวต์ maxlength ซึ่งเป็นแอตทริบิวต์ที่จำเป็นยังใช้ใน textarea ฟังก์ชันนี้ใช้เพื่อตั้งค่าองค์ประกอบ (ในกรณี textarea) ที่ต้องการก่อนส่ง ตัวอย่างโค้ด HTML ดังนี้:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Maxlength pada Elemen Textarea</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo" rows="10" cols="30" required></textarea>
<br>
<input type="submit">
</form>
</body>
</html>

ดูเหมือนในเบราว์เซอร์เช่นนี้:

เมื่อคุณคลิกปุ่มส่งโดยตรงคุณจะได้รับการแจ้งเตือนเช่นเดียวกับในภาพด้านบนซึ่งหมายความว่าคุณต้องกรอกข้อความก่อนก่อนคลิกที่ปุ่มส่ง

นั่นเป็นเนื้อหาเกี่ยวกับการใช้ textarea onรูปแบบ HTML, textarea ยังสามารถใช้นอกรูปแบบ HTML ได้ดังนั้นจึงไม่ได้เป็นเพียงรูปแบบ HTML อย่าลืมเยี่ยมชมบล็อกนี้ต่อไปเพื่อรับบทเรียนล่าสุดเกี่ยวกับ HTML

</ p>

อ่านเพิ่มเติม: