לימוד HTML חלק 31: שימוש באלמנטים של טקסטריה בטפסים HTML

בדיון זה נלמד את השימוש באלמנטים של טקסטורה בצורות HTML. אלמנט זה הוא האלמנט המשמש לרוב באתר אינטרנט.

אני אנסה להסביר כמה שיותר פרטיםלגבי השימוש באלמנטים הטקסטריים הבאים עם תכונותיהם, כלומר שורות ועמודים. באופן כללי, האלמנט <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. תכונה שורות

תכונת השורות משמשת לקביעת הסכוםשורה בטקסטריה. הערכים בתכונה זו הם מספרים כמו 40, 10, או עם אחוזים כמו 20%. כאשר ככל שהערך גדול יותר כך אלמנט הטקסטריה גבוה יותר. להלן דוגמה לכתיבה ושימוש במאפיין השורות בתג <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 משמשת לקביעת רוחב(מספר העמודות) באלמנט הטקסטרה. בדומה לתכונה 'שורות', הערכים בתכונה זו יכולים להיות מספרים כמו 80, 20 או 20%. כאשר הערך גדול יותר כך רכיב הטקסטרה רחב יותר. להלן דוגמה לקוד לכתיבה ושימוש בתכונה 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>

לאחר ביצוע הקוד לעיל בדפדפן הוא יופיע כמוצג להלן:

בשתי הדוגמאות נעשה שימוש בתכונות השורות והקוראיםלעיל הראו הבדלים בשימוש בתכונות השורות והסמלים באלמנט הטקסטריה. ליתר דיוק, תכונת השורות מיועדת להגדרת גובה ואילו התכונה cols מיועדת להגדרת רוחב באלמנט <textarea>. להלן דוגמה לכתיבה ושימוש בתכונות השורות וה 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. תכונת אורך המקסימום

תכונה זו חלה גם על התג 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. יש צורך בתכונות

לא רק התכונה אורך מקסימום, התכונה הנדרשתמשמש גם בטקסטריה. פונקציית תכונות זו משמשת להגדרת האלמנט (במקרה זה טקסטריה) שיידרש לפני ההגשה. דוגמה לקוד 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>

זה נראה בדפדפן כזה:

כשאתה לוחץ ישירות על כפתור ההגשה, תקבל התראה כמו בתמונה למעלה, מה שאומר שאתה צריך למלא תחילה את טקסט הטקסט לפני שתלחץ על כפתור ההגשה.

זה החומר הנוגע לשימוש בטקסטריה עלניתן להשתמש בצורת HTML, טקסטריה גם מחוץ לטופס HTML, כך שזה לא רק עבור טפסים ב- HTML. אל תשכח להמשיך לבקר בבלוג זה כדי לקבל את ההדרכות האחרונות בנושא HTML.

</ p>

קרא עוד: