آموزش *جدید* فرم های وب - 2023 ساخت و استاد فرم های وب

سرفصل ها و درس ها

معرفی Introduction

• معرفی Introduction

• فرم های وب چگونه ایجاد می شوند؟ How are web forms created?

• چرا باید فرم وب خود را در یک عنصر <form> قرار دهیم Why do we need to wrap our web form in a <form> element

• فرم های وب - حقایق Web Forms - facts

• جمع بندی سریع در فرم های وب Quick recap on web forms

• معرفی پروژه - بیایید یک فرم وب بسازیم Project intro - let's build a web form

• هدر نمایه - تنظیم آن Profile header - setting it up

• سرصفحه نمایه - تکمیل آن Profile header - finishing it off

• ایجاد اولین ویجت فرم وب ما <ورودی> Creating our first web form widget <input>

• کمی اطلاعات بیشتر در مورد عنصر <input> A little more info about the <input> element

• سبک دادن به ویجت <input> ما Styling our <input> widget

• ایجاد ویجت ایمیل Creating an email widget

• معرفی دکمه های رادیویی Intro to radio buttons

• ساخت دکمه رادیویی ما Building our radio button

• یک قدم به عقب برگردید: دکمه های رادیویی Take a step back: radio buttons

• حالت دادن به دکمه رادیویی ما Styling our radio button

• خلاصه در دکمه های رادیویی Summary on radio buttons

• افزودن یک منوی کشویی به فرم وب ما Adding a dropdown menu to our web form

• افزودن یک ویجت textarea به فرم وب ما Adding a textarea widget to our web form

• افزودن یک چک باکس به فرم وب ما Adding a checkbox to our web form

• افزودن دکمه ارسال به فرم وب ما Adding a submit button to our web form

• هنگام ارسال فرم چه اتفاقی می افتد؟ What happens when you submit a form?

• یک کلمه کوتاه در مورد ویژگی های ACTION و METHOD A quick word on the ACTION and METHOD attributes

• خلاصه کل بخش Recap of entire section

• اصول طراحی فرم وب Fundamentals of web form design

• Outro Outro

• آزمون: مبانی فرم وب Quiz: Web Form Fundamentals

معرفی Introduction

• معرفی Introduction

• فرم های وب چگونه ایجاد می شوند؟ How are web forms created?

• چرا باید فرم وب خود را در یک عنصر <form> قرار دهیم Why do we need to wrap our web form in a <form> element

• فرم های وب - حقایق Web Forms - facts

• جمع بندی سریع در فرم های وب Quick recap on web forms

• معرفی پروژه - بیایید یک فرم وب بسازیم Project intro - let's build a web form

• هدر نمایه - تنظیم آن Profile header - setting it up

• سرصفحه نمایه - تکمیل آن Profile header - finishing it off

• ایجاد اولین ویجت فرم وب ما <ورودی> Creating our first web form widget <input>

• کمی اطلاعات بیشتر در مورد عنصر <input> A little more info about the <input> element

• سبک دادن به ویجت <input> ما Styling our <input> widget

• ایجاد ویجت ایمیل Creating an email widget

• معرفی دکمه های رادیویی Intro to radio buttons

• ساخت دکمه رادیویی ما Building our radio button

• یک قدم به عقب برگردید: دکمه های رادیویی Take a step back: radio buttons

• حالت دادن به دکمه رادیویی ما Styling our radio button

• خلاصه در دکمه های رادیویی Summary on radio buttons

• افزودن یک منوی کشویی به فرم وب ما Adding a dropdown menu to our web form

• افزودن یک ویجت textarea به فرم وب ما Adding a textarea widget to our web form

• افزودن یک چک باکس به فرم وب ما Adding a checkbox to our web form

• افزودن دکمه ارسال به فرم وب ما Adding a submit button to our web form

• هنگام ارسال فرم چه اتفاقی می افتد؟ What happens when you submit a form?

• یک کلمه کوتاه در مورد ویژگی های ACTION و METHOD A quick word on the ACTION and METHOD attributes

• خلاصه کل بخش Recap of entire section

• اصول طراحی فرم وب Fundamentals of web form design

• Outro Outro

• آزمون: مبانی فرم وب Quiz: Web Form Fundamentals

عنصر <form> The <form> element

• معرفی بخش - جدول در مقابل فرم وب Section introduction - Table vs Web Form

• عنصر <form> The <form> element

• ویژگی ها در <form> Attributes on the <form>

• چرا دانستن ویژگی های <form> مهم است؟ Why is knowing about the <form> attributes important?

• ویژگی: پذیرش-شخصیت (ISO و ASCII) Attribute: accept-charset (ISO and ASCII)

• ویژگی: پذیرش-شخصیت (UTF) Attribute: accept-charset (UTF)

• خلاصه ای از صفت پذیرش-شخصیت Summary of the accept-charset attribute

• یک قدم به عقب برگردید: پذیرش-مجموعه حروف Take a step back: accept-charset

• اگر از یک کاراکتر خارج از نوع رمزگذاری مشخص شده استفاده کنید چه اتفاقی می افتد؟ What happens if you use a character outside of the specified encoding type?

• مثال تتا - رمزگذاری URL (بخش 1 از 3) Theta Example - URL Encoding (Part 1 of 3)

• مثال تتا - منابع نویسه های عددی (بخش 2 از 3) Theta Example - Numerical Character References (Part 2 of 3)

• مثال تتا - سرورها هگز را درک می کنند (بخش 3 از 3) Theta Example - Servers Understand Hex (Part 3 of 3)

• ویژگی نام Name attribute

