בניית טפסים בתוך דפי הטמל

by mohamad ayoub

Artwork: איוב מוחמד

Joined Jun 2016
Published Books 1

הספר מסביר על בניית טפסם בתוך דפי אינטרנט על ידי שימוש בתגיות הטמל

2

למה צריכים טפסים ?

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

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

דוגמא לטופס יכולה להיות טופס רישום בו המשתמש מזין את הפרטים שלו או אפילו טופס חיפוש שבו יש רק תיבת טקסט אחת ולחצן חיפוש.

3

לדוגמא:

הטופס הבא מיועד לקליטת פרטי לקוח והכתובת שלו

4

צפו בסרטון הבא המסביר על בניית טופס במסמך HTML.

6

النماذج و المدخلات في الـ HTML

تستخدم النماذج في لغة الـ HTML لعمل أنواع مختلفة من الاختيارات لمدخلات المستخدم.

النماذج

النموذج المساحة التي تحتوي على عنصر ” form “، عنصر النموذج هو العنصر الذي يسمح للمستخدم إدخال معلومات مثل ” حقل النص text fields، مساحة الكتابة textarea fields، القوائم المنسدلة drop-down menus، أزرار الراديو radio buttons، مربعات الاختيار checkboxes، و غيرها من أشكال النماذج المختلفة.
يتم تحديد النموذج من خلال الوسم <form>.

7

المدخلات

الغالبية العظمى تستخدم الوسم <input>، نوع المدخلات يتحدد من خلال السمة type، فيما يلي شرح لأنواع المدخلات الأكثر شيوعاً.

حقل النص

يتم استخدام حقل النص عندما تريد أن تجعل المستخدم يدخل حروف أو أرقام.

<form>
الاسم الأول:
<input type=”text” name=”firstname”>
<br>
الاسم الأخير:
<input type=”text” name=”lastname”>
</form>

و تظهر من خلال المتصفح كما بالشكل التالي:

الاسـم الأول:
الاسم الأخير:

لاحظ أن النموذج نفسه غير مرئي، كما أنه إذا لم تحدد عرض الحقل فإن المتصفح سوف يعرض حقل النص يتسع لـ 20 حرف.

8

أزرار الراديو

تستخدم أزرار الراديو Radio Buttons، عندما تريد من المستخدم أن يقوم بتحديد خيار وحيد من ضمن عدة خيارات محدد.

و تظهر من خلال المتصفح كما بالشكل التالي:

ذكر
أنثى

لاحظ أنه مع أزرار الراديو يجب تحديد إختيار وحيد فقط.

9

مربعات الاختيار

تستخدم مربعات الاختيار Checkboxes، عندما تريد من المستخدم أن يقوم بتحديد اختيار أو أكثر من ضمن الاختيارات المحددة.

<form>
<input type=”checkbox” name=”bike”> أمتلك دراجة
<br>
<input type=”checkbox” name=”car”> أمتلك سيارة
</form>

و تظهر من خلال المتصفح كما بالشكل التالي:

أمتلك دراجة
أمتلك سيارة

10

عمل سمة النموذج و زر الإرسال.

عند قيام المستخدم بالضغط على زر الإرسال، فإن محتويات النموذج سوف يتم إرسالها إلى ملف أخر.
عمل سمة النموذج تحدد أسم الملف الذي ترسل إليه محتويات النموذج، الملف المحدد في سمة النموذج عادة ما يفعل شيء ما أثناء استلام محتويات المدخلات.

<form name=”input” action=”tiba.html” method=”get”>
أسم المستخدم:
<input type=”text” name=”user”>
<input type=”submit” value=”إرسال”>
</form>

و يظهر من خلال المتصفح كما بالشكل التالي:

أسم المستخدم:

إذا قمت بكتابة بعض الكلمات أو الحروف في النموذج السابق، ثم قمت بالضغط على زر الإرسال، سوف يتم إرسال مدخلاتك غلى صفحة تسمى “tiba.html”. و هي الصفحة التي تقوم بعرض مدخلاتك المستلمة.

11

Form Tags

Tag	Description
<form>	Defines a form for user input
<input>	Defines an input field
<textarea>	Defines a text-area (a multi-line text input control)
<label>	Defines a label to a control
<fieldset>	Defines a fieldset
<legend>	Defines a caption for a fieldset
<select>	Defines a selectable list (a drop-down box)
<optgroup>	Defines an option group
<option>	Defines an option in the drop-down box
<button>	Defines a push button
<isindex>	Deprecated. Use <input> instead

12

להלן כמה דוגמאות:

דוגמא 1: טופס שמכיל 3 שדות, שני שדות לקליטת טקסט.

דוגמא 2: טופס שמכיל רשימה נפתחת.

דוגמא 3: טופס המכיל שדה קלט עם יותר משורה אחת.

13

עיין ברשימת שגיאות נפוצות ונסה להימנע מהן

14

תרגילים:

תרגיל 1: הוסף רשימה נפתחת עם השם cars לטופס. כלול את האפשרויות הבאות: “וולוו”, “פורד”, “פיאט”, ו “אאודי”.

תרגיל 2: הוסף לטופס שדה בשם note לקליטת טקסט המכיל יותר משורה אחת.

15

צפו בסרטון הבא על אימות נתונים ב- HTML5

16

מטלה להגשה

בנו טופס שמטרתו לקלוט את פרטי המשתתפים בטיול הבית הספרי. כל תלמידי ירשום: שם פרטי (חובה), שם משפחה (חובה), תאריך לידה, מידת חולצה (small, medium, large), מספר מלווים (0 עד 2), מעוניין בארוחה משותפת (כן/לא), תאריך מועדף (01.07 או 14.07 או 23.07 – ניתן לבחור יותר מאחד)

17