תג טופס: תיאור, ערך, יישום

תוכן עניינים:

תג טופס: תיאור, ערך, יישום
תג טופס: תיאור, ערך, יישום
Anonim

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

טופס תג HTML
טופס תג HTML

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

כמה סטנדרטיטפסי HTML

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

תכונת פעולה
תכונת פעולה

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

תהליך החלפת מידע עם השרת

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

אילו ערכים יש להקצות לתכונות של תג הטופס
אילו ערכים יש להקצות לתכונות של תג הטופס

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

איך נראית תגובת השרת

כאשר הטופס נשלח, צמדי שם-ערך וכל השדות בתוך האלמנט נכללים ב-HTTP. מבוצעת בקשה לכתובת ה-URL שצוינה בצורת תכונת הפעולה. סוג הבקשה (GET או POST) יהיה בתכונת השיטה. המשמעות היא שכל הנתונים שסופקו על ידי המשתמש נשלחים לשרת ברגע שהטופס נשלח, והשרת יכול לעשות מה שהוא רוצה עם הנתונים האלה. כאשר השרת מקבל שליחת טופס, הוא מתייחס אליו כמו לכל בקשת HTTP אחרת. השרת עושה כל מה שהוא צריך לעשות עם הנתונים הכלולים ומוציא תגובה חזרה לדפדפן.

תכונות תג טופס
תכונות תג טופס

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

אפליקציות אינטרנט וטפסים ללא תג

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

עוד על טפסים

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

תכונות תג טופס
תכונות תג טופס

מה מורכבת הצורה

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

תג טופס
תג טופס

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

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

מוּמלָץ: