כניסה

Front End

  • HTML בסיסי
  • תגיות בסיסיות ב-HTML
  • טפסים ב-HTML
  • קצת על HTML5
  • מבוא ל-CSS ושילוב בעמוד שלנו
  • CSS Selectors
  • CSS בסיסי
  • Media Queries
  • Flex Box
  • Grid
  • Bootstrap CSS
  • שלום JavaScript
  • משתנים ב-JavaScript
  • תנאים ב-JavaScript
  • Switch Statement
  • Ternary Operator
  • Loops
    • while
    • do While
    • for
  • Objects
  • for in Loop
  • Arrays
  • for of
  • Scope
  • Functions
  • Events + DOM
  • DOM Access
  • XML & JSON
  • Storages in JavaScript
    • Session Storage
    • Local Storage
    • Cookies
  • inline, anonymous, arrow functions
  • Array Callbacks
  • Exception Handling
  • Sync VS Async
  • Promise Object
  • async-await
  • Strict Mode & IIFE
  • AJAX
  • Complexity
  • שלום TypeScript
    • התקנות
    • פתיחת פרויקט ראשון
  • TypeScript Basics
    • Variables
    • Functions
  • OOP
    • OOP Basic
    • Inheritance
    • Polymorphism
  • שלום React
    • מבוא
    • התקנות
    • פרויקט ראשון
  • CSS Leaking
  • Layout
  • Interpolation
  • Conditional Rendering
  • Lists
  • Events Basics
  • Props
  • State, useState
  • React Hooks
  • useEffect
  • Routing
  • Ajax Requests
  • Route Parameter
  • useForm
  • Redux
  • Authorization & Authentication
  • תהליך הטמעת Auth מלא בפרויקט
  • Interceptors

Back End

  • Node.js
    • מבוא והגדרות
  • Modules
  • Global Object
  • Versioning System
  • Node.js + TypeScript
  • HTTP Protocol
  • Web Service
  • REST API
  • Layered REST API
  • Middleware
  • Error Handling
  • Auth
  • Upload Images
  • Server Images
  • Database
  • שלום MySQL
  • XAMPP
  • Relations
  • phpMyAdmin
  • MySQL Basics
  • Designer
    • Create Relations
  • Insert Data
  • MySQL Common Commands
  • Using MySQL with REST API
  • CORS
  • Project 1

Dev Ops

  • שלום Docker
  • Containers
  • Images
  • Start & Stop
  • Docker Layers
  • yaml
  • Docker Compose
  • Volumes
  • Error Handling
  • Hot Reloading
  • Anonymous volume
  • Packing Full System
  • Introduction to AWS
  • Setting up AWS Account and IAM
  • AWS EC2 (Elastic Compute Cloud)
  • AWS S3 (Simple Storage Service)
  • AWS RDS (Relational Database Service)
  • AWS Lambda
  • AWS API Gateway
  • AWS Elastic Beanstalk
  • AWS CloudFormation
  • AWS DevOps Tools

טפסים ב-HTML

טפסים ב-HTML

טפסים נועדו על מנת לאסוף מידע מהמשתמש.

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

דוגמה: ניוזטלר – מועדון לקוחות

דוגמה נוספת: טופס התחברות למערכת

על מנת להגדיר טופס ב-HTML נשתמש בתגית <form>

				
					<form>
            	Form elements..
</form>

לטפסים ב-HTML יש מספר אלמנטים שניתן להוסיף.

האלמנט השימושי ביותר נקרא <input>

לכל תגית <input> יש תכונה שנקראת type והיא מגדירה לנו את סוג השדה שהגדרנו.

 

שדה טקסט

השדה הפשוט ביותר נקרא שדה text זה שדה שמאפשר למשתמש להכניס טקסט כלשהו.

נגדיר שדה טקסט באופן הבא:

				
					<input type="text">

לכל שדה בטופס נגיד תגית <label> היא תעזור לנו לשלוף את הנתונים מהטופס בצורה מסודרת וגם היא תציג למשתמש מה להכניס בכל שדה ושדה.

לכל תגית label נוסיף מאפיין / תכונה שנקרא for, המאפיין הזה ישויך לשדה שיצרנו בעזרת ה- ID של השדה.

שימו לב – הערך ב- for ושם ה-ID של השדה צריכים להיות זהים.

 

שדה בחירה – Radio

שדה שימושי נוסף נקרא בשם "radio".

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

על מנת שבאמת יהיה ניתן לבחור אופציה אחת מבין האופציות שהגדרנו, נוסיף לכל שדה radio את המאפיין name, מאפיין זה מגדיר לטופס HTML אילו אופציות של radio  מוגדרות תחת מקשה אחת. זה אומר שברגע שנבחר אופציה אחת מבין האופציות הקיימות, "תתבטל" האופציה הקודמת שבחרנו והחדשה תיבחר.

נגדיר שדה Radio באופן הבא (על שפות תכנות):

				
					<input type="radio" value="html" name="favorite-languages">
<input type="radio" value="css" name="favorite-languages">

שדה תיבת בחירה – Checkbox

שדה המציג מספר אופציות ומאפשר בחירה מרובה של אפשרויות.

לשדה הנ"ל נגדיר name שונה לכל אחת מהאופציות.

נגדיר שדה תיבת בחירה באופן הבא:

				
					<input type="checkbox" id="bmw" value="bmw" name="fav-car-1">

שדה בחירה – Select

זה שדה בחירה שמאפשר לבחור אופציה אחת רק שהאופציות מוצגות בתפריט נפתח (dropdown).

				
					<select>
            	<option> Option #1 </option>
            	<option> Option #2 </option>
</select>

שדה סיסמה – password:

כל הערכים שנכניס בשדה זה יהיו מוסתרים (כמו סיסמה) נגדיר שדה זה באופן הבא:

				
					<input type="password" ... >

אזור טקסט – textarea

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

נגדיר שדה זה באופן הבא:

				
					<textarea rows="5" cols="30" placeholder="write us something"></textarea>

שדה תאריך – date

על מנת להגדיר שדה תאריך נשתמש ב-type מסוג date באופן הבא:

				
					<input type="date">

יכול לקבל גם ערך של מינימום ומקסימום.

 

שדה מספרי בלבד  – number

שדה זה מאפשר להכניס אך ורק מספרים, נגדיר שדה זה באופן הבא:

				
					<input type="number" min="0" max="100">

לשדה זה הגדרנו מינימום ומקסימום ערכים.

 

 

כפתורים בטפסים –  Form Buttons

יש לנו 2 כפתורים עיקריים בטפסים.

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

נגדיר כפתור איפוס באופן הבא:

				
					<input type="reset" value="clean my form">

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

				
					<input type="submit" value="Send us request">

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

על מנת להגדיר לאן הטופס יפנה בעת לחיצה, נשתמש במאפיין שנקרא action, אותו נוסיף לתגית הטופס הראשית (form)

נניח כי לאחר שהמשתמש מילא את הפרטים שאותם אנחנו רוצים, נפנה אותו "לדף תודה" כלשהו.

אז איך נבצע זאת?

–          ניצור דף HTML נוסף בפרויקט שלנו ונקרא לו לצורך הדוגמה "thank-you-page.html"

–          נכניס כותרת תודה בדף

–          נוסיף לטופס שלנו את ה-action המדובר עם הכתובת של הדף החדש שיצרנו באופן הבא:

				
					<form action="thank-you-page.html">
Form elements
</form>

Label & Name

התגית <label> מסמלת לנו תווית לשדה מסוים.

לחיצה על התגית מדמה לחיצה על השדה הנדרש.

לתגית <label> יש מאפיין שנקרא for והוא חייב להיות זהה ל-id של השדה לו התווית שייכת. 

בעזרת כך, השדה והתווית נעטפים יחד.

				
					תיקון

מאפיין NAME

כל שדה צריך שיהיה לו מאפיין בשם name

אם ה-name לא קיים, הערך בשדה לא ישלח – דוגמה לטופס שלא יישלח:

				
					תיקון

מאפיין Value

המאפיין Value מציין ערך של שדה מסוים בטופס.

למאפיין זה שימושים שונים:

– לכפתורים (button, reset, submit) – זה קובע את הטקסט בתוך הכפתור

– לשדות – (text, password, hidden) – זה קובע את ערך ברירת מחדל

– לשדות (checkbox, radio, image) – זה ערך שנלווה עם השדה וגם הערך שנקבל שהשדה נשלח

 

 

מאפיינים לשדות

  1. Value הוזכר לעיל
  2. Readonly – המשתמש יכול להעתיק את הטקסט או לסמן אותו אך לא לשנות את הערך בשדה. הערך בשדה יישלח עם שליחת הטופס.
  3. Disabled – לא נגיש
  4. Max – ערך מקסימלי לשדה מספר
  5. Min – מינימום
  6. Maxlength – מקסימום תווים
  7. Required – שדה חובה
  8. Size – רוחב השדה 
  9. Checked – שדה מסומן
  10. Placeholder 
  11. Autofocus 
  12. Pattern – תבנית מוגדרת לשדה (ביטוי רגולרי) (ספרה אחת מ0-5 + "-" ביניהם + ספרה שניה מ5-10)

 

 

מאפיינים לטופס

  1. Action
  2. Autocomplete
  3. Target
  4. novalidate
  5. Method   
 
 
 
 
 
 

הישארו מעודכנים

הירשמו לקבלת תוכן איכותי

מעוניין/ת לשמוע עוד באופן פרטי? נשמח לעזור !

השאירו פרטים בתיבה ונחזור אליכם בהקדם!