• صفت را بپذیر Accept attribute

• ویژگی عمل Action attribute

• مثال ویژگی اکشن - نمونه جلویی Action attribute example - front end example

• مثال ویژگی عملکرد - مقدمه URLSearchParams() Action attribute example - intro to URLSearchParams()

• مثال ویژگی اکشن - پویا کردن فرم ما Action attribute example - making our form dynamic

• ویژگی روش - GET Method attribute - GET

• ویژگی روش - POST Method attribute - POST

• GET در مقابل POST GET vs POST

• HTTP در مقابل HTML در مورد انواع روش HTTP vs HTML when it comes to METHOD types

• خلاصه: چرا یک فرم HTML فقط به GET و POST اجازه می دهد Recap: why does an HTML form only allow GET and POST

• روش GET GET method

• روش POST POST method

• مشاهده سرصفحه و اطلاعات بدنه درخواست HTTP Viewing HTTP request header and body information

• تصاویر چگونه از طریق اینترنت ارسال می شوند؟ How are images sent over the internet?

• صفت Enctype - مقدمه Enctype attribute - introduction

• ویژگی Enctype - GET مثال Enctype attribute - GET example

• ویژگی Enctype - POST Enctype attribute - POST

• جمع بندی سریع Quick recap

• صفت Enctype - مرز چیست؟ Enctype attribute - what is boundary?

• کلمه سریع در GET، POST، Enctype و Forms Quick word on GET, POST, Enctype and Forms

• اطلاعات بیشتر در مورد مرز (پیشرفته) More on the Boundary (advanced)

• مثال Enctype - راه اندازی HTML Enctype example - setting up HTML

• مثال Enctype - راه اندازی یک سرور Node.js Enctype example - setting up a Node.js server

• مثال Enctype - تجزیه و تحلیل چند قسمتی در مقابل برنامه/x-www-form-urlencoded Enctype example - analysis of multipart vs application/x-www-form-urlencoded

• Enctype - یک قدم به عقب بردارید Enctype - take a step back

• ارسال فایل ها به صورت وب Submitting files in a web form

• ویژگی REL REL attribute

• کمی بیشتر در مورد rel="noopener" A little more on rel="noopener"

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

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

• تکمیل خودکار - خلاصه Autocomplete - summary

• novalidate - معرفی ویژگی novalidate - attribute introduction

• اعتبار بخشیدن - مثال novalidate - example

• معرفی ویژگی هدف Target attribute introduction

• هدف - مثال Target - example

• خلاصه ای از بسته بندی <form> Summary of the <form> wrapper

• Outro Outro

• امتحان: <فرم> Quiz: <form>

عنصر <form> The <form> element

• معرفی بخش - جدول در مقابل فرم وب Section introduction - Table vs Web Form

• عنصر <form> The <form> element

• ویژگی ها در <form> Attributes on the <form>

• چرا دانستن ویژگی های <form> مهم است؟ Why is knowing about the <form> attributes important?

• ویژگی: پذیرش-شخصیت (ISO و ASCII) Attribute: accept-charset (ISO and ASCII)

• ویژگی: پذیرش-شخصیت (UTF) Attribute: accept-charset (UTF)

• خلاصه ای از صفت پذیرش-شخصیت Summary of the accept-charset attribute

• یک قدم به عقب برگردید: پذیرش-مجموعه حروف Take a step back: accept-charset

• اگر از یک کاراکتر خارج از نوع رمزگذاری مشخص شده استفاده کنید چه اتفاقی می افتد؟ What happens if you use a character outside of the specified encoding type?

• مثال تتا - رمزگذاری URL (بخش 1 از 3) Theta Example - URL Encoding (Part 1 of 3)

• مثال تتا - منابع نویسه های عددی (بخش 2 از 3) Theta Example - Numerical Character References (Part 2 of 3)

• مثال تتا - سرورها هگز را درک می کنند (بخش 3 از 3) Theta Example - Servers Understand Hex (Part 3 of 3)

• ویژگی نام Name attribute

• صفت را بپذیر Accept attribute

• ویژگی عمل Action attribute

• مثال ویژگی اکشن - نمونه جلویی Action attribute example - front end example

• مثال ویژگی عملکرد - مقدمه URLSearchParams() Action attribute example - intro to URLSearchParams()

• مثال ویژگی اکشن - پویا کردن فرم ما Action attribute example - making our form dynamic

• ویژگی روش - GET Method attribute - GET

• ویژگی روش - POST Method attribute - POST

• GET در مقابل POST GET vs POST

• HTTP در مقابل HTML در مورد انواع روش HTTP vs HTML when it comes to METHOD types

• خلاصه: چرا یک فرم HTML فقط به GET و POST اجازه می دهد Recap: why does an HTML form only allow GET and POST

• روش GET GET method

• روش POST POST method

• مشاهده سرصفحه و اطلاعات بدنه درخواست HTTP Viewing HTTP request header and body information

• تصاویر چگونه از طریق اینترنت ارسال می شوند؟ How are images sent over the internet?

• صفت Enctype - مقدمه Enctype attribute - introduction

• ویژگی Enctype - GET مثال Enctype attribute - GET example

• ویژگی Enctype - POST Enctype attribute - POST

• جمع بندی سریع Quick recap

• صفت Enctype - مرز چیست؟ Enctype attribute - what is boundary?

• کلمه سریع در GET، POST، Enctype و Forms Quick word on GET, POST, Enctype and Forms

• اطلاعات بیشتر در مورد مرز (پیشرفته) More on the Boundary (advanced)

• مثال Enctype - راه اندازی HTML Enctype example - setting up HTML

• مثال Enctype - راه اندازی یک سرور Node.js Enctype example - setting up a Node.js server

• مثال Enctype - تجزیه و تحلیل چند قسمتی در مقابل برنامه/x-www-form-urlencoded Enctype example - analysis of multipart vs application/x-www-form-urlencoded

• Enctype - یک قدم به عقب بردارید Enctype - take a step back

• ارسال فایل ها به صورت وب Submitting files in a web form

• ویژگی REL REL attribute

• کمی بیشتر در مورد rel="noopener" A little more on rel="noopener"

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

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

• تکمیل خودکار - خلاصه Autocomplete - summary

• novalidate - معرفی ویژگی novalidate - attribute introduction

• اعتبار بخشیدن - مثال novalidate - example

• معرفی ویژگی هدف Target attribute introduction

• هدف - مثال Target - example

• خلاصه ای از بسته بندی <form> Summary of the <form> wrapper

• Outro Outro

• امتحان: <فرم> Quiz: <form>

رمزگذاری URL URL Encoding

• رمزگذاری URL - مقدمه URL Encoding - Introduction

• تعریف رمزگذاری URL Definition of URL encoding

• چرا شخصیت های بین المللی را می بینیم؟ Why do we see international characters?

• کمی در مورد URL ها A little about URLs

• URL چیست What is a URL

• درک هگز Understanding hex

• کمی بیشتر در مورد اینکه چرا از هگز استفاده می کنیم A little more about why we use hex

• رمزگذاری URL چگونه کار می کند؟ How does URL encoding work?

• رمزگذاری URL - خلاصه سطح بالا URL encoding - high level summary

• شخصیت های بین المللی International characters

• کاراکترهای بین المللی (RFC 3986 در مقابل RFC 3987) International characters (RFC 3986 vs RFC 3987)

• URL مرورگر شما چگونه فضاها را رمزگذاری می کند؟ How does your browser URL encode spaces?

• رمزگذاری سفارشی با جاوا اسکریپت - مثال Custom encoding with JavaScript - example

• encodeURIcomponent() - آخرین کلمات encodeURIComponent() - last words

• امتحان: رمزگذاری URL Quiz: URL Encoding

رمزگذاری URL URL Encoding

• رمزگذاری URL - مقدمه URL Encoding - Introduction

• تعریف رمزگذاری URL Definition of URL encoding

• چرا شخصیت های بین المللی را می بینیم؟ Why do we see international characters?

• کمی در مورد URL ها A little about URLs

• URL چیست What is a URL

• درک هگز Understanding hex

• کمی بیشتر در مورد اینکه چرا از هگز استفاده می کنیم A little more about why we use hex

• رمزگذاری URL چگونه کار می کند؟ How does URL encoding work?

• رمزگذاری URL - خلاصه سطح بالا URL encoding - high level summary

• شخصیت های بین المللی International characters

• کاراکترهای بین المللی (RFC 3986 در مقابل RFC 3987) International characters (RFC 3986 vs RFC 3987)

• URL مرورگر شما چگونه فضاها را رمزگذاری می کند؟ How does your browser URL encode spaces?

• رمزگذاری سفارشی با جاوا اسکریپت - مثال Custom encoding with JavaScript - example

• encodeURIcomponent() - آخرین کلمات encodeURIComponent() - last words

• امتحان: رمزگذاری URL Quiz: URL Encoding

3 عنصر مهم فرم وب: مجموعه فیلدها، ورودی های متن و برچسب ها The 3 most important web form elements: fieldset, text inputs and labels

• ساختار یک فرم وب The structure of a web form

• <fieldset> - مقدمه <fieldset> - introduction

• <فیلدست> - مثالها <fieldset> - examples

• <fieldset> - ویژگی ها <fieldset> - attributes

• <fieldset> - با استفاده از ویژگی form <fieldset> - using the form attribute

• استفاده از ویژگی form برای اهداف استایل با استفاده از HTMLFormElement.elements Using the form attribute for styling purposes using HTMLFormElement.elements

• آفرین Well done

• عنصر <input> مانند یک آهک است The <input> element is like a lime

• لیموها و <ورودی ها> Limes and <inputs>

• عنصر <input> از کجا می آید؟ Where does the <input> element come from?

• <input type="text"> - ویژگی های رایج و مقدمه <input type="text"> - common attributes and introduction

• کلمه سریع در <ورودی> Quick word on <input>

• <input type="text"> - ویژگی و ویژگی ارزش را بررسی کنید <input type="text"> - spellcheck attribute and value property

• تکلیف - معرفی فرم وب Assignment - web form introduction

• تکلیف - راه حل (بدون CSS) Assignment - solution (without CSS)

• تکلیف - راه حل (با CSS) Assignment - solution (with CSS)

• ویژگی برچسب Label attribute

• مهمترین عنصر <ورودی> The most important <input> element

• اضافه کردن مقداری عنوان و یک ظاهر طراحی شده Adding some heading and styling

• 3 ویجت رایجی که خواهید دید The 3 most common widgets you'll see

3 عنصر مهم فرم وب: مجموعه فیلدها، ورودی های متن و برچسب ها The 3 most important web form elements: fieldset, text inputs and labels

• ساختار یک فرم وب The structure of a web form

• <fieldset> - مقدمه <fieldset> - introduction

• <فیلدست> - مثالها <fieldset> - examples

• <fieldset> - ویژگی ها <fieldset> - attributes

• <fieldset> - با استفاده از ویژگی form <fieldset> - using the form attribute

• استفاده از ویژگی form برای اهداف استایل با استفاده از HTMLFormElement.elements Using the form attribute for styling purposes using HTMLFormElement.elements

• آفرین Well done

• عنصر <input> مانند یک آهک است The <input> element is like a lime

• لیموها و <ورودی ها> Limes and <inputs>

• عنصر <input> از کجا می آید؟ Where does the <input> element come from?

• <input type="text"> - ویژگی های رایج و مقدمه <input type="text"> - common attributes and introduction

• کلمه سریع در <ورودی> Quick word on <input>

• <input type="text"> - ویژگی و ویژگی ارزش را بررسی کنید <input type="text"> - spellcheck attribute and value property

• تکلیف - معرفی فرم وب Assignment - web form introduction

• تکلیف - راه حل (بدون CSS) Assignment - solution (without CSS)

• تکلیف - راه حل (با CSS) Assignment - solution (with CSS)

• ویژگی برچسب Label attribute

• مهمترین عنصر <ورودی> The most important <input> element

• اضافه کردن مقداری عنوان و یک ظاهر طراحی شده Adding some heading and styling

• 3 ویجت رایجی که خواهید دید The 3 most common widgets you'll see

انواع <ورودی> اصلی Original <input> types

• انواع <ورودی> اصلی چیست؟ What are the original <input> types

• ادامه بده! فرم های وب عالی هستند! Keep going! Web Forms are Awesome!

• نوع ورودی = رمز عبور Input type=password

• با استفاده از الگو، عنوان و ویژگی مورد نیاز با نوع رمز عبور Using the pattern, title and required attribute with the password type

• رمز عبور به ما در زمینه امنیت کمک نمی کند Password does not help us with security

• کلمه سریع در مورد ویژگی الگو Quick word about the pattern attribute

• عبارات منظم - مقدمه Regular Expressions - introduction

• نوع ورودی = پنهان Input type=hidden

• URLSearchParams() - مقدمه URLSearchParams() - introduction

• نوع ورودی مخفی و پایگاه داده Hidden input type and databases

• خلاصه ای از فیلدهای ورودی پنهان Summary of hidden input fields

• ارسال مهر زمانی با <input type="hidden"> Submitting a timestamp with <input type="hidden">

• مثالی از اینکه چرا یک ورودی پنهان ممکن است ایمن نباشد Example of why a hidden input may not be safe

• دکمه ها - دو راه برای ایجاد دکمه ها Buttons - two ways to create buttons

• استفاده از ویژگی های جدید در دکمه ها و تفاوت بین <button> و <input> Using new attributes on buttons, and the difference between <button> and <input>

• انواع مختلف دکمه - مثال سرگرم کننده Different button types - fun example

• موارد قابل بررسی Checkable items

• چک باکس Checkbox

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

• لیست دکمه های رادیویی از پیش تعریف شده است The radio button list is pre-defined

• :کلاس شبه بررسی شد :checked pseudo class

• چالش چک باکس - مقدمه Checkbox Challenge - intro

• چالش چک باکس - راه حل Checkbox Challenge - solution

• چالش چک باکس - راه حل با علامت چک Checkbox Challenge - solution with check mark

• نوع تصویر Image type

• نوع تصویر - نمونه نقشه حرارتی Image type - heatmap example

• نوع فایل File type

• نوع فایل - نحوه استایل دادن به آن File type - how to style it

• نوع فایل - استفاده از جاوا اسکریپت برای بهبود رابط کاربری File type - using JavaScript to improve UI

• Outro Outro

• انواع ورودی اصلی Original Input Types

انواع <ورودی> اصلی Original <input> types

• انواع <ورودی> اصلی چیست؟ What are the original <input> types

• ادامه بده! فرم های وب عالی هستند! Keep going! Web Forms are Awesome!

• نوع ورودی = رمز عبور Input type=password

• با استفاده از الگو، عنوان و ویژگی مورد نیاز با نوع رمز عبور Using the pattern, title and required attribute with the password type

• رمز عبور به ما در زمینه امنیت کمک نمی کند Password does not help us with security

• کلمه سریع در مورد ویژگی الگو Quick word about the pattern attribute

• عبارات منظم - مقدمه Regular Expressions - introduction

• نوع ورودی = پنهان Input type=hidden

• URLSearchParams() - مقدمه URLSearchParams() - introduction

• نوع ورودی مخفی و پایگاه داده Hidden input type and databases

• خلاصه ای از فیلدهای ورودی پنهان Summary of hidden input fields

• ارسال مهر زمانی با <input type="hidden"> Submitting a timestamp with <input type="hidden">

• مثالی از اینکه چرا یک ورودی پنهان ممکن است ایمن نباشد Example of why a hidden input may not be safe

• دکمه ها - دو راه برای ایجاد دکمه ها Buttons - two ways to create buttons

• استفاده از ویژگی های جدید در دکمه ها و تفاوت بین <button> و <input> Using new attributes on buttons, and the difference between <button> and <input>

• انواع مختلف دکمه - مثال سرگرم کننده Different button types - fun example

• موارد قابل بررسی Checkable items

• چک باکس Checkbox

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

• لیست دکمه های رادیویی از پیش تعریف شده است The radio button list is pre-defined

• :کلاس شبه بررسی شد :checked pseudo class

• چالش چک باکس - مقدمه Checkbox Challenge - intro

• چالش چک باکس - راه حل Checkbox Challenge - solution

• چالش چک باکس - راه حل با علامت چک Checkbox Challenge - solution with check mark

• نوع تصویر Image type

• نوع تصویر - نمونه نقشه حرارتی Image type - heatmap example

• نوع فایل File type

