Menu
Coddy logo textTech

סיכום – טפסים #2

חלק מהיחידה יסודות במסלול ה-HTML של Coddy. שיעור 47 מתוך 60.

challenge icon

אתגר

קל

בואו נבנה טופס הרשמה פשוט, בדיוק כמו זה שבתמונה למטה!

הנה מה שצריך לכלול:

  1. תגית <form> שעוטפת את כל הרכיבים יחד.
  2. שדה שם משתמש עם תווית ושדה קלט טקסט. התווית צריכה לומר "Username:" ולהשתמש ב-for="username". לשדה הקלט צריכים להיות id="username", name="username", type="text" ומציין מיקום "Enter your username".
  3. שדה אימייל עם תווית ושדה קלט לאימייל. התווית צריכה לומר "Email:" ולהשתמש ב-for="email". לשדה הקלט צריכים להיות id="email", name="email", type="email" ומציין מיקום "Enter your email".
  4. שדה סיסמה עם תווית ושדה קלט לסיסמה. התווית צריכה לומר "Password:" ולהשתמש ב-for="userpassword". לשדה הקלט צריכים להיות id="userpassword", name="userpassword", type="password" ומציין מיקום "Enter your password".
  5. קבוצה של לחצני בחירה שתאפשר למשתמשים לבחור את הסוג שלהם: "Student" או "Teacher". הוסיפו פסקה או כותרת עם הכיתוב "User Type:" מעל לחצני הבחירה. לחצן הבחירה "Student" צריך לכלול id="student", name="usertype", value="student" ותווית עם הכיתוב "Student". לחצן הבחירה "Teacher" צריך לכלול id="teacher", name="usertype", value="teacher" ותווית עם הכיתוב "Teacher". זכרו: לשני לחצני הבחירה חייב להיות אותו מאפיין name ("usertype") כדי שאפשר יהיה לבחור רק אחד בכל פעם.
  6. קבוצה של תיבות סימון שתאפשר למשתמשים לבחור את תחומי העניין שלהם: "Sports", "Music" ו-"Technology". הוסיפו פסקה או כותרת עם הכיתוב "Interests:" מעל תיבות הסימון. תיבת הסימון "Sports" צריכה לכלול id="sports", name="interests", value="sports" ותווית עם הכיתוב "Sports". תיבת הסימון "Music" צריכה לכלול id="music", name="interests", value="music" ותווית עם הכיתוב "Music". תיבת הסימון "Technology" צריכה לכלול id="technology", name="interests", value="technology" ותווית עם הכיתוב "Technology". זכרו: לכל תיבות הסימון צריך להיות אותו מאפיין name ("interests") מכיוון שהן שייכות לאותה קבוצה.
  7. כפתור הרשמה וכפתור ניקוי בסוף הטופס. לכפתור ההרשמה צריך להיות type="submit" ולכפתור הניקוי צריך להיות type="reset". בכפתור ההרשמה צריך להופיע הטקסט "Sign Up" ובכפתור הניקוי צריך להופיע הטקסט “Clear”.

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

זכרו, שדות הקלט צריכים לכלול את המאפיינים החשובים הבאים: type, id, name ו-value.

נסו בעצמכם

<!DOCTYPE html>
<html>
    <body>
        <!-- כתבו כאן קוד -->
    </body>
</html>

כל השיעורים ביחידה יסודות

תרגלו בעצמכם: Web אונליין