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

להלן רשימה של כל סוגי הרכיבים של HTML.

HTML5 הוסיף סוגים חדשים באלמנט. להלן רשימת סוגי האלמנטים של HTML5

להלן התיאור לגבי סוגי אלמנטים עם דוגמאות.

1. :

אלמנט מסוג 'טקסט' משמש להגדרת שדה טקסט קלט בשורה אחת.

דוגמא:

 Enter first name <br> <br> Enter last name <br> <br> <p> <strong>Note:</strong> The default maximum cahracter lenght is 20.</p> 

תְפוּקָה:

הזן סוג 'טקסט':

ה 'טֶקסט' שדה מגדיר שדה טקסט קלט בשורה אחת.

הערה: ברירת המחדל של אורך התווים המרבי הוא 20.

2. :

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

דוגמא:

 Enter User name <br> <br> Enter Password <br> <br> <br> 

תְפוּקָה:

הזן סוג 'סיסמה':

ה 'סיסמה' שדה מגדיר שדה סיסמה להזנת שורה אחת כדי להזין את הסיסמה בצורה מאובטחת.

java הוא מופע של

3. :

האלמנט מסוג 'שלח' מגדיר כפתור שלח לשליחת הטופס לשרת כאשר מתרחש אירוע ה'קליק'.

דוגמא:

 Enter User name <br> <br> Enter Password <br> <br> <br> 

תְפוּקָה:

הזן סוג 'שלח':

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

4. :

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

דוגמא:

 User id: Password: <br> <br> 

תְפוּקָה:

הזן סוג 'איפוס':

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

5. :

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

כיצד לאחזר אפליקציות נסתרות

דוגמא:

אנא בחר את הצבע האהוב עליך

תְפוּקָה:

קלט סוג 'רדיו'

אנא בחר את הצבע האהוב עליך

6. :

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

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

דוגמא:

 Enter your Name: <p>Kindly Select your favourite sports</p> Cricket <br> Tennis <br> Football <br> Baseball <br> Badminton <br> <br> 

תְפוּקָה:

קודי שגיאה של לינוקס

הזן סוג 'תיבת סימון'

טופס הרשמה

אנא בחר את ענפי הספורט המועדפים עליך

7. :

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

הערה: זה עובד בעיקר עם JavaScript.

דוגמא:

תְפוּקָה:

קלט סוג 'לחצן'.

לחץ על הכפתור כדי לראות את התוצאה:

הערה: בדוגמה שלמעלה השתמשנו ב'התראה' של JS, אותה תלמד במדריך JS שלנו. הוא משמש להצגת חלון פופ.

8. :

הרכיב עם הסוג 'קובץ' משמש לבחירת קובץ אחד או יותר מאחסון מכשיר המשתמש. לאחר בחירת הקובץ, ולאחר ההגשה, ניתן להעלות את הקובץ הזה לשרת בעזרת קוד JS וקובץ API.

דוגמא:

 Select file to upload: 

תְפוּקָה:

הזן סוג 'קובץ'.

אנחנו יכולים לבחור כל סוג של קובץ עד שלא נציין אותו! הקובץ שנבחר יופיע לצד האפשרות 'בחר קובץ'

9. :

הסוג 'תמונה' משמש לייצוג כפתור הגשה בצורת תמונה.

דוגמא:

 <h2>Input &apos;image&apos; type.</h2> <p>We can create an image as submit button</p> User id: <br> <br> <br> 

אלמנט HTML5 שנוספו לאחרונה

1. :

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

הערה: סוג 'צבע' תומך רק בערך צבע בפורמט הקסדצימלי, וערך ברירת המחדל הוא #000000 (שחור).

דוגמא:

 Pick your Favorite color: <br> <br> Upclick <br> <br> Downclick 

תְפוּקָה:

קלט סוגי 'צבע':

הערה: ערך ברירת המחדל של סוג 'צבע' הוא #000000 (שחור). זה תומך רק בערך צבע בפורמט הקסדצימלי.

2. :

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

דוגמא:

 Select Start and End Date: <br> <br> Start date: <br> <br> End date: <br> <br> 

תְפוּקָה:

הזן סוג 'תאריך'

3. :

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

אובייקט בתכנות ג'אווה

דוגמא:

 Select the meeting schedule: <br> <br> Select date &amp; time: <br> <br> 

תְפוּקָה:

הזן סוג 'datetime-local'

4. :

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

דוגמא:

 <b>Enter your Email-address</b> <p> <strong>Note:</strong> User can also enter multiple email addresses separating by comma or whitespace as following: </p> <b>Enter multiple Email-addresses</b> 

תְפוּקָה:

הזן סוג 'אימייל'

הערה: המשתמש יכול גם להזין מספר כתובות דוא'ל מופרדות באמצעות פסיק או רווח כדלקמן:

5. :

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

דוגמא:

 Enter your Birth Month-year: 

תְפוּקָה:

הזן סוג 'חודש':

6. :

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

דוגמא:

 Enter your age: 

תְפוּקָה:

הזן סוג 'מספר'

הערה: זה יאפשר להזין מספר בטווח של 50-80. אם אתה רוצה להזין מספר אחר מאשר טווח, זה יציג שגיאה.

7. :

האלמנט מסוג 'url' יוצר קלט שמאפשר למשתמש להזין את כתובת האתר.

דוגמא:

 Enter your website URL: <br> 

תְפוּקָה:

הזן סוג 'כתובת אתר'

8. :

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

דוגמא:

 <b>Select your best week of year:</b> <br> <br> 

תְפוּקָה:

פקטורי ב-ג

הזן סוג 'שבוע'

9. :

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

דוגמא:

 Search here: 

תְפוּקָה:

הזן סוג 'חיפוש'

10. :

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

דוגמא:

 <b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b> <br> <br> 

תְפוּקָה:

הזן סוג 'טל'

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