• نوع فایل - نحوه استایل دادن به آن File type - how to style it

• نوع فایل - استفاده از جاوا اسکریپت برای بهبود رابط کاربری File type - using JavaScript to improve UI

• Outro Outro

• انواع ورودی اصلی Original Input Types

انواع جدیدتر <input> Newer <input> types

• انواع ورودی جدیدتر - سطح بالا Newer input types - high level

• نوع ایمیل - مقدمه Email type - introduction

• نوع ایمیل - اعتبارسنجی و مزایا Email type - validation and benefits

• نوع جستجو - مقدمه Search type - intro

• نوع جستجو - یک ظاهر طراحی با CSS Search type - styling with CSS

• نوع جستجو - کلاس های شبه و شبه عناصر Search type - pseudo classes and pseudo elements

• نوع تلفن Tel type

• نوع آدرس اینترنتی Url type

• 2 رایج ترین رویدادهایی که اخراج می شوند 2 most common events that are fired

• نوع شماره Number type

• به عقب برگرد Step back

• نوع محدوده Range type

• استفاده از جاوا اسکریپت برای نمایش مقادیر محدوده پویا Using JavaScript to display dynamic range values

• انتخابگرهای تاریخ و زمان Date and time pickers

• نوع تاریخ - مثال Date type - example

• کلمه سریع در تاریخ-محلی Quick word on datetime-local

• نوع رنگ Color type

• ویژگی های رایجی که در ویجت های فرم پیدا خواهید کرد Common attributes you'll find on form widgets

• مبانی فرم Form Fundamentals

• انواع ورودی جدیدتر Newer input types

انواع جدیدتر <input> Newer <input> types

• انواع ورودی جدیدتر - سطح بالا Newer input types - high level

• نوع ایمیل - مقدمه Email type - introduction

• نوع ایمیل - اعتبارسنجی و مزایا Email type - validation and benefits

• نوع جستجو - مقدمه Search type - intro

• نوع جستجو - یک ظاهر طراحی با CSS Search type - styling with CSS

• نوع جستجو - کلاس های شبه و شبه عناصر Search type - pseudo classes and pseudo elements

• نوع تلفن Tel type

• نوع آدرس اینترنتی Url type

• 2 رایج ترین رویدادهایی که اخراج می شوند 2 most common events that are fired

• نوع شماره Number type

• به عقب برگرد Step back

• نوع محدوده Range type

• استفاده از جاوا اسکریپت برای نمایش مقادیر محدوده پویا Using JavaScript to display dynamic range values

• انتخابگرهای تاریخ و زمان Date and time pickers

• نوع تاریخ - مثال Date type - example

• کلمه سریع در تاریخ-محلی Quick word on datetime-local

• نوع رنگ Color type

• ویژگی های رایجی که در ویجت های فرم پیدا خواهید کرد Common attributes you'll find on form widgets

• مبانی فرم Form Fundamentals

• انواع ورودی جدیدتر Newer input types

چالش های سرگرم کننده Fun Challenges

• شماره 1 چالش ایمیل فرم وب - مقدمه #1 web form email challenge - intro

• شماره 1 چالش ایمیل فرم وب - راه حل #1 web form email challenge - solution

• شماره 2 تغییر حالت سفارشی - مقدمه #2 custom toggle - intro

• شماره 2 تغییر حالت سفارشی - ساخت HTML #2 custom toggle - building HTML

• ضامن سفارشی شماره 2 - اتمام ضامن #2 custom toggle - finishing off the toggle

• چالش شماره 3 انتخابگر رنگ - مقدمه #3 color picker challenge - intro

• چالش شماره 3 انتخابگر رنگ - ساخت HTML #3 color picker challenge - building the HTML

• چالش انتخابگر رنگ شماره 3 - اضافه کردن جاوا اسکریپت #3 color picker challenge - adding JavaScript

• چالش شماره 4 انتخاب کننده محدوده سفارشی - مقدمه #4 custom range picker challenge - intro

• چالش شماره 4 انتخابگر محدوده سفارشی - ساخت HTML #4 custom range picker challenge - building the HTML

• چالش شماره 4 انتخابگر محدوده سفارشی - افزودن جاوا اسکریپت #4 custom range picker challenge - adding JavaScript

• شماره 5 چالش فرم وب ساده - مقدمه #5 simple web form challenge - intro

• شماره 5 چالش فرم وب ساده - راه حل #5 simple web form challenge - solution

چالش های سرگرم کننده Fun Challenges

• شماره 1 چالش ایمیل فرم وب - مقدمه #1 web form email challenge - intro

• شماره 1 چالش ایمیل فرم وب - راه حل #1 web form email challenge - solution

• شماره 2 تغییر حالت سفارشی - مقدمه #2 custom toggle - intro

• شماره 2 تغییر حالت سفارشی - ساخت HTML #2 custom toggle - building HTML

• ضامن سفارشی شماره 2 - اتمام ضامن #2 custom toggle - finishing off the toggle

• چالش شماره 3 انتخابگر رنگ - مقدمه #3 color picker challenge - intro

• چالش شماره 3 انتخابگر رنگ - ساخت HTML #3 color picker challenge - building the HTML

• چالش انتخابگر رنگ شماره 3 - اضافه کردن جاوا اسکریپت #3 color picker challenge - adding JavaScript

• چالش شماره 4 انتخاب کننده محدوده سفارشی - مقدمه #4 custom range picker challenge - intro

• چالش شماره 4 انتخابگر محدوده سفارشی - ساخت HTML #4 custom range picker challenge - building the HTML

• چالش شماره 4 انتخابگر محدوده سفارشی - افزودن جاوا اسکریپت #4 custom range picker challenge - adding JavaScript

