טופס בריאקט - React Forms
h2 עם הטקסט Add Product, ומתחתיה form.autoFocus, כך שהסמן מופיע בתיבה ברגע שהטופס עולה.number. במחיר מוסיפים step של 0.01, כדי לאפשר נקודה עשרונית עם עד שתי ספרות. במלאי, שהוא מספר שלם, מורידים את ה-step.file עם accept של image/*. כך אפשר לבחור רק תמונות, ולא קבצי Word, טקסט או PDF. אפשר גם להגביל לסוג מסוים, למשל jpeg.box-sizing של border-box ו-margin. הכפתורים מקבלים רוחב של 50%. הכותרת ממורכזת עם text-align: center.useHistory. ב-onClick של Cancel מפנים בעזרת אובייקט ה-history אל products, בלי פונקציה נפרדת.פרקי ההרצאה: טופס בריאקט - React Forms
תמלול ההרצאה: טופס בריאקט - React Forms
הטקסט המלא של הדקות הראשונות בהרצאה «טופס בריאקט - React Forms» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הדבר הבא שאנחנו רוצים לעשות זה לבנות לעצמנו את הטופס. בואו נגיד שיש לנו פה איזושהי כותרת האמת, נגדיר את זה כ-H2, שאומרת Add Product, ויש לנו כאן טופס, פורם, איזה תיבות אנחנו רוצים עבור הטופס שלנו.
אז בואו נתחיל עם שם של המוצר שאנחנו רוצים לקלוט, וזאת תהיה תיבת input, טקסט ובוא נגיד שאנחנו רוצים שהדבר הזה יהיה אוטו פוקוס זאת אומרת איך שהטופס עולה כבר הסמן מופיע בתיבה.
הדבר הבא שאנחנו מוצאים זה את המחיר יש לנו פה תיבת input יש לנו type הפעם הוא יהיה number וניתן לו גם step 0.01 זה אומר שניתן להכניס גם נקודה עשרונית עד שתי ספרות אחרי הנקודה.
בואו נשכפל את זה לדבר הבא של כל מוצר וזה כמה יש לנו במלאי. זה מספר שלם, אז אני מוריד את ה-step ויש לנו גם תמונה. אז בואו נגיד שיש לנו פה Label של האימג' של אותו מוצר וזה יהיה input type, תמונה זה פייל.
בואו נגיד שיש לנו accept רק image/*. אז זה בעצם אומר שהוא מוכן לקבל רק תמונות ולא נניח קבצי וורד או קבצי טקסט או PDFים או כל דבר אחר, רק תמונות. אם היינו רוצים לקבל תמונה מסוג מסוים, אז היינו יכולים להגיד נקודה jpeg או נקודת jpeg.png.gif ואז הוא היה מקבל את כל החברה האלה.
אבל אם אנחנו אומרים לו image slash כוכבית, זה אומר, תשמע, כל תמונה תאפשר ליוזר לקחת. אנחנו רוצים לחצן שכתוב עליו Add, ואנחנו רוצים עוד לחצן שכתוב עליו Cancel, אם היוזר מתחרט ורוצה לחזור בחזרה.
והטופס הזה, כמובן, אין לו כרגע עיצוב, אז הוא לא נראה הכי טוב. בואו נראה רגע מה אנחנו רואים. אנחנו רואים את הכל בשורה אחת. אז בואו נוסיף לזה CSS, נשים רגע את ה-CSS פה בצד, ומה שאנחנו רוצים זה להגיד כזה דבר.
עבור הפורם בואו ניתן לו איזה וויד 250 פיקסלים. בוא נראה אם הוא תפס את זה, סוג של. אולי ניתן לו נקודה בוקס, לא ממש עוזר לנו. ומה שאנחנו רוצים זה add product input.
עבור כל תיבת input אנחנו רוצים שהיא תתפוס 100%, לוק סייזינג בורדר וניתן לה מרג'ין למעלה