הרשם

התחבר

התחבר בעזרת פייסבוק:

שם משתמש סיסמא
זכור אותי

אוריגמי - קטגורית האוריגמי הגדולה בישראל

יצירה לילדים ולמבוגרים - באתר מדריכי יצירה שידהימו אתכם מחדש כל פעם

אוהבים מתוקים? לחצו בשביל עשרות מדריכי עוגות ועוגיות

‹ ›

יכול לעניין אתכם

מדריך HTML מספר 6 - קישורים (Links)

מאת: בקלות טכני

מדריך HTML מספר 7 - איך לעשות טבלאות (Tables)
מאת: בקלות טכני

מדריך HTML מספר 8 - רשימות (lists)

מאת: בקלות טכני

מדריך HTML מספר 9 - איך להכניס מסגרות (Frames and iframes) לדף אינטרנט
מאת: בקלות טכני

איך לבחור את הצבעים המתאימים לאתר האינטרנט שלך.
מאת: בקלות טכני

איך לבחור ולקנות שם לאתר שלך (Domain name)
מאת: בקלות טכני

איך לבחור לוגו

מאת: בקלות טכני

איך לשמור על אבטחת מידע בכתיבת אתר PHP

מאת: גיא חלפון

מדריך HTML מספר 1 - הכרות

מאת: בקלות טכני

מדריך HTML מספר 8 - רשימות (lists)

מאת: בקלות טכני

דף הבית >> מדריכים >> מחשבים >> אינטרנט >> בניית אתרים >> מדריך HTML מספר 10 - טפסים, שדות וכפתורים (Forms and input fields)

מחשבים

מדריך HTML מספר 10 - טפסים, שדות וכפתורים (Forms and input fields)

עקוב

08/06/2011 14:00:41
מאת: בקלות טכני
כתב מתחיל

דירוג:

(0 מדרגים)

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

רמת קושי: מתחילים

הוראות:

כדי להשתמש בשדות, צ'ק בוקסים וכדומה עלינו להגדיר טופס, כלומר, עלינו להגדיר אלמנט מסוג form אשר בתוכו נגדיר אלמנטי קלט שונים (Input). אלמנט הקלט לרוב יתלווה במאפיין מסוג type שיגדיר איזה סוג קלט נקבל, לדוגמא:

<p> <br /> <html></p>
<p> <body> </p>
<p> <form> Your dogs name: <input type="text" name="dogname" /> </p>
<p> </form> </p>
<p> </body> </p>
<p> </html> </p>

<p> במקרה הזה נקבל שדה קלט פשוט המקבל תווים - שימו לב שאלמנט הform רק מגדיר שמדובר בטופס ואינו נראה לעין בדף האינטרנט שלנו. אלמנט הinput נמצא בין תגיות אלמנט הform והוא מכיל בתוכו מאפיין type שהערך שלו הוא text (כלומר שדה טקסט) , כמו כן, קיים מאפיין name שמייצג שם שנוכל להתייחס אליו מאלמנטים אחרים (ערכו נבחר באופן שרירותי).</p>

במקרה הזה נקבל שדה קלט פשוט המקבל תווים - שימו לב שאלמנט הform רק מגדיר שמדובר בטופס ואינו נראה לעין בדף האינטרנט שלנו. אלמנט הinput נמצא בין תגיות אלמנט הform והוא מכיל בתוכו מאפיין type שהערך שלו הוא text (כלומר שדה טקסט) , כמו כן, קיים מאפיין name שמייצג שם שנוכל להתייחס אליו מאלמנטים אחרים (ערכו נבחר באופן שרירותי).

כאשר נגדיר למשתמשים לעשות בחירות מסויימות בטופס, עלינו לחשוב כמה אפשרויות ברצוננו לתת למשתמש לבחור ובהתאם להציב כפתורים וקופסאות. אם המשתמש צריך לבחור אופציה אחת מתוך מספר אופציות נשתמש בכפתור הרדיו (Radio button) או בתפריט נפתח (Drop down).
אם נרצה שמשתמש יוכל לבחור מספר אופציות, נשתמש בצ'ק בוקס (Check box).
דוגמא לRadio button:

<p> <html></p>
<p> <body> </p>
<p> <form> </p>
<p> <input type="radio" name="vacation" value="Eilat" /></p>
<p> Eilat <br /> </p>
<p> <input type="radio" name="vacation" value="Ramat ha golan" /></p>
<p> Ramat ha golan </p>
<p> </form></p>
<p> </body> </p>
<p> </html> </p>

<html>
<body>
<form>
<input type="radio" name="vacation" value="Eilat" />
Eilat <br />
<input type="radio" name="vacation" value="Ramat ha golan" />
Ramat ha golan
</form>
</body>
</html>

את מאפיין הtype באלמנט הinput הגדרנו כradio ויצרנו מאפיין value עם שם הערך. בדף הHTML יוצגו 2 הכפתורים שיצרנו עם הטקסט שהגדרנו שיהיה לצידם.

כדי לעשות צ'ק בוקסים (לבחירת מספר אופציות) נעשה כך:

<p> <html></p>
<p> <body> What classes do you have? <br /> </p>
<p> <form></p>
<p> <input type="checkbox" name="study" value="Math" /></p>
<p> Math<br /> </p>
<p> <input type="checkbox" name="study value="biology" /> </p>
<p> biology <br /> </p>
<p> <input type="checkbox" name="study" value="English" /> </p>
<p> English <br /> </p>
<p> </form></p>
<p> </body></p>
<p> </html> </p>

<html>
<body> What classes do you have? <br />
<form>
<input type="checkbox" name="study" value="Math" />
Math<br />
<input type="checkbox" name="study value="biology" />
biology <br />
<input type="checkbox" name="study" value="English" />
English <br />
</form>
</body>
</html>

בדף הHTML יופיעו הצ'ק בוקסים לבחירה מרובה. הנה דוגמא לתפריט נפתח (Drop down) לבחירה יחידה.

<p> <html></p>
<p> <body></p>
<p> <form action=""></p>
<p> <select name="country"></p>
<p> <option value="Israel">Israel</option></p>
<p> <option value="USA">USA</option></p>
<p> <option value="Canada">Canada</option> </p>
<p> <option value="Australia">Australia</option> </p>
<p> </select> </p>
<p> </form></p>
<p> </body></p>
<p> </html> </p>

<html>
<body>
<form action="">
<select name="country">
<option value="Israel">Israel</option>
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="Australia">Australia</option>
</select>
</form>
</body>
</html>

<p> בדוגמא קיימות כמה תגיות שלא ראינו לפני כן: תגית הselect שמגדירה שמדובר בתפריט נפתח ובתוכה תגיות בשם option שמגדירות אילו אפשרויות ניתן לבחור בתפריט, דיי פשוט.</p>
<p> אל תשכחו שהכל נמצא בתוך אלמנט הטופס.</p>

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

קיימות עוד מספר אלמנטים מעניינים שכדאי להכיר ולנסות:

<form> Password: <input type="password" name="pwd"> </form>

מגדיר סיסמא (תוכן הסיסמא יוסתר)

הדוגמא הזו מראה לנו כיצד להכין שדה שיכול להכיל מספר גדול של תווים (בניגוד לאלמנט הtext). זו דוגמא ליצירת כפתור:

זהו מדריך טיפה יותר מורכב המסביר כיצד לשלוח נתונים מטופס לכתובת אי מייל מסויימת

<form action="MAILTO:admin@bekaloot.co.il" method="post" enctype="text/plain"> Name:<br> <input type="text" name="name" value="name"><br> E-mail:<br> <input type="text" name="mail" value="email"><br> Comment:<br> <input type="text" name="comment" value="comment" size="70"> <br><br> <input type="submit" value="Send"> </form>

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

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

אם לא בא לכם להשאיר תגובה דרך הפייסבוק:

מדריכים נוספים בנושא:

איך לבחור את הצבעים המתאימים לאתר האינטרנט שלך.

איך לבחור ולקנות שם לאתר שלך (Domain name)

איך לבחור לוגו

איך לבחור את האיחסון (Hosting) שמתאים לך.

עוד מדריכים בנושא זה