آموزش ساخت فرم های عالی با HTML و CSS

خوش آمدی Welcome

• فرم های خود را عالی می کنید Making your forms great

• آنچه شما باید بدانید What you should know

• با استفاده از فایل های تمرین Using the exercise files

1. تنظیم فرم عمومی 1. General Form Setup

• نحوه کار فرم های HTML How HTML forms work

• راه اندازی اولیه برای یک فرم Basic setup for a form

• روش های GET و POST GET and POST methods

2. عناصر فرم 2. Form Elements

• مجموعه های میدانی و افسانه ها Fieldsets and legends

• کار با برچسب ها Working with labels

• تگ های فرم جدید HTML5 New HTML5 form tags

• انواع ورودی جدید New input types

• ویژگی های ورودی جدید New input attributes

• ویژگی های ورودی بیشتر More input attributes

• گزینه های تأیید فرم Form validate options

• محدودیت های ورودی: الگو Input restrictions: Pattern

• دکمه ها Buttons

• تکمیل خودکار Autocomplete

3. CSS خاص فرم 3. Form-Specific CSS

• نکات چیدمان فرم Form layout tips

• برچسب‌ها و ورودی‌های یک ظاهر طراحی شده Styling labels and inputs

• سبک های تمرکز Focus styles

• استفاده از شبه کلاس ها برای مشخص شدن بیشتر Using pseudo-classes to be more specific

• چک باکس های سفارشی Custom checkboxes

• دکمه های رادیویی Radio buttons

• سوئیچ را تغییر دهید Toggle switch

• انتخاب استایل، قسمت 1 Styling select, part 1

• انتخاب استایل، قسمت 2 Styling select, part 2

• برچسب های شناور Float labels

4. فرم ورود و ثبت نام 4. Login and Registration Form

• فرآیند ثبت نام The registration process

• نمودار جریان فرم ورود و صفحه فرود Login form flow chart and landing page

• ساخت صفحه ورود Building the login page

• قابلیت مشاهده رمز عبور Password visibility

• یک فرم ثبت نام بسازید و سبک کنید Build and style a sign-up form

• برای اطلاعات بیشتر از راهنمای ابزار استفاده کنید Using tooltips for more information

• قدرت رمز عبور Password strength

• خلاصه فرم ورود و ثبت نام Login and registration form summary

5. فرم رزرو: پرواز، هتل، فیلم و موارد دیگر 5. A Booking Form: Flight, Hotel, Movie, and More

• فرم رزرو چیست؟ What is a booking form?

• ایجاد دکمه های رادیویی سفارشی Creating custom radio buttons

• انتخاب ها Making selections

• خرما و انتخاب کنندگان تاریخ Dates and date pickers

• با استفاده از کامپوننت استپر Using the stepper component

• رفع فرم رزرو برای موبایل Booking form fix for mobile

• خلاصه فرم رزرو Booking form summary

6. فرم های پرداخت 6. Payment Forms

• سازماندهی فرم پرداخت Organizing a payment form

• جریان و نظم Flow and order

• خلاصه سفارش Order summary overview

• خلاصه اطلاعات شخصی Personal details summary

• پله پرداخت Payment stepper

• ماسک ورودی Input mask

• شهر و ایالت پرجمعیت خودکار Auto-populating city and state

• حمل دریایی Shipping

• رسیدگی به پرداخت، قسمت 1 Handling payment, part 1

• رسیدگی به پرداخت، قسمت 2 Handling payment, part 2

• رسیدگی به پرداخت، قسمت 3 Handling payment, part 3

• بررسی و تایید صفحات Review and confirmation pages

7. فرم جستجو و فیلتر کردن فرم ها 7. Search Form and Filter Forms

• فرم های جستجو: آنها چه هستند؟ Search forms: What are they?

• نکاتی برای افزودن جستجو Tips for adding search

• یک جزء جستجو را اضافه کنید و به آن استایل دهید Add and style a search component

• یک نوار جستجو در حال رشد بسازید Build a growing search bar

• تعمیر صفحه لمسی Touchscreen fix

• تعمیر موبایل Mobile fix

• نمایش نتایج جستجو Displaying search results

8. قابلیت دسترسی 8. Accessibility

• قابلیت دسترسی به فرم Form accessibility

• برچسب زدن و توصیف با ARIA Labeling and describing with ARIA

• با استفاده از ARIA Using ARIA

9. تسلیم 9. Submission

• اعتبار سنجی فرم سمت مشتری Client-side form validation

• اعتبار سنجی CSS CSS validation

• اعتبار سنجی جاوا اسکریپت JavaScript validation

• پیام های خطای خوب Good error messages

• صفحه موفقیت Success page

نتیجه Conclusion

• مراحل بعدی Next steps