• شماره 5 چالش فرم وب ساده - مقدمه #5 simple web form challenge - intro

• شماره 5 چالش فرم وب ساده - راه حل #5 simple web form challenge - solution

دور شدن از عنصر <input> Moving away from the <input> element

• معرفی Introduction

• این بخش در مورد چیست What this section is all about

• عناصر غیر <ورودی> Non <input> elements

• <textarea> - چیست <textarea> - what is it

• <textarea> در مقابل <input type="text"> <textarea> vs <input type="text">

• چرا ما زمان زیادی را صرف <textarea> می کنیم؟ Why are we spending so much time on <textarea>?

• <textarea> - ویژگی های رایج <textarea> - common attributes

• <textarea> - تغییر اندازه ویژگی و خلاصه <textarea> - resize property and summary

• <textarea> چالش شماره 1 - :valid، :invalid، not و :placeholder-shown <textarea> Challenge #1 - :valid, :invalid, not and :placeholder-shown

• <textarea> چالش شماره 1 - راه حل <textarea> Challenge #1 - Solution

• <textarea> چالش شماره 2 - تمرکز و تار کردن رویدادها <textarea> Challenge #2 - focus and blur events

• <textarea> چالش شماره 2 - راه حل <textarea> Challenge #2 - Solution

• کنترل های کشویی و کادر انتخاب Dropdown controls and the Select Box

• کادر تکمیل خودکار - <datalist> Autocomplete box - <datalist>

• آیا می توانید ویژگی value را از منوی بازشوی عنصر <datalist> پنهان کنید Can you hide the value attribute from the <datalist> element dropdown

• تکمیل خودکار - ویژگی Autocomplete - attribute

• 2 سوال مهم در مورد <datalist> 2 important questions about <datalist>

• ایجاد یک کشویی پویا <datalist> Creating a dynamic <datalist> dropdown

• <datalist> در مقابل <انتخاب> - خلاصه <datalist> vs <select> - summary

• منوهای کشویی - خلاصه Dropdown menus - summary

• عنصر خروجی - مقدمه Output element - intro

• عنصر خروجی - رویداد ورودی Output element - the oninput event

• چالش عنصر خروجی 1 - ضرب Output element challenge 1 - multiplication

• حل عنصر خروجی چالش 1 - ضرب Output element challenge 1 solution - multiplication

• چالش عنصر خروجی 2 - نمایش مقدار لغزنده Output element challenge 2 - display slider value

• راه حل چالش عنصر خروجی 2 - مقدار لغزنده نمایشگر Output element challenge 2 solution - display slider value

• نوار پیشرفت - مقدمه Progress bar - intro

• نوار پیشرفت - جزئیات Progress bar - detail

• نوار متر - مقدمه Meter bar - intro

• نوار متر - جزئیات Meter bar - detail

• متر و نوار پیشرفت - خلاصه Meter and progress bar - summary

• چالش نوار پیشرفت شماره 1 - مقدمه (پیشرفت ویدیو) Progress bar challenge #1 - intro (video progress)

• چالش نوار پیشرفت شماره 1 - راه حل (پیشرفت ویدیو) Progress bar challenge #1 - solution (video progress)

• چالش نوار پیشرفت شماره 2 - مقدمه (پیشرفت فرم) Progress bar challenge #2 - intro (form progress)

• چالش نوار پیشرفت شماره 2 - راه حل (پیشرفت فرم) - HTML + CSS Progress bar challenge #2 - solution (form progress) - HTML + CSS

• چالش نوار پیشرفت شماره 2 - راه حل (پیشرفت فرم) - جاوا اسکریپت Progress bar challenge #2 - solution (form progress) - JavaScript

• Outro Outro

• کنترل های فرم وب Web Form Controls

دور شدن از عنصر <input> Moving away from the <input> element

• معرفی Introduction

• این بخش در مورد چیست What this section is all about

• عناصر غیر <ورودی> Non <input> elements

• <textarea> - چیست <textarea> - what is it

• <textarea> در مقابل <input type="text"> <textarea> vs <input type="text">

• چرا ما زمان زیادی را صرف <textarea> می کنیم؟ Why are we spending so much time on <textarea>?

• <textarea> - ویژگی های رایج <textarea> - common attributes

• <textarea> - تغییر اندازه ویژگی و خلاصه <textarea> - resize property and summary

• <textarea> چالش شماره 1 - :valid، :invalid، not و :placeholder-shown <textarea> Challenge #1 - :valid, :invalid, not and :placeholder-shown

• <textarea> چالش شماره 1 - راه حل <textarea> Challenge #1 - Solution

• <textarea> چالش شماره 2 - تمرکز و تار کردن رویدادها <textarea> Challenge #2 - focus and blur events

• <textarea> چالش شماره 2 - راه حل <textarea> Challenge #2 - Solution

• کنترل های کشویی و کادر انتخاب Dropdown controls and the Select Box

• کادر تکمیل خودکار - <datalist> Autocomplete box - <datalist>

• آیا می توانید ویژگی value را از منوی بازشوی عنصر <datalist> پنهان کنید Can you hide the value attribute from the <datalist> element dropdown

• تکمیل خودکار - ویژگی Autocomplete - attribute

• 2 سوال مهم در مورد <datalist> 2 important questions about <datalist>

• ایجاد یک کشویی پویا <datalist> Creating a dynamic <datalist> dropdown

• <datalist> در مقابل <انتخاب> - خلاصه <datalist> vs <select> - summary

• منوهای کشویی - خلاصه Dropdown menus - summary

