פורום אטרף - [שיעור מס' 6] HTML ו-CSS

הקדמה

בשיעור הקודם למדנו מספר דברים:

איך להוסיף טבלאות לדף.
איך להוסיף קובץ שמע לדף.
איך להוסיף קובץ וידאו לדף.

בואו נתחיל

את התגית <form>(יש תג סוגר) יש לשים בתגית ה-<body>, ויש לה כמה מאפיינים שבדרך כלל חובה לשים:

קוד HTML:

<form action="url" method="method">
</form>

המאפיין action (פעולה) אומר לדפדפן לאן לשלוח את הנתונים שבטופס לאחר השליחה.
במרבית המקרים, סקריפט מעבד את הנתונים ויוצר URL, שדרכו נשלחים הנתונים(לרוב ב-PHP, ASP ו-cgi).

המאפיין method (שיטה) אומר לדפדפן כיצד לשלוח את הטופס, אל ה-URL שמוגדר ב-action.
קיימות שתי אפשרויות ל-method:
post (שלח)
get (קבל)

השיטה שתשתמשו בה תלויה בסקריפט, לרוב נשתמש ב-post.

בינתיים יש לנו רק טופס, הגיע הזמן לשים בוא דברים!

שליחת הטופס
בינתיים יש לנו טופס ריק, נתחיל משליחתו.

כאשר המשתמש לוחץ על כפתור שליחה(Submit), צריך לשלוח את הטופס.
בשביל זה נכתוב כך:

קוד HTML:

<form method="post" action="somthing">
<input type="submit" value="שלח" />
</form>

כפי ששמתם לב ב-action, לא רשמתי כלום. מכיוון שאין לנו איך..
אוקיי, השתמשתי בתג <input>(אין תג סוגר) שמתי כמה מאפיינים:
type, אומר מה הסוג של הכפתור, אם לא נעשה את זה זה סתם יהיה כפתור רגיל. (בשביל הכפתור שלנו צריך לתת לזה ערך "submit")
value, מה שרשום על הכפתור(תראו שרשום על הכפתור "שלח" כמו שהגדרנו)

ויצא לנו כפתור, נלחץ עליו והדף יתרענן, כלום לא קרה.

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

קוד HTML:

<input type="reset" value="אפס" />

פשוט הגדרנו בטיפוס(type) שזה כפתור איפוס (reset) ושזה יאפס את כל הנתונים.
כרגע זה לא יעשה כלום, כי אין לנו שדות קלט.. בינתיים!

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

קוד HTML:

<input type="text" name="fieldName" />

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

קוד HTML:

<input type="text" name="fieldName" size="20" />

והרי לכם תיבה גדולה.
אפשר לשים ערך התחלתי לדוגמא:

קוד HTML:

<input type="text" name="fieldName" size="20" value="My name is" />

תרעננו ותראו מה יצא.
אפשר לעשות הגבלת אורך מלל עם המאפיין maxlength:

קוד HTML:

<input type="text" name="fieldName" size="20" value="My name is" maxlength="10" />

שם עד 10 תווים ^

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

קוד HTML:

<textarea name="fieldName" rows="n" cols="n"></textarea>

בשדה rows זה אומר את מספר השורות(נחליף ב-n ונשים מספר).
בשדה cols זה אומר את מספר הטורים(נחליף ב-n ונשים מספר).

סיכום עד כה:

קוד HTML:

<form action="somthing" method="post">
        שם פרטי: <input type="text" name="Pname" size="20" maxlength="20" />
        <br />
        שם משפחה: <input type="text" name="Lname" size="20" maxlength="20" />
        <br />
        תוכן: <br /><textarea name="content" rows="5" cols="5"></textarea>
        <br />
        <input type="submit" value="שלח" /><input type="reset" value="אפס" />
    </form>

פשוט מאוד!

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

קוד HTML:

<input type="checkbox" name="checkboxName" />

נחליף את השם למה שנרצה ^
דוגמא:

קוד HTML:

<form action="somthing" method="post">
        מהו הצבע האהוב עליך?
        <br />
        כחול <input type="checkbox" name="Blue" />
        <br />
        אדום <input type="checkbox" name="Red" />
        <br />
        צהוב <input type="checkbox" name="Yellow" />
        <br />
        כתום <input type="checkbox" name="Orange" />
        <br />
        אחר <input type="checkbox" name="Other" />
        <br />
        <input type="submit" value="שלח" /><input type="reset" value="אפס" />
    </form>

די פשוט לא?

כפתורי רדיו
במקום להציב אפשרות כן או לא יש אפשרות שהם פשוט ילחצו על אפשרות אחת מתוך הארבע, זה הולך כך:

קוד HTML:

<input type="radio" name="radioName" />

דוגמא שימושית:

קוד HTML:

<form action="somthing" method="post">
        מהו הצבע הכי אהוב עליך?
        <br />
        כחול <input type="radio" name="Colors" value="Blue" />
        <br />
        אדום <input type="radio" name="Colors" value="Red" />
        <br />
        צהוב <input type="radio" name="Colors" value="Yellow" />
        <br />
        כתום <input type="radio" name="Colors" value="Orange" />
        <br />
        אחר <input type="radio" name="Colors" value="Other" />
        <br />
        <input type="submit" value="שלח" /><input type="reset" value="אפס" />
    </form>

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

בחירה מתוך רשימה
כפתורי רדיו, אינם הדרך היחידה לבחור דבר אחד מתוך רשימה. יש לנו את התג <select> שעוזר לנו בזה(יש תג סוגר):

קוד HTML:

<select name="Select Name" size="n">
<option>option One</option>
<option>option Two</option>
<option>And more...</option>
</select>

ב-size נרשום מספר, וכך גודל התיבה ישתנה.
יש לנו פה מספר דברים, קודם כל הרשימה מתחילה בתג "<select>", אח"כ הגדרנו את כל האפשרויות דרך התג "<option>".

עוד משהו נחמד זה שאפשר לעשות קט'ג, כלומר אם נרשום כך:

קוד HTML:

<form action="somthing" method="post">
        מהו הצבע הכי אהוב עליך?
        <br />
        <select name="colors" size="5">
            <optgroup label="צבעים בהירים">
                <option>White</option>
            </optgroup>
            <optgroup label="צבעים כהים">
                <option>Black</option>
            </optgroup>
        </select>
        <br />
        <input type="submit" value="שלח" /><input type="reset" value="אפס" />
    </form>

ייצא יותר נחמד ויותר מסודר!

ש.ב

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

לשיעור הקודם - שיעור מס' 5 לחצו כאן.
שאלות על HTML ו-CSS בפורום שפות צד לקוח.

שם משתמש		זכור אותי	רישום לאתר
סיסמה		שכחת סיסמה?

קהילות פורומים, הורדות, יעוץ ותמיכה

[שיעור מס\' 6] HTML ו-CSS

הודעת מערכת

עוד באטרף