מדריך HTML 5 - איך ליצור טפסים והאפשרויות החדשות (חלק א')

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

ב- HTML 5 נוספו מספר אפשרויות חדשות לטפסי האינטרנט שלא היה קיימות ב-HTML 4 ועל מנת לממש אותם בעבר היינו צריכים להשתמש בפונקציות JavaScript שונות.

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

 

כיום, בעזרת HTML 5 ניתן לעשות זאת בקלות. למשל, בדיקה של שדה חובה ב-HTML 5 דורשת מאיתנו כמתכנתים להוסיף רק מאפיין (attribute) אחד בשם reqired בתוך ה- input הרלוונטי. את כל השאר הדפדפן עושה ללא צורך בפונקציות נוספות.

 

reqired - שדה חובה

לא ניתן להמשיך ללא מילוי טופס זה:

<form id='myForm'>
     <input type='text' id='textTest' required />
     <input type='submit' id='submit' value='submit'/>
</form>

 

 

autocomplete - השלמה אוטומטית

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

דוגמא להגדרה לכל הטופס:

<form id='myForm' autocomplete='on' >
     <input type='text' id='firstName' />
    <input type='text' id='lastName' />
    <input type='submit' id='submit' value='submit'/>
    <input type='tel' id='cellPhone' />
</form>

 דוגמא להגדרה רק לשדות שם פרטי ושם משפחה:

<form id='myForm' >
    <input type='text' id='firstName' autocomplete='on' />
    <input type='text' id='lastName' autocomplete='on' />
    <input type='submit' id='submit' value='submit'/>
    <input type='tel' id='cellPhone' />
</form>

 דוגמא להגדרה לכל הטופס למעט שדה הטלפון (כלומר, כמו בדוגמא הקודמת הקודמת רק בדרך אחרת)

<form id='myForm' autocomplete='on' >
    <input type='text' id='firstName' />
    <input type='text' id='lastName' />
    <input type='tel' id='cellPhone' autocomplete='off'/>
    <input type='submit' id='submit' value='submit'/>
</form>

 

 

novalidate - ביטול וולידציה על סוג השדה

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

מבטל גם את הדרישה ל-required

<form id='myForm' novalidate >
    <input type='number' id='myNum' required />
    <input type='submit' id='submit' value='submit'/>
</form>

 

 

autofocus - פוקוס אוטומטי

מגדיר את ה-input כשדה שיסומן אוטומטי לאחר טעינת הדף. זאת אומרת שהסמן יהיה עליו ברגע שהדף יסיים לעלות.

<form id='myForm' >
    <input type='number' id='myNum' autofocus/>
    <input type='submit' id='submit' value='submit'/>
</form>

 

 

pattern - וולידציה לשדה

מאפשר להוסיף וולידציה לשדה בעזרת regular expression.

למשל, וולידציה על מספר טלפון יכולה להתבצע על ידי ה-regular expression הבא: ^0\d([\d]{0,1})([-]{0,1})\d{7}$

וכך זה יראה בקוד:

<form id='myForm'>
     <input type='text' id='phoneTest' pattern='^0\d([\d]{0,1})([-]{0,1})\d{7}$'/>
     <input type='submit' id='submit' value='submit'/>
</form>

 

 

תגיות:

תגובות (2) -

gh
14/02/2018 12:17:47

gh

ננננננ
29/08/2018 21:11:30

ננננננננננננננננננננננננננננננננננ

הוסף תגובה