התג <input> ב - HTML5

התג <input> ישמש אותנו כדי להגדיר שדות לקליטת מידע מן המשתמש הגולש בדף ה - HTML שלנו.

דוגמת קוד לשימוש בתג <input>

<form>
<fieldset>
<legend>User Details</legend>
Name: <input type="text" />
Phone No: <input type="text" />
Email: <input type="text" />
</fieldset>
</form

ההבדלים בין גרסה 5 לגרסה 4.1

בגרסה 5 נוספו מאפיינים רבים (ראו בסעיף הבא)

המאפיין align שהיה קיים בגרסה 4.1 בוטל בגרסה 5 ואין להשתמש בו.

מאפיינים (Attributes)

התג תומך בכל התכונות הסטנדרטיות ומלבד זאת הינו בעל מספר תכונות ייחודיות:

מאפיינים מיוחדים אשר נוספו לתג <input> בגרסה 5:

מאפיין ערכים מהות
autocomplete on
off
אם "on" אז הדפדפן יכול לשמור את הנתונים שבתוך הטופס כדי שבפעם הבאה שהמשתמש יקיש ערכים דומים הדפדפן יציע לו את הערכים שהקיש בעבר. במידה ומאפיין זה נושא את הערך - "off" אזי הדפדפן לא ישמור את הערכים שנקלטו בתוך הטופס על ידי המשתמש.
autofocus autofocus במידה ותכונה זו מצויינת אזי באופן אוטומטי כאשר הדף נפתח הפוקוס נמצא על השדה המוגדר.
form שם טופס שמו של טופס אחד או יותר (מופרד בפסיקים במידה ויש יותר מאחד) שאליו משתייך השדה.
formaction url נתיב חוקי לדף שאליו נרצה להעביר את המידע שנקלט בשדה. במידה ונשתמש בתכונה זו נגרום לכך שהמידע שבשדה יישלח לכתובת זו ולא לכתובת שצוינה בטופס שבו חבר השדה.
formenctype application/x-www-form-urlencoded multipart/form-data
text/plain
סוג הקידוד שבו ייעשה שימוש בזמן העברת הנתונים לשרת
formmethod get
post
הדרך שבה יועבר המידע שבשדה לשרת.
formnovalidate novalidate מציין שיש שאין לבצע ולידציה למידע שמועבר לשרת.
formtarget blank_
_parent
_self
_top
_blank - הכתובת תיפתח בחלון חדש _parent - ייפתח בחלון האב
_self - ייפתח בחלון הנוכחי
_top - ייפתח במסך מלא
height פיקסלים או אחוזים גובה השדה
list שמו של אוביקט datalist שמו של אובייקט datalist אשר נמצא באותו מסמך שבו נמצא שדה הקלט ואשר בו נמצאים ערכים לבחירה אשר יוצגו בשדה עם תחילת ההקלדה.
max מספר מציין את הערך המקסימלי שניתן לקלוט בשדה
maxlength מספר מספר התווים המקסימלי שהמשתמש יכול להקליד בשדה הקלט.
min מספר מציין את הערך המינימלי שניתן לקלוט בשדה. יחד עם התוכנה max ניתן להגדיר טווח מספרים בשדה קלט נתון.
multiple multiple אם קיים אזי יתאפשר למשתמש לקלוט בשדה יותר מערך אחד.
pattern ביטוי חוקי מאפשר להגדיר לשדה ביטוי (Regular Expression) אשר יגדיר מה ניתן להזין לשדה הקלט ומה לא. למשל: /[a-zA-Z0-9]/ הוא ביטוי שמאפשר לקלוט רק אותיות אנגליות ומספרים.
placeholder טקסט רמז או דוגמה קצרה בת מספר אותיות שנועד להקל על המשתמש.
required required משמש להגדרת שדה כשדה חובה. כלומר שדה שהמשתמש חייב להזין לתוכו ערך לפני שהוא מבצע Submit לטופס שבו השדה חבר.
step ערך כלשהו מגדיר מה יהיה הערך המינימלי שבו ניתן יהיה להגדיר את הערך הנוכחי בשדה
width ערך בפיקסלים או באחוזים רוחבו של שדה הקלט

מאפיינים מיוחדים אשר נותרו ללא שינוי:

מאפיין ערכים מהות
accept סוגי מידע רשימה של סוגי מידע שניתן לקלוט בשדה זה. במידה ויש יותר מסוג אחד אזי יש להפריד בין הסוגים באמצעות פסיק.
alt טקסט תקף רק כאשר השדה הוא מסוג image ובמקרה זה מגדיר טקסט חליפי לתמונה, במידה ומסיבה כלשהי הדפדפן אינו מסוגל להציג אותה.
checked checked תקף רק בשדות קלט מסוג checkbox וכן radio button. במידה ומוגדר אזי שדות אלה יוצגו למשתמש בעת טעינת הדף כמסומנים.
disabled disabled מוצג למשתמש במצב לא פעיל כך שלא ניתן להזין לשדה ערכים או לבחור מתוכו ערכים. ניתן לשינוי באמצעות קוד בשלב מאוחר יותר. לא תקף כאשר השדה במצב hidden.
size מספר מגדיר מה יהיה רוחבו של שדה הקלט על פי מספר מקסימלי של תווים שייכנסו לתוכו.
src נתיב לקובץ הנתיב המלא לתמונה שתוצג בשדה הקלט. תקף רק במידה ושדה הקלט הוא מסוג תמונה.
type button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
סוג שדה הקלט
value ערך כלשהו מגדיר את ערך ברירת המחדל של השדה. מאפיין חובה בשדות מסוג radio ו - checkbox.

רשימת המאפיינים הסטנדרטיים ב - HTML 5:

accesskey draggable style
class hidden tabindex
contenteditable id title
contextmenu lang
dir spellcheck

אירועים (Events)

תג זה תומך בכל האירועים הסטנדרטיים ב - HTML 5. אין אירועים מיוחדים לתג זה.

רשימת האירועים הסטנדרטיים ב - HTML5

onabort onerror* onmousewheel
onblur* onfocus* onpause
oncanplay onformchange onplay
oncanplaythrough onforminput onplaying
onchange oninput onprogress
onclick oninvalid onratechange
oncontextmenu onkeydown onreadystatechange
ondblclick onkeypress onscroll
ondrag onkeyup onseeked
ondragend onload* onseeking
ondragenter onloadeddata onselect
ondragleave onloadedmetadata onshow
ondragover onloadstart onstalled
ondragstart onmousedown onsubmit
ondrop onmousemove onsuspend
ondurationchange onmouseout ontimeupdate
onemptied onmouseover onvolumechange
onended onmouseup onwaiting

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

מבוא לטפסים ב - HTML5

אימות נתונים בשדות קלט

פוקוס אוטומטי על שדה בטופס בעזרת קוד Javascript

פונקציות ב - Javascript

אירועים ב - Javascript

מדריך לתג form ב - HTML5


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | מדיניות שימוש