הפיכת טופס לתהליך הרשמה | Htm - אחלה טיפים לבניית אתרים

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

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

<דוגמא><קוד>

מה אנחנו צריכים?

טופס. זה כמעט ומספיק, עוד דבר אחר שאנחנו צריכים לוודא שהטופס מחולק לfieldset שלכל אחד יש legend. בואו נביט במבנה:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<form id="SignupForm">
<fieldset>
<legend>פרטי חשבון</legend>
//...חלק אחד....
</fieldset>
<fieldset>
<legend>פרטי חברה</legend>
//...חלק שני...
</fieldset>
<fieldset>
<legend>פרטי תשלום</legend>
//...חלק שלישי...
</fieldset>

<input id="SaveAccount" type="button" value="שלח טופס" />
</form>

המהות של fieldset הוא לחלק את הטופס לחלקים, בתוך כל fieldset אנחנו נתחום חלקי טופס הקשורים אחד לשני (הוא מחלק את הטופס לקבוצות). תפקיד ה-legend הוא לתת כותרת ל-fielset, הוא חייב לבוא מיד לאחר פתיחת התאג fieldset.

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

הוספת קוד הפלאגין

ראשית נוסיף שלושה קבצים חיוניים:

jQuery
סקריפט הפיכת טופס לתהליך (formToWizard.js)
גליון עיצוב לתהליך (formToWizard.css)

ככה זה נראה (בין תגיות ה-Head):

1
2
3

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/></script>
<script type="text/javascript" src="formToWizard.js"></script>
<link rel="stylesheet" type="text/css" href="formToWizard.css" />

כעת נוסיף את קוד ההפעלה (נשים לב שלמעלה ה-ID של ה-form הוא SignupForm וה-ID של כפתור השליחה הוא SaveAccount):

1
2
3
4
5
6
7

<script type="text/javascript">
$(document).ready(function(){
$(function(){
$("#SignupForm").formToWizard({ submitButton: 'SaveAccount' })
});
});
</script>

כעת הטופס אמור להפוך לתהליך. את השם לכל תהליך הוא לוקח מה-legend של כל fieldset.

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

מה איתכם? אהבתם? חושבים שהסקריפט שימושי? אשמח לשמוע על כך בתגובות!

שתפו את הפוסט הזה:

http://www.htm.co.il/wp-content/plugins/sociofluid/images/digg_48.png

http://www.htm.co.il/wp-content/plugins/sociofluid/images/google_48.png

http://www.htm.co.il/wp-content/plugins/sociofluid/images/myspace_48.png

http://www.htm.co.il/wp-content/plugins/sociofluid/images/facebook_48.png

http://www.htm.co.il/wp-content/plugins/sociofluid/images/twitter_48.png

http://www.htm.co.il/wp-content/plugins/sociofluid/images/bookmark_48.png

http://www.htm.co.il/wp-content/plugins/sociofluid/images/email_48.png

http://www.htm.co.il/wp-content/plugins/sociofluid/images/print_48.png

עוד באותו נושא:

דיון פתוח

מה אתם חושבים? רשמו את תגובתכם.

תגובות

אורן

22 באוקטובר

מגניב, תודה! נראה שימושי מאוד.

Amosexy

22 באוקטובר

אהבתי לגמרי

תודה רבה

שימי

26 באוקטובר

מדליק ונעים לשימוש בהחלט ידידותי ומתקדם

אורן רוט

26 באוקטובר

תודה רבה על התגובות החיוביות

Amosexy

6 בנובמבר

אהבתי
אני מאמץ נראה לי

Amosexy

23 בנובמבר

חזק אהבתי
ואפילו השתמשתי

אורן רוט24 בנובמבר

אני שמח לשמוע,
אשמח ללינק

יוסי ב.

23 בנובמבר

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

אורן רוט24 בנובמבר

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

סתם אחד

11 באפריל

לא עובד בIE7!!

אורן רוט11 באפריל

צודק

מירי

29 במאי

אין

רן

13 בספטמבר

איך אפשר להוסיף לזה אימות בטופס שאם לא רשמת משהו שאתה חייב זה לא עובר לשלב הבא??

ניסיון