HTML User Input

‫שי תבור‬

shay.tavor@gmail.com
www.shaytavor.com
 Fieldset
‫ שתפקידה לרכז באיזור מסויים כמה‬html-‫ היא תגית ב‬Fieldset •
.‫שדות שיש בניהם קשר לוגי‬

.)legend ‫ וכותרת (שנקראת‬,‫ מכיל קו תוחם‬fieldset-‫ה‬ •

<fieldset> Details
<legend>Details</legend>
</fieldset>

shay.tavor@gmail.com
www.shaytavor.com
 ‫‪Input‬‬
‫רוב איסוף המידע נעשה ע"י התגית ‪ .input‬התגית מאפשרת למשתמש‬ ‫•‬
‫להזין טקסט‪:‬‬
‫>‪<input id = “txtAge”/‬‬

‫התגית יוצרת תיבת טקסט פשוטה (שורה אחת)‪.‬‬ ‫•‬

‫התכונה ‪ id‬תשמש בעתיד לזיהוי תיבת הטקסט (כמו שם משתנה)‪.‬‬ ‫•‬

‫‪shay.tavor@gmail.com‬‬
‫‪www.shaytavor.com‬‬
 Input
:type ‫ניתן לשנות את סוג הטקסט ע"י התכונה‬ •
text ‫يدخل‬

<input type = “password” id = “pass” />

<input type = “color” /> ‫נותן מעגל של כל הצבעיים‬

<input type = “time”/>

Id = “x”
.‫ועוד‬
Name: <input x>

shay.tavor@gmail.com
www.shaytavor.com
 ‫‪Label‬‬
‫נוח להצמיד טקסט לתיבות הטקס ע"י תגית ה‪.label-‬‬ ‫•‬

‫תגית זו לא מוסיפה מראה ויזואלי‪ ,‬אלא כמו ‪ div‬מאפשרת עיצוב‬ ‫•‬

‫ספציפי של איזור מסויים במסך (במקרה הזה – הטקסט שמקדים את‬
‫תיבות הטקסט)‪.‬‬
‫‪links the tag to the relevant input box‬‬
‫התגית מכילה את התכונה ‪ for‬שקושרת בין התווית לבין תיבת הקלט‬ ‫•‬
‫הרלבנטית‪ .‬רצוי שתכונת ה‪ for-‬תהיה שווה ל‪ id-‬של תיבת הקלט‪:‬‬
‫>‪<label for = “name”>Name</Label‬‬
‫>‪<input id = “name” /‬‬

‫‪shay.tavor@gmail.com‬‬
‫‪www.shaytavor.com‬‬
 ‫סוגי ‪ input‬נוספים‬
‫התכונה ‪ type‬של תגית ה‪ input-‬יכולה להכיל גם ערכים אחרים‪:‬‬ ‫•‬

‫‪ – ”type = “checkbox‬כפתור בחירה מרובה‪.‬‬ ‫•‬

‫‪ – ”type = “radio‬כפתור בחירה יחידה‪.‬‬ ‫•‬

‫‪ – ”type = “hidden‬שדה טקסט מוסתר (נועד לשמור נתונים לצורך‬ ‫•‬

‫תפקוד הדף בלי שהמשתמש יראה אותם)‪.‬‬

‫‪shay.tavor@gmail.com‬‬
‫‪www.shaytavor.com‬‬
 ‫סוגי קלט נוספים‬
‫תגיות קלט נוספות‪:‬‬ ‫•‬

‫<‪ – >textarea‬תיבת טקסט מרובת שורות‪.‬‬ ‫•‬

‫<‪ –>select‬רשימה (‪ .)combobox‬מורכבת מתגיות ‪option‬‬ ‫•‬

‫שמכילות את אפשרויות הבחירה‪.‬‬

‫‪shay.tavor@gmail.com‬‬
‫‪www.shaytavor.com‬‬
 ‫ערכי ברירת מחדל‬
‫לפעמים נרצה לספק ערך ברירת מחדל בשדה הקלט‪.‬‬ ‫•‬

‫נוכל לעשות זאת עם התכונה ‪ placeholder‬של התגית ‪.input‬‬ ‫•‬

‫הערך שיוצב בתכונה יופיע בתוך תיבת הקלט ברגע שהטופס יטען‪.‬‬ ‫•‬

‫‪shay.tavor@gmail.com‬‬
‫‪www.shaytavor.com‬‬
 ‫התמקדות בתיבת קלט‬
‫כשהדף נטען‪ ,‬בדר"כ הפוקוס לא נמצא על אף תיבת קלט ולכן כדי‬ ‫•‬
‫להתחיל להקליד יש ללחוץ עם העכבר על אחת מתיבות הקלט‪.‬‬

‫לפעמים נרצה לטעון את הדף ולהתמקד באחת מתיבות הטקסט בלי‬ ‫•‬
‫צורך ללחוץ עם העכבר‪.‬‬

‫נוכל להשתמש בתכונה ‪ autofocus‬של תגיות הקלט‪.‬‬ ‫•‬

‫התכונה היא בוליאנית ולא מקבלת ערך‪ .‬כשכותבים אותה ערכה‬ ‫•‬
‫מתפרש כ‪.true-‬‬

‫‪shay.tavor@gmail.com‬‬
‫‪www.shaytavor.com‬‬
 ‫שדות חובה‬
‫ניתן להשתמש בתכונה הבוליאנית ‪ required‬שמציינת שהשדה הוא‬ ‫•‬
‫חובה‪.‬‬

‫ברגע שהטופס אמור להשלח לשרת‪ ,‬נבדקים שדות החובה‪ ,‬ואם אחד‬ ‫•‬
‫או יותר מהם חסרים‪ ,‬תצא הודעת שגיאה‪.‬‬

‫‪shay.tavor@gmail.com‬‬
‫‪www.shaytavor.com‬‬
 ‫תגיות קלט נוספות‬
‫בגרסת ‪ HTML5‬נוספו כמה תגיות קלט נוספות שמאפשרות גם‬ ‫•‬
‫ולידציה של הקלט באופן אוטומטי‪:‬‬

‫‪ – ”type = “email‬שדה קלט עבור כתובת מייל‪ ,‬מבצע ולידציה על‬ ‫•‬
‫פורמט הכתובת‪.‬‬

‫‪ – ”type = “url‬שדה עבור כתובת אינטרנט‪ .‬מבצע ולידציה‪.‬‬ ‫•‬

‫‪ – ”type = “number‬מאפשר להזין מספר‪ .‬ניתן לקבוע את ערכי‬ ‫•‬

‫המקסימום והמינימום‪ ,‬או את ההפרש בין כל שני מספרים (‪.)step‬‬

‫‪shay.tavor@gmail.com‬‬
‫‪www.shaytavor.com‬‬