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

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

קל 8,077 צפיות 8 ביוני 2011

HTML וXHTML בניית אתרים

מה תצטרך

HTML
טפסים
איך להכין טופס
שליחה
כפתורים
צ'ק בוקס
כפתור רדיו

שלבים

1
שלב 1

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

<html>

<body>

<form> Your dogs name: <input type="text" name="dogname" />

</form>

</body>

</html>
3
שלב 3

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

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

אם נרצה שמשתמש יוכל לבחור מספר אופציות, נשתמש בצ'ק בוקס (Check box).

דוגמא לRadio button:
5
שלב 5

<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>
6
שלב 6

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

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

<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>
9
שלב 9

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

<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>
11
שלב 11

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

אל תשכחו שהכל נמצא בתוך אלמנט הטופס.
12
שלב 12

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

<form> Password: <input type="password" name="pwd"> </form>
14
שלב 14

מגדיר סיסמא (תוכן הסיסמא יוסתר)
15
שלב 15

<textarea rows="20" cols="50">some text in the text area</textarea>
16
שלב 16

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

<input type="button" value="Nice Button!">
18
שלב 18

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

<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>