מדריך HTML 5 - הגדרת סוגים לשדות input

ב-HTML 5 נוספו לנו מספר אפשריות חדשות לשדות מסוג input שבאות להקל עלינו את הכתיבה ועוזרות לקוד להיראות קצת יותר מסודר.

חלקם אפשרויות שבעבר היינו צריכים לרשום קוד ב-JavaScript או באמצעות פקד חיצוני שיתן לנו את אותה תוצאה וכיום ניתן לעשות אותם באמצעות HTML בלבד ורק על ידי שינוי הסוג של ה-input על ידי מילה אחת וללא צורך בקוד נוסף וארוך.

 

מה היה בגירסה הקודמת של HTML?

בעבר (ב- HTML 4) יכולנו לבחור בין מספר סוגי השדה. אסביר עליהם בקצרה על מנת לתת רקע כללי:

text - מייצג שדה טקסט.

password - שדה סיסמא (יציג את הטקסט שמוזן עם *).

radio - בחירה של אפשרות אחת מתוך מספר אפשרויות.

checkbox - מאפשר סימון של כמה אופציות (בדרך כלל) מתוך מספר אפשריות.

file - העלאת קובץ.

hidden - שדה מוסתר. משמש בדרך כלל לשליחת נתונים לשרת באופן שלא מוצג למשתמש.

submit - כפתור שליחת טופס.

image - כפתור עם תמונה לשליחת טופס.

 

אז מה האפשרויות שנוספו לנו ב- HTML 5?

datetime - בחירת תאריך

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

* במידה והמשתמש יבחר בתאריך שלא קיים (למשל 29 לפברואר 2014) תתקבל הודעת שגיאה והמשתמש לא יוכל לשלוח את הטופס.

<form id='myForm'>
    <input type='date' id='myBirthdayDate' />
    <input type='submit' id='submit' value='submit'/>
</form>

 

month - בחירת חודש ושנה

כמו השדה הקודם (datetime), רק ללא בחירת יום אלא רק חודש ושנה.

* אם נבחר רק אחד מהם (רק שנה או רק חודש) אז השדה לא יעבור וולידציה.

<form id='myForm'>
    <input type='month' id='myBirthdayDate' />
    <input type='submit' id='submit' value='submit'/>
</form>

 

week - בחירת מספר שבוע ושנה

 * אם נבחר רק אחד מהם (רק שנה או רק שבוע) או אם נבחר שבוע שלא קיים בשנה הספציפית שנבחרה (למשל שבוע 53 בשנת 2014) אז השדה לא יעבור וולידציה.

<form id='myForm'>
    <input type='week' id='myWeek' />
    <input type='submit' id='submit' value='submit'/>
</form>

 

time - בחירת שעה

בחירה של שעה, דקה ו-AM או PM.

* במידה ולפחות אחד מהם מוזן והשאר לא אז השדה לא יעבור וולידציה.

<form id='myForm'>
    <input type='time' id='myTime' />
    <input type='submit' id='submit' value='submit'/>
</form>

  

email

שדה טקסט שמוודא שהוזן בו כתובת email תקינה לפני שליחת הטופס ומציג הודעה בהתאם.

* שימו לב שאם השדה ריק אז לא תתבצע וולידציה.

<form id='myForm'>
    <input type='email' id='myEmail' />
    <input type='submit' id='submit' value='submit'/>
</form>

 

 color - פקד לבחירת צבע

לחיצה על פקד זה תפתח למשתמש חלון חדש עם אפשרות לבחור צבע וישלח בטופס את הצבע שנבחר בתצורת HEX (לדוגמא #FFFFFF)

<form id='myForm'>
    <input type='color' id='myColor' />
    <input type='submit' id='submit' value='submit'/>
</form>

 

 

number - ערך מספרי

שדה שמכיל מספר שלם (לא עשרוני). מציג גם 2 כפתורים של הוסף מספר או הסר.

ניתן גם להגדיר ערך מינימלי או מקסימלי, ערך ברירת מחדל והקפיצות לכפתורי ההוספה וההסרה.

* מתבצעת וולידציה על ערך השדה (שאכן הערך הוא מספר והמספר שלם) ובמידה והוגדרו ערך מקסימלי או מינימלי אז גם שהערך נמצא בתוך התווך שהוגדר.

בדוגמא הבאה הגדרתי שדה מספרי שמכיל כערך ברירת מחדל את המספר 2, ערך מקסימלי 12 וערך מינימלי 2 וכל לחיצה על הכפתורים של ההוספה או ההסרה תגרור קפיצה של ערך המספר ב-2

<form id='myForm'>
    <input type='number' id='myNumber' min='2' max='12' step='2' value='4' />
    <input type='submit' id='submit' value='submit'/>
</form>

 

range - בחירת מספר באמצעות slider

 זהה בהגדרות לשדה הקודם (number) רק בעיצוב אחר.

<form id='myForm'>
    <input type='range' id='myNumber' min='2' max='12' step='2' value='4' />
    <input type='submit' id='submit' value='submit'/>
</form>

 

url - כתובת אתר אינטרנט

שדה שמכיל כתובת אתר אינטרנט.

* הטופס יווצא וולידציה שהכתובת אכן חוקית וכוללת http או https 

<form id='myForm'>
    <input type='url' id='myWebsite' />
    <input type='submit' id='submit' value='submit'/>
</form>

 

tel - שדה טלפון

מכיל ערך של מספר טלפון.

* על שדה זה לא מתבצעת וולידציה שהערך אכן חוקי.

<form id='myForm'>
    <input type='tel' id='myCell' />
    <input type='submit' id='submit' value='submit'/>
</form>

 

 

search - שדה חיפוש

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

כנראה שהמשתמש לא ירגיש בהבדל אך למתכנת שיכנס לקוד אחר כך יהיה קל יותר להבין את משמעות השדה.

<form id='myForm'>
    <input type='search' id='mySearch' />
    <input type='submit' id='submit' value='submit'/>
</form>

 

 

תגיות:

תגובות (2) -

חטעו
05/12/2018 20:02:11

חועטוע

רחל
17/07/2019 06:55:44

אם אני רוצה להגביל שהמשתמש יוכל לפתוח קובץ רק מסוג תמונה

הוסף תגובה