אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » HTML 5 » HTML 5 Forms

HTML 5 Forms

רן בר-זיק מאי 1, 2011 8:00 am 3 תגובות

טפסים ב-HTML5 הופכים לתענוג ממשי. הסבר קצר על ה-API החדש של טפסים בתקן החדש.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

HTML 5 מספקת לנו שלל של אפשרויות ליצירת טפסים (forms) עם ולידציה ופלייסהולדרים ואף autofocus ללא כל בעיה ובקלות. כמו כל תקן של HTML 5, עדיין יש בו שינויים אך כרום ופיירפוקס (גרסה 4 ומעלה) כבר תומכים בו וניתן להשתמש בו בקלות מרובה.

כיוון שמדובר בתקן שעדיין לא מיושם במלואו – ניתן לבדוק את רמת התמיכה של כל דפדפן בתכונות השונות באתר הזה: http://wufoo.com/html5.

required

בטופס הקטן הזה ה-input הוגדר כנדרש, נסו לשלוח אותו בלי למלא אותו:



אם אתם משתמשים בדפדפן שתומך ב-HTML 5 Forms (נכון לכתיבת שורות אלו פיירפוקס 4 וכרום), אתם תקבלו הודעת שגיאה שקופצת ומבקשת מהמשתמש למלא את השדה. אין אפשרות למלא את השדה ללא מילוי הפרטים.

איך עשיתי את זה? פשוט מאד – הוספת המילה required לשדה באופן הבא:


<form id='example'>
	<input type='text' required/>
	<button type='submit'>שליחה</button>
</form>

autofocus

אנא תטענו את העמוד הזה מחדש ושימו לב להיכן הפוקוס של הדפדפן הולך:

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


<input type='text' autofocus/>

Placeholder

שימו לב לשדה הבא (ונסו להקליד בתוכו דבר מה!):

הדבר הזה נקרא placeholder וממש קל לממש אותו. פשוט מוסיפים את התכונה placeholder ומה אנו רוצים שיהיה בו. למשל:


<input type='text' placeholder='נסו להקליד בתוך השדה'/>

ולידציות

עם HTML 5 Forms קל מאד לעשות ולידציות. מה שפעם הצריך סקריפטים ארוכים מאד, היום הופך לפשוט. יש לנו מספר סוגים חדשים של פקדים שכל אחד מהם מבצע ולידציה בהתאם לסוג שלו. בואו ואדגים באמצעות סוג E-mail. נסו למלא את השדה הבא במשהו שהוא לא כתובת מייל ולידית ולחצו על שליחה. הודעת השגיאה בוא תבוא.



איך עשיתי את זה? פשוט ציינתי את ה-type:


<form id='example2'>
	<input id='email' name='email' type='email' placeholder='[email protected]' />
	<button type='submit'>שליחה</button>
</form>

ישנם עוד כמה סוגים שכדאי לבדוק: phone, number, url. בנוסף יש את סוג pattern שמבקש מאיתנו להכניס לו ביטוי רגולרי ומבצע לו ולידציה על פי הביטוי. למשל:



אם לא תכניסו את הביטוי המדויק (מספר ואחריו 3 אותיות גדולות באנגלית) לא תצליחו לשלוח את הטופס. נכון לכתיבת שורות אלו זה עובד בפיירפוקס 4 בלבד – לתשומת לבכם.

כך זה נראה:


<form id='example3'>
	<input pattern="[0-9][A-Z]{3}" title="A part number is a digit followed by three uppercase letters." />
	<button type='submit'>שליחה</button>
</form>

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
»HTML 5 Notification
»Geolocation
HTML 5

3 תגובות

  1. חלוןח הגב יולי 13, 2020 בשעה 11:23 am

    איך שולחים טופס למיקום ספציפי?????????????????

  2. משתמש אנונימי (לא מזוהה) הגב אוקטובר 8, 2020 בשעה 12:52 pm

    /

  3. יצחק תשובה הגב דצמבר 20, 2021 בשעה 6:39 pm

    האם יש דרך להגדיר pattern בעברית ? [א-ת]

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד