אימות טפסים

מאמר זה מסביר על אימות טפסים.

הוא מסביר את אימות הטפסים ב-HTML.

YouTube Video

אימות טפסים ב-HTML

סקירה כללית על אימות טפסים ב-HTML

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

תגית required

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" required placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

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

תגית pattern

1<form>
2  <label for="username">Username (letters and numbers only):</label>
3  <input type="text" id="username" name="username" pattern="[A-Za-z0-9]+" required>
4  <button type="submit">Submit</button>
5</form>

• תגית pattern משמשת לאימות אם קלט הטופס תואם לדפוס רג׳קס מסוים. לדוגמה, זה מאמת אם שם המשתמש מכיל רק תווים אלפאנומריים.

תגיות min ו-max

1<form>
2    <label for="age">Age:</label>
3    <input type="number" id="age" name="age" min="18" max="99" placeholder="Enter your age">
4    <button type="submit">Submit</button>
5</form>

• תגיות <min> ו-<max> משמשות לציון הערכים המותרים המינימליים והמקסימליים של אלמנט קלט. הן נפוצות לשימוש עם סוגי קלט כמו number, range ו-date.
• בדוגמה זו, ניתן להכניס מספר בין 18 ל-99.

תגיות minlength ו-maxlength

1<form>
2    <label for="username">Username:</label>
3    <input type="text" id="username" name="username" minlength="4" maxlength="12" placeholder="4-12 characters">
4    <button type="submit">Submit</button>
5</form>

• תגית minlength מגדירה את מספר התווים המינימלי הנדרש לשדה קלט, בעוד שתגית maxlength מגדירה את מספר התווים המקסימלי המותר.
• בדוגמה זו, אפשר להזין טקסט בין 4 ל-12 תווים.

התכונה type="email"

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• התכונה type="email" משמשת להבטיח שהקלט הוא בפורמט כתובת דוא"ל חוקי. תכונה זו מספקת פונקציונליות אימות מובנית לשדות קלט של כתובות דוא"ל.

התכונה type="url"

1<form>
2    <label for="website">Website:</label>
3    <input type="url" id="website" name="website" placeholder="https://example.com" required>
4    <button type="submit">Submit</button>
5</form>

• <input type="url"> מספק שדה קלט שדורש פורמט URL תקין. הדפדפן בודק אוטומטית אם הקלט חוקי כ-URL.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video