• عنصر خروجی - مقدمه Output element - intro

• عنصر خروجی - رویداد ورودی Output element - the oninput event

• چالش عنصر خروجی 1 - ضرب Output element challenge 1 - multiplication

• حل عنصر خروجی چالش 1 - ضرب Output element challenge 1 solution - multiplication

• چالش عنصر خروجی 2 - نمایش مقدار لغزنده Output element challenge 2 - display slider value

• راه حل چالش عنصر خروجی 2 - مقدار لغزنده نمایشگر Output element challenge 2 solution - display slider value

• نوار پیشرفت - مقدمه Progress bar - intro

• نوار پیشرفت - جزئیات Progress bar - detail

• نوار متر - مقدمه Meter bar - intro

• نوار متر - جزئیات Meter bar - detail

• متر و نوار پیشرفت - خلاصه Meter and progress bar - summary

• چالش نوار پیشرفت شماره 1 - مقدمه (پیشرفت ویدیو) Progress bar challenge #1 - intro (video progress)

• چالش نوار پیشرفت شماره 1 - راه حل (پیشرفت ویدیو) Progress bar challenge #1 - solution (video progress)

• چالش نوار پیشرفت شماره 2 - مقدمه (پیشرفت فرم) Progress bar challenge #2 - intro (form progress)

• چالش نوار پیشرفت شماره 2 - راه حل (پیشرفت فرم) - HTML + CSS Progress bar challenge #2 - solution (form progress) - HTML + CSS

• چالش نوار پیشرفت شماره 2 - راه حل (پیشرفت فرم) - جاوا اسکریپت Progress bar challenge #2 - solution (form progress) - JavaScript

• Outro Outro

• کنترل های فرم وب Web Form Controls

شکل دادن به فرم های وب (شامل عناصر شبه و کلاس های شبه) Styling web forms (including pseudo elements and pseudo classes)

• معرفی بخش Section intro

• فرم‌ها را با CSS، کلاس‌های شبه و عناصر شبه طراحی کنید - مقدمه Styling forms with CSS, pseudo classes and pseudo elements - intro

• کجا می توانید همه کلاس های شبه را پیدا کنید؟ Where can you find all pseudo classes?

• یک ظاهر طراحی شده به فرم های وب Styling web forms

• مدل جعبه CSS CSS box model

• کلاس های شبه - مقدمه Pseudo classes - intro

• کلاس های شبه - برای فرم ها Pseudo classes - for forms

• :ضروری :required

• ساختن فرم وب پایه ما (همچنین در سخنرانی های آینده استفاده می شود) Building our base web form (also used in future lectures)

• محتوای تولید شده Generated content

• افزودن محتوای تولید شده به فرم ما (با استفاده از ::after) Adding generated content to our form (by using ::after)

• :valid & :invalid :valid & :invalid

• اضافه کردن استایل :valid و :invalid به فرم ما (با استفاده از ::before) Adding :valid and :invalid styling to our form (by using ::before)

• :در محدوده و :خارج از محدوده :in-range & :out-of-range

• :فعال غیر فعال :enabled & :disabled

• مثال فرم وب - خلاصه ای از HTML Web form example - rundown of the HTML

• مثال فرم وب - ساخت جاوا اسکریپت ما Web form example - building our JavaScript

• کادرهای رادیویی و چک باکس - :وضعیت علامت زده شده Radio boxes & checkboxes - :checked state

• کادرهای رادیویی و چک باکس - : حالت پیش فرض Radio boxes & checkboxes - :default state

• کادرهای رادیویی و چک باکس - : وضعیت نامشخص Radio boxes & checkboxes - :indeterminate state

• در مورد عنصر <select> چطور؟ What about the <select> element?

• کلاس های شبه - خلاصه Pseudo classes - summary

• یک ظاهر طراحی شده به فرم های وب Styling Web Forms

شکل دادن به فرم های وب (شامل عناصر شبه و کلاس های شبه) Styling web forms (including pseudo elements and pseudo classes)

• معرفی بخش Section intro

• فرم‌ها را با CSS، کلاس‌های شبه و عناصر شبه طراحی کنید - مقدمه Styling forms with CSS, pseudo classes and pseudo elements - intro

• کجا می توانید همه کلاس های شبه را پیدا کنید؟ Where can you find all pseudo classes?

• یک ظاهر طراحی شده به فرم های وب Styling web forms

• مدل جعبه CSS CSS box model

• کلاس های شبه - مقدمه Pseudo classes - intro

• کلاس های شبه - برای فرم ها Pseudo classes - for forms

• :ضروری :required

• ساختن فرم وب پایه ما (همچنین در سخنرانی های آینده استفاده می شود) Building our base web form (also used in future lectures)

• محتوای تولید شده Generated content

• افزودن محتوای تولید شده به فرم ما (با استفاده از ::after) Adding generated content to our form (by using ::after)

• :valid & :invalid :valid & :invalid

• اضافه کردن استایل :valid و :invalid به فرم ما (با استفاده از ::before) Adding :valid and :invalid styling to our form (by using ::before)

• :در محدوده و :خارج از محدوده :in-range & :out-of-range

• :فعال غیر فعال :enabled & :disabled

• مثال فرم وب - خلاصه ای از HTML Web form example - rundown of the HTML

• مثال فرم وب - ساخت جاوا اسکریپت ما Web form example - building our JavaScript

• کادرهای رادیویی و چک باکس - :وضعیت علامت زده شده Radio boxes & checkboxes - :checked state

• کادرهای رادیویی و چک باکس - : حالت پیش فرض Radio boxes & checkboxes - :default state

