Home-theater-designers
איסוף נתונים ממשתמש באתר יכול להתבצע בכמה דרכים שונות. טפסים באתרים יכולים להיות בעלי פונקציה פשוטה כגון הרשמה של משתמש לניוזלטר, או מטרה מורכבת יותר כמו לפעול כטופס בקשת עבודה.
עם זאת, דבר אחד המשותף לכל הצורות הפשוטות עד המורכבות הללו הוא HTML ובעיקר ה- HTML תָג.
שימוש בתג הטופס
ה tag הוא אלמנט HTML המשמש כמכל כדי לצרף אלמנטים אחרים שיכולים להיחשב כאבני בניין לטפסים. חלק ממרכיבי היסוד הללו כוללים את תג, ה תג, ו- תָג.
ה לתג יש תכונה חשובה התורמת לפונקציונליות שלה. תכונה זו נקראת פעולה והיא משמשת לזיהוי הקובץ שאליו יועברו הנתונים שהוזנו בטופס.
שימוש בדוגמת התג
הדוגמה למעלה מראה כיצד להשתמש בתג הטופס בפרויקטים שלך. אחד מנקודות המפתח העיקריות הוא שאם אתה פותח תג טופס, עליך לזכור לסגור אותו. זה ייצור מבנה טופס וגם יבטיח שהנתונים שהוזנו בטופס יעובדו כראוי.
שימוש בתג
ה תג משמש לתיאור הנתונים בכל שדה קלט בצורה. לתג זה יש ל תכונה, המשמשת לשיפור הפונקציונליות של טופס.
קָשׁוּר: עורכי ה- HTML המקוונים הטובים ביותר לבדיקת הקוד שלך
אם המזהה המוקצה לשדה הקלט המתאים תואם את ל ערך ב tag, ואז שדה קלט זה יסומן באופן אוטומטי בעת לחיצה על התווית.
שימוש בדוגמת התג
First Name:
בדוגמה למעלה אתה יכול לראות כי ל לתכונה מוקצה הערך fname . לכן, אם אתה יוצר שדה קלט עם fname id, שדה זה יסומן בכל פעם שתלחץ על ראשון שֵׁם תווית.
שימוש בתג
בצורתו הבסיסית ביותר, ה ניתן לראות את תג כתיבת טקסט. ה tag לוכדת נתונים מהמשתמש ואחת התכונות החשובות יותר שלו היא סוּג תְכוּנָה. ה סוּג תכונה מציינת את סוג הנתונים שתיבת הטקסט הזו יכולה לאסוף.
קָשׁוּר: כיצד ליצור טופס מוערם ב- CSS
ישנם מספר ערכים שונים אותם תוכל להקצות ל- סוּג תכונה, אך חלק מהפופולריים יותר הם כדלקמן.
- טֶקסט
- מספר
- אימייל
- תמונה
- תַאֲרִיך
- תיבת סימון
- רָדִיוֹ
- סיסמה
שימוש בתג דוגמא
First Name:
ה tag בקוד למעלה מכיל שלוש תכונות שונות שלכל אחת מהן פונקציה ייחודית. ה סוּג לתכונה מוקצה ערך טקסט כלומר תיבת הטקסט תקבל תווים בלבד.
ה תְעוּדַת זֶהוּת התכונה היא מזהה ייחודי לתיבת הטקסט, והיא חשובה מכיוון שהיא מספקת גישה לרכיב זה מקובץ CSS. ה שֵׁם התכונה היא גם מזהה ייחודי; עם זאת, תכונת השם משמשת לאינטראקציה עם אלמנט מצד השרת של הפיתוח.
ה תְעוּדַת זֶהוּת ו שֵׁם תכונות מוקצות בדרך כלל את אותו ערך כמו האחת מספקת גישה לרכיב מצד הלקוח והשנייה מצד השרת.
שימוש באלמנט תיבת הסימון
רכיב תיבת הסימון הוא ייחודי מאוד בהשוואה לאלמנטים אחרים בהם תוכל להשתמש עם תָג. הוא מאפשר למשתמש לבחור אחת או יותר מרשימת האפשרויות הקשורות. תיבות הסימון מזוהות בקלות מכיוון שהן מיוצגות על ידי תיבות מרובעות זעירות המכילות צ'ק בעת בחירה.
שימוש בדוגמא רכיב תיבת הסימון
Programming Languages:
Java
JavaScript
Python
בדוגמה למעלה, לכל אחד מרכיבי תיבת הסימון יש תכונת ערך, וזה חשוב מכיוון שהוא עוזר להבחין בין כל אפשרות תיבת סימון מהאוסף. לכן, אם משתמש בוחר 'Java' מהאפשרויות לעיל, הנתונים ישקפו זאת.
שימוש בתג וברכיבי הרדיו
ה tag ורכיבי הרדיו דומים במובן זה שהם מאפשרים רק למשתמש לבחור ערך אחד בכל פעם; לכן, אפשר לומר שיש להם את אותה פונקציה. עם זאת, הם שונים מאוד במראה.
אלמנט הרדיו קרוב יותר לאלמנט תיבת הסימון במראהו, אולם עם אלמנט הרדיו יש לך עיגולים במקום ריבועים.
ה tag מייצרת בעצם תיבה נפתחת, המאפשרת למשתמש לבחור ערך יחיד.
שימוש בדוגמא Tag and Element Element
Sex:
Male
Female
Other
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
שימוש ברכיב התאריך
רכיב התאריך מייצר תיבת טקסט קטנה המייצרת לוח שנה בלחיצה. שימוש תַאֲרִיך כסוג קלט בטפסים שלך מגן מפני שמשתמש עלול להזין תאריך לא נכון, מה שעלול להוביל לאיסוף נתונים שגויים.
שימוש בדוגמא של רכיב התאריך
שימוש ברכיב הדוא'ל והסיסמה
כאשר מפתח מקצה או את ערכי הדוא'ל או את הסיסמה למאפיין סוג של tag, כל אחד מייצר תיבת טקסט זהה. עם זאת, כאשר אתה מתחיל להשתמש בתיבות אלה ההבדלים מתבררים.
רכיב הדוא'ל עוקב אחר הנתונים שהוזנו בתיבת הטקסט ומבטיח שכל שליחה תעמוד בדרישה הסטנדרטית של כתובת דוא'ל; שפירושו בעל חלק מקומי, ואחריו סמל @, וכלה בדומיין.
שימוש בדוגמא של רכיב הדוא'ל
בדוגמה שלמעלה יוצגו בפניך תכונה חדשה בשם מציין מקום , ותכונה זו לוקחת ערך טקסט המוצג בתיבת הטקסט באפור דהוי. טקסט זה משמש לציון הנתונים שיש להציב בתיבת הטקסט כפי שניתן לראות בדוגמה למעלה.
רכיב הסיסמה הופך תווים לכוכביות כשהם נכנסים לתיבת הטקסט. לכן, אם מסך המחשב שלך גלוי לאנשים אחרים הם לא יראו את הסיסמה שאתה מזין.
שימוש בדוגמא של רכיב הסיסמה
שימוש בתגית הכפתורים
בצורה, בדרך כלל ישנם שני סוגים שונים של לחצנים. הראשון הוא כפתור השליחה, המגיש את הנתונים שהוזנו בטופס לערך המוקצה לתכונה action (הנמצא ב- < טופס> תָג).
שלח דוגמא לכפתור
Submit
הסוג השני של הלחצן המשמש בדרך כלל בטופס הוא כפתור איפוס, המנקה את הנתונים בצורה כך שהמשתמש יוכל להזין נתונים טריים. ה לתג יש סוּג תכונה המשמשת לציון הפונקציה של הכפתור. בדוגמה שלמעלה סוּג התכונה היא להקצות את הערך שלח , לפיכך, כפתור בעל א סוּג ערך של אִתחוּל משמש לאיפוס הטופס.
איפוס דוגמא ללחצן
Reset
יצירת טופס
כדי ליצור טופס פשוט ב- HTML תצטרך לצרף את כל האלמנטים שהוזכרו לעיל ב- תָג.
יצירת דוגמא לטופס
Forms
First Name:
Last Name:
Date of birth:
Age:
Gender:
Male
Female
Other
Email Address:
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Programming Languages:
Java
JavaScript
Python
Password:
Confirm Password:
Submit
Reset
הקוד למעלה יפיק את הטופס הבא:
כמה חם הוא מעבד חם מדי
כעת תוכל ליצור טופס פשוט ב- HTML
מאמר זה מספק לך את כל הכלים ליצירת טופס HTML פונקציונלי. הוא מזהה את תגי ה- HTML השונים המשמשים ביצירת טפסים וחוקר את התכונות השונות שניתן להשתמש בהן עם תגים אלה.
עם זאת, לרוב הטפסים שאתה רואה באתרים יש רכיב אחד נוסף; CSS, המשמש להבאת הצורה לחיים ולהפיכתה לאסתטית יותר.
לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל גיליון הרמאות Essential CSS3 Propertiesשליטה בתחביר CSS חיוני עם גיליון הרמאות של מאפייני CSS3 שלנו.
קרא הבא נושאים קשורים- תִכנוּת
- HTML
- בניית אתרים
- הדרכות קידוד
Kadeisha Kean הוא מפתח תוכנה בערימה מלאה וכותב טכני/טכנולוגי. יש לה את היכולת המובהקת לפשט כמה מהמושגים הטכנולוגיים המורכבים ביותר; לייצר חומר שניתן להבין אותו בקלות על ידי כל טירון טכנולוגי. היא נלהבת לכתוב, לפתח תוכנות מעניינות ולטייל ברחבי העולם (באמצעות סרטים תיעודיים).
עוד מ- Kadeisha Keanהירשם לניוזלטר שלנו
הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!
לחצו כאן להרשמה