טפסים | שפת HTML

[מוטי אורן]

מדריך הוספת טפסים לדף HTML

--
הנושא של המדריך הזה יעסוק בטפסים. הנושא הזה אמור להיות די ארוך אבל בעזרת השם נסתדר עם זה...

אז מהם טפסים?

טופס הוא רכיב בדף שמיועד לשליחת מידע מצד הלקוח לצד השרת (כמובן שאת השליחה לא מבצעים ב – HTML, אבל לא כרגע).

אז התגית שמגדירה טופס היא - <form>.

לתגית form ישנם שני תכונות חשובות שאני יזכיר כאן:

1: "action="page.html -- קובע להיכן המשתמש יועבר בעת שליחת הטופס (ניתן ליצור דף נוסף באותה תיקייה של דף ה – HTML הראשון, ופשוט לכתוב את השם הקובץ שאליו עובר המשתמש ב – action, אבל עדיף לכתוב את זה עם /. (נקודה סלאש) לפני שם הקובץ).

: "method="GET"/"POST -- שקובע האם הטופס יישלח ב – GET Request או ב – POST Request (לא נכנס לזה עכשיו).

אז התגית הראשונה שנלמד שנמצאת בתוך הטופס היא התגית <input>, שמציינת רכיב של קלט כלשהו מהמשתמש, ובעזרת השם נראה איך קובעים את הסוג של הקלט באמצעות תכונת type.

אם נרשום את התגית input ללא תכונת type, אז הערך ה - Default (ברירת מחדל) של ה – type יהיה text.
נעשה סקירה זריזה של הערכים האפשריים בתכונת ה – type:

1: "type="text -- הקלט מהמשתמש יהיה של תווי טקסט.
2: "type="number -- הקלט יהיה של מספרים בלבד.
3: "type="date -- קלט של תאריך.
4: "type="email -- קלט של אימייל.
5: "type="button -- לחצן.
6: "type="reset -- איפוס הטופס.
7: "type="submit -- לחצן לשליחת הטופס.
8: "type="radio -- לחצן בחירה מתוך מספר אפשרויות.
9: "type="checkbox -- לחצן סימון.

אם נרצה ש input ספציפי יהיה נדרש ולא יוכלו לשלוח את הטופס ללא מילוי שלו, נוסיף את התכונה required לאותה תגית input:

<input type="password" required>

קיימת תגית עבור input שנקראת label. התפקיד שלה הוא לציין ליד תגית ה – input את הפרטים שנדרשים. בכדי לקשר את ה – label ל – input שאליו הוא מיועד, נצטרך ללמוד על תכונה חדשה שתשמש אותנו גם ב – CSS, שנקראת ID. שזה כמו זיהוי לתגית ה – input (וגם לכל תגית שהיא). נכתוב אותה כך:

<input type="text" id="username">

כעת נקשר את תגית ה – label ל – input על ידי שנכתוב כך:

<label for="username">insert your name</label>
<input type="text" id="username">

נוסיף עוד תכונה שחשובה בתגיות ה – input ונקראת name. התפקיד שלה הוא לתת שם לחבילת הקלט שעוברת לשרת (זה יותר מורכב לא נכנס לזה, רק צריך לדעת את זה).

אם נרצה לתת למשתמש להכניס קלט גדול יותר של טקסט, נשתמש בתגית textarea, שמייצרת שדה גדול יותר של קלט.

<textarea></textarea>

כמעט שכחתי, יש עוד תגית של קלט שנקראת select. התפקיד שלה זה תיבת בחירה שנפתחת כלפי מטה, וניתן לבחור ממנה את אחת האפשרויות שנכתוב בתוך select בתגית option.

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

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

[יהושע זופניק]

פוסט זה נמחק!

[מוטי אורן]

@יהושע-זופניק אמר בטפסים | שפת HTML:

@מוטי-אורן אם SELECT זה בחירה מתוך אופציות. אז מה זה

@מוטי-אורן אמר בטפסים | שפת HTML:

8: "type="radio -- לחצן בחירה מתוך מספר אפשרויות.

?
ותודה על המדריך!

select זה בחירה בתיבה נפתחת כלפי מטה (שאפשר גם לעשות בחירה מרובה על ידי הוספת התכונה multiple) ו - radio זה בחירה על ידי סימון של אחת מהאפשרויות.