• کادرهای رادیویی و چک باکس - : وضعیت نامشخص Radio boxes & checkboxes - :indeterminate state

• در مورد عنصر <select> چطور؟ What about the <select> element?

• کلاس های شبه - خلاصه Pseudo classes - summary

• یک ظاهر طراحی شده به فرم های وب Styling Web Forms

اعتبار سنجی فرم وب Web Form Validation

• معرفی بخش Section intro

• 2 نوع اعتبار سنجی سمت مشتری در فرم های وب 2 types of client side validation on web forms

• چرا به اعتبار سنجی سمت سرور نیاز دارید؟ Why you need server side validation?

• اعتبار سنجی داخلی - نمای کلی Built-in validation - overview

• مثال سریع - :valid :invalid و مورد نیاز Quick example - :valid :invalid and required

• اعتبار سنجی داخلی - ویژگی الگو Built-in validation - pattern attribute

• اعتبار سنجی جاوا اسکریپت - مقدمه JavaScript validation - intro

• اعتبارسنجی جاوا اسکریپت - API اعتبارسنجی محدودیت JavaScript validation - the Constraint Validation API

• متد setCustomValidity() - 2 مثال آسان setCustomValidity() method - 2 easy examples

• CHALLENGE Intro - متد setCustomValidity(). CHALLENGE INTRO - setCustomValidity() method

• راه حل چالش - متد setCustomValidity(). CHALLENGE SOLUTION - setCustomValidity() method

• امنیت مهم است (حملات SSL و CSRF) Security is important (SSL & CSRF attacks)

• اعتبار سنجی فرم وب Web Form Validation

اعتبار سنجی فرم وب Web Form Validation

• معرفی بخش Section intro

• 2 نوع اعتبار سنجی سمت مشتری در فرم های وب 2 types of client side validation on web forms

• چرا به اعتبار سنجی سمت سرور نیاز دارید؟ Why you need server side validation?

• اعتبار سنجی داخلی - نمای کلی Built-in validation - overview

• مثال سریع - :valid :invalid و مورد نیاز Quick example - :valid :invalid and required

• اعتبار سنجی داخلی - ویژگی الگو Built-in validation - pattern attribute

• اعتبار سنجی جاوا اسکریپت - مقدمه JavaScript validation - intro

• اعتبارسنجی جاوا اسکریپت - API اعتبارسنجی محدودیت JavaScript validation - the Constraint Validation API

• متد setCustomValidity() - 2 مثال آسان setCustomValidity() method - 2 easy examples

• CHALLENGE Intro - متد setCustomValidity(). CHALLENGE INTRO - setCustomValidity() method

• راه حل چالش - متد setCustomValidity(). CHALLENGE SOLUTION - setCustomValidity() method

• امنیت مهم است (حملات SSL و CSRF) Security is important (SSL & CSRF attacks)

• اعتبار سنجی فرم وب Web Form Validation

نمونه فرم وب سرگرم کننده Fun Web Form Example

• معرفی بخش Section intro

• سازماندهی دارایی ها Organizing the assets

• شبکه CSS - یک نمای کلی CSS grid - an overview

• ساخت HTML Building the HTML

• پایان کار با CSS Finishing off with CSS

نمونه فرم وب سرگرم کننده Fun Web Form Example

• معرفی بخش Section intro

• سازماندهی دارایی ها Organizing the assets

• شبکه CSS - یک نمای کلی CSS grid - an overview

• ساخت HTML Building the HTML

• پایان کار با CSS Finishing off with CSS

پردازش سمت سرور داده های فرم وب Server side processing of web form data

• معرفی بخش Section intro

• AJAX vs ACTION AJAX vs ACTION

• AJAX - مقدمه AJAX - intro

• مثال AJAX - ساخت HTML AJAX example - building the HTML

• مثال AJAX - ساخت فایل PHP AJAX example - building the PHP file

• مثال AJAX - ساخت پرس و جو AJAX AJAX example - building the AJAX query

• مثال AJAX - پیام های خطا و اتمام پروژه AJAX example - error messages and finishing off the project

• نحوه ارسال داده های فرم وب به یک سرور - جمع بندی سمت مشتری How to submit web form data to a server - client side recap

• PHP - نحوه دریافت داده های فرم PHP - how to receive form data

• NODE - نحوه دریافت داده های فرم NODE - how to receive form data

• ماژول های گره Node modules

• Outro - آفرین Outro - WELL DONE

• آزمون سرور Server Quiz

پردازش سمت سرور داده های فرم وب Server side processing of web form data

• معرفی بخش Section intro

• AJAX vs ACTION AJAX vs ACTION

• AJAX - مقدمه AJAX - intro

• مثال AJAX - ساخت HTML AJAX example - building the HTML

• مثال AJAX - ساخت فایل PHP AJAX example - building the PHP file

• مثال AJAX - ساخت پرس و جو AJAX AJAX example - building the AJAX query

• مثال AJAX - پیام های خطا و اتمام پروژه AJAX example - error messages and finishing off the project

• نحوه ارسال داده های فرم وب به یک سرور - جمع بندی سمت مشتری How to submit web form data to a server - client side recap

• PHP - نحوه دریافت داده های فرم PHP - how to receive form data

• NODE - نحوه دریافت داده های فرم NODE - how to receive form data

• ماژول های گره Node modules

• Outro - آفرین Outro - WELL DONE

• آزمون سرور Server Quiz

تست نهایی Final Test

• فرم وب - آزمون نهایی Web Form - Final Test

تست نهایی Final Test

• فرم وب - آزمون نهایی Web Form - Final Test