آموزش Web Forms - 2023 Build and Master Advanced Web Forms [ویدئو]

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

معرفی Introduction

• معرفی دوره Course Introduction

• معرفی دوره Course Introduction

• مقدمه ای بر فرم ها Introduction to Forms

• مقدمه ای بر فرم ها Introduction to Forms

• فرم های وب چگونه ایجاد می شوند؟ How Are Web Forms Created?

• فرم های وب چگونه ایجاد می شوند؟ How Are Web Forms Created?

• چرا باید فرم وب خود را در یک عنصر <form> بپیچیم؟ Why Do We Need to Wrap Our Web Form in a <form> Element?

• چرا باید فرم وب خود را در یک عنصر <form> بپیچیم؟ Why Do We Need to Wrap Our Web Form in a <form> Element?

• جمع بندی سریع در فرم های وب Quick Recap on Web Forms

• جمع بندی سریع در فرم های وب Quick Recap on Web Forms

• معرفی پروژه - بیایید یک فرم وب بسازیم Project Introduction - Let's Build a Web Form

• معرفی پروژه - بیایید یک فرم وب بسازیم Project Introduction - Let's Build a Web Form

• سربرگ نمایه - تنظیم آن Profile Header - Setting It Up

• سربرگ نمایه - تنظیم آن Profile Header - Setting It Up

• سرصفحه نمایه - پایان دادن به آن Profile Header - Finishing It Off

• سرصفحه نمایه - پایان دادن به آن Profile Header - Finishing It Off

• ایجاد اولین ویجت فرم وب <input> Creating Our First Web Form Widget <input>

• ایجاد اولین ویجت فرم وب <input> Creating Our First Web Form Widget <input>

• اطلاعات کمی در مورد عنصر <input> A Little More Information about the <input> Element

• اطلاعات کمی در مورد عنصر <input> A Little More Information about the <input> Element

• سبک دادن به ویجت <ورودی> ما Styling Our <input> Widget

• سبک دادن به ویجت <ورودی> ما Styling Our <input> Widget

• ایجاد ویجت ایمیل Creating an Email Widget

• ایجاد ویجت ایمیل Creating an Email Widget

• مقدمه ای بر دکمه های رادیویی Introduction to Radio Buttons

• مقدمه ای بر دکمه های رادیویی Introduction to Radio Buttons

• ساخت دکمه رادیویی ما Building Our Radio Button

• ساخت دکمه رادیویی ما Building Our Radio Button

• یک قدم به عقب برگردید: دکمه های رادیویی Take a Step Back: Radio Buttons

• یک قدم به عقب برگردید: دکمه های رادیویی Take a Step Back: Radio Buttons

• یک ظاهر طراحی دکمه رادیویی ما Styling Our Radio Button

• یک ظاهر طراحی دکمه رادیویی ما Styling Our Radio Button

• افزودن یک منوی کشویی به فرم وب ما Adding a Dropdown Menu to Our Web Form

• افزودن یک منوی کشویی به فرم وب ما Adding a Dropdown Menu to Our Web Form

• افزودن یک ویجت textarea به فرم وب ما Adding a textarea Widget to Our Web Form

• افزودن یک ویجت textarea به فرم وب ما Adding a textarea Widget to Our Web Form

• افزودن یک چک باکس به فرم وب ما Adding a Checkbox to Our Web Form

• افزودن یک چک باکس به فرم وب ما Adding a Checkbox to Our Web Form

• افزودن دکمه ارسال به فرم وب ما Adding a Submit Button to Our Web Form

• افزودن دکمه ارسال به فرم وب ما Adding a Submit Button to Our Web Form

• وقتی فرمی را ارسال می کنید چه اتفاقی می افتد؟ What Happens When You Submit a Form?

• وقتی فرمی را ارسال می کنید چه اتفاقی می افتد؟ What Happens When You Submit a Form?

• خلاصه ای از کل بخش Recap of the Entire Section

• خلاصه ای از کل بخش Recap of the Entire Section

• Outro Outro

• Outro Outro

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

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

• بخش مقدمه - جدول در مقابل فرم وب Section Introduction - Table Versus Web Form

• بخش مقدمه - جدول در مقابل فرم وب Section Introduction - Table Versus Web Form

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

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

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

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

• چرا دانستن ویژگی های <form> مهم است؟ Why is Knowing about the <form> Attributes Important?

• چرا دانستن ویژگی های <form> مهم است؟ Why is Knowing about the <form> Attributes Important?

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

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

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

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

• یک قدم به عقب برگردید: مجموعه کاراکترها را قبول کنید Take a Step Back: accept-charset

• یک قدم به عقب برگردید: مجموعه کاراکترها را قبول کنید Take a Step Back: accept-charset

• اگر از یک کاراکتر خارج از نوع رمزگذاری مشخص شده استفاده کنید چه اتفاقی می افتد؟ What Happens If You Use a Character Outside of the Specified Encoding Type?

• اگر از یک کاراکتر خارج از نوع رمزگذاری مشخص شده استفاده کنید چه اتفاقی می افتد؟ What Happens If You Use a Character Outside of the Specified Encoding Type?

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

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

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

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

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

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

• ویژگی نام Name Attribute

• ویژگی نام Name Attribute

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

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

• ویژگی عمل Action Attribute

• ویژگی عمل Action Attribute

• Action AttributeExample - Front-End Example Action AttributeExample - Front-End Example

• Action AttributeExample - Front-End Example Action AttributeExample - Front-End Example

• مثال Action Attribute - مقدمه ای بر URLSearchParams() Action Attribute Example - Introduction to URLSearchParams()

• مثال Action Attribute - مقدمه ای بر URLSearchParams() Action Attribute Example - Introduction to URLSearchParams()

• Action Attribute Example - ساختن فرم ما پویا Action Attribute Example - Making Our Form Dynamic

• Action Attribute Example - ساختن فرم ما پویا Action Attribute Example - Making Our Form Dynamic

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

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

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

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

• دریافت در مقابل پست GET Versus POST

• دریافت در مقابل پست GET Versus POST

• HTTP در مقابل HTML وقتی صحبت از انواع روش می شود HTTP Versus HTML When It Comes to METHOD Types

• HTTP در مقابل HTML وقتی صحبت از انواع روش می شود HTTP Versus HTML When It Comes to METHOD Types

• Enctype Attribute - مقدمه Enctype Attribute - Introduction

• Enctype Attribute - مقدمه Enctype Attribute - Introduction

• Enctype Attribute - GET Example Enctype Attribute - GET Example

• Enctype Attribute - GET Example Enctype Attribute - GET Example

• Enctype Attribute - POST Enctype Attribute - POST

• Enctype Attribute - POST Enctype Attribute - POST

• صفت Enctype - مرز چیست؟ Enctype Attribute - What Is Boundary?

• صفت Enctype - مرز چیست؟ Enctype Attribute - What Is Boundary?

• Enctype Example - راه اندازی HTML Enctype Example - Setting Up HTML

• Enctype Example - راه اندازی HTML Enctype Example - Setting Up HTML

• Enctype Example - راه اندازی یک سرور Node.js Enctype Example - Setting Up a Node.js Server

• Enctype Example - راه اندازی یک سرور Node.js Enctype Example - Setting Up a Node.js Server

• مثال Enctype - تجزیه و تحلیل برنامه چندبخشی در مقابل برنامه x-www-form-urlencoded Enctype Example - Analysis of Multipart Versus application/x-www-form-urlencoded

• مثال Enctype - تجزیه و تحلیل برنامه چندبخشی در مقابل برنامه x-www-form-urlencoded Enctype Example - Analysis of Multipart Versus application/x-www-form-urlencoded

• Enctype - یک قدم به عقب بردارید Enctype - Take a Step Back

• Enctype - یک قدم به عقب بردارید Enctype - Take a Step Back

• ویژگی REL REL Attribute

• ویژگی REL REL Attribute

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

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

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

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

• novalidate - معرفی ویژگی novalidate - Attribute Introduction

• novalidate - معرفی ویژگی novalidate - Attribute Introduction

• novalidate - مثال novalidate - Example

• novalidate - مثال novalidate - Example

• معرفی ویژگی هدف Target Attribute Introduction

• معرفی ویژگی هدف Target Attribute Introduction

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

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

• خلاصه <form> Wrapper Summary of the <form> Wrapper

• خلاصه <form> Wrapper Summary of the <form> Wrapper

• Outro Outro

• Outro Outro

رمزگذاری URL URL Encoding

رمزگذاری URL URL Encoding

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

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

• چرا شخصیت های بین المللی را می بینیم؟ Why Do We See International Characters?

• چرا شخصیت های بین المللی را می بینیم؟ Why Do We See International Characters?

• کمی در مورد URL A Little about URLs

• کمی در مورد URL A Little about URLs

• درک هگز Understanding Hex

• درک هگز Understanding Hex

• رمزگذاری URL چگونه کار می کند؟ How Does URL Encoding Work?

• رمزگذاری URL چگونه کار می کند؟ How Does URL Encoding Work?

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

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

• چگونه URL مرورگر شما فضاها را رمزگذاری می کند؟ How Does Your Browser URL Encode Spaces?

• چگونه URL مرورگر شما فضاها را رمزگذاری می کند؟ How Does Your Browser URL Encode Spaces?

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

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

سه عنصر مهم فرم وب: مجموعه فیلدها، ورودی های متن و برچسب ها The Three Most Important Web Form Elements: fieldset, Text Inputs, and Labels

سه عنصر مهم فرم وب: مجموعه فیلدها، ورودی های متن و برچسب ها The Three Most Important Web Form Elements: fieldset, Text Inputs, and Labels

• ساختار یک فرم وب The Structure of a Web Form

• ساختار یک فرم وب The Structure of a Web Form

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

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

• <fieldset> - مثالها <fieldset> - Examples

• <fieldset> - مثالها <fieldset> - Examples

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

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

• <fieldset> - با استفاده از ویژگی فرم <fieldset> - Using the Form Attribute

• <fieldset> - با استفاده از ویژگی فرم <fieldset> - Using the Form Attribute

• استفاده از ویژگی فرم برای اهداف استایل با استفاده از HTMLFormElement.elements Using the Form Attribute for Styling Purposes Using HTMLFormElement.elements

• استفاده از ویژگی فرم برای اهداف استایل با استفاده از HTMLFormElement.elements Using the Form Attribute for Styling Purposes Using HTMLFormElement.elements

• عنصر <input> مانند آهک است The <input> Element Is Like a Lime

• عنصر <input> مانند آهک است The <input> Element Is Like a Lime

• عنصر <input> از کجا می آید؟ Where Does the <input> Element Come From?

• عنصر <input> از کجا می آید؟ Where Does the <input> Element Come From?

• <input type="text"> - ویژگی های رایج و مقدمه <input type="text"> - Common Attributes and Introduction

• <input type="text"> - ویژگی های رایج و مقدمه <input type="text"> - Common Attributes and Introduction

• <input type="text"> - املای ویژگی و ویژگی ارزش را بررسی کنید <input type="text"> - Spellcheck Attribute and Value Property

• <input type="text"> - املای ویژگی و ویژگی ارزش را بررسی کنید <input type="text"> - Spellcheck Attribute and Value Property

• تکلیف - معرفی فرم وب Assignment - Web Form Introduction

• تکلیف - معرفی فرم وب Assignment - Web Form Introduction

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

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

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

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

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

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

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

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

• انواع <ورودی> اصلی چیست؟ What Are the Original <input> Types?

• انواع <ورودی> اصلی چیست؟ What Are the Original <input> Types?

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

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

• نوع ورودی=رمز عبور Input Type=Password

• نوع ورودی=رمز عبور Input Type=Password

• با استفاده از الگو، عنوان و ویژگی مورد نیاز با نوع رمز عبور Using the Pattern, Title, and Required Attribute with the Password Type

• با استفاده از الگو، عنوان و ویژگی مورد نیاز با نوع رمز عبور Using the Pattern, Title, and Required Attribute with the Password Type

• رمز عبور در زمینه امنیت به ما کمک نمی کند Password Does Not Help Us with Security

• رمز عبور در زمینه امنیت به ما کمک نمی کند Password Does Not Help Us with Security

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

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

• نوع ورودی = پنهان Input Type=Hidden

• نوع ورودی = پنهان Input Type=Hidden

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

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

• نوع ورودی پنهان و پایگاه های داده Hidden Input Type and Databases

• نوع ورودی پنهان و پایگاه های داده Hidden Input Type and Databases

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

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

• دکمه ها - دو راه برای ایجاد دکمه ها Buttons - Two Ways to Create Buttons

• دکمه ها - دو راه برای ایجاد دکمه ها Buttons - Two Ways to Create Buttons

• استفاده از ویژگی های جدید در دکمه ها و تفاوت بین <button> و <input> Using New Attributes on Buttons and the Difference Between <button> and <input>

• استفاده از ویژگی های جدید در دکمه ها و تفاوت بین <button> و <input> Using New Attributes on Buttons and the Difference Between <button> and <input>

• انواع دکمه های مختلف - مثال سرگرم کننده Different Button Types - Fun Example

• انواع دکمه های مختلف - مثال سرگرم کننده Different Button Types - Fun Example

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

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

• چک باکس Checkbox

• چک باکس Checkbox

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

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

• :کلاس شبه علامت زده شد :checked Pseudo Class

• :کلاس شبه علامت زده شد :checked Pseudo Class

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

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

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

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

• چالش چک باکس - راه حل با علامت چک Checkbox Challenge - Solution with Check Mark

• چالش چک باکس - راه حل با علامت چک Checkbox Challenge - Solution with Check Mark

• نوع تصویر Image Type

• نوع تصویر Image Type

• نوع تصویر - نمونه Heatmap Image Type - Heatmap Example

• نوع تصویر - نمونه Heatmap Image Type - Heatmap Example

• نوع فایل File Type

• نوع فایل File Type

• نوع فایل - نحوه استایل دادن به آن File Type - How to Style It

• نوع فایل - نحوه استایل دادن به آن File Type - How to Style It

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

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

• Outro Outro

• Outro Outro

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

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

• انواع ورودی جدیدتر - سطح بالا Newer Input Types - High Level

• انواع ورودی جدیدتر - سطح بالا Newer Input Types - High Level

• نوع ایمیل - مقدمه Email Type - Introduction

• نوع ایمیل - مقدمه Email Type - Introduction

• نوع ایمیل - اعتبارسنجی و مزایا Email Type - Validation and Benefits

• نوع ایمیل - اعتبارسنجی و مزایا Email Type - Validation and Benefits

• نوع جستجو - مقدمه Search Type - Introduction

• نوع جستجو - مقدمه Search Type - Introduction

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

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

• نوع جستجو - کلاس های شبه و عناصر شبه Search Type - Pseudo Classes and Pseudo Elements

• نوع جستجو - کلاس های شبه و عناصر شبه Search Type - Pseudo Classes and Pseudo Elements

• شماره تلفن Tel Type

• شماره تلفن Tel Type

• نوع URL Url Type

• نوع URL Url Type

• نوع شماره Number Type

• نوع شماره Number Type

• گام به عقب Step Back

• گام به عقب Step Back

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

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

• استفاده از جاوا اسکریپت برای نمایش مقادیر محدوده پویا Using JavaScript to Display Dynamic Range Values

• استفاده از جاوا اسکریپت برای نمایش مقادیر محدوده پویا Using JavaScript to Display Dynamic Range Values

• انتخابگرهای تاریخ و زمان Date and Time Pickers

• انتخابگرهای تاریخ و زمان Date and Time Pickers

• نوع تاریخ - مثال Date Type - Example

• نوع تاریخ - مثال Date Type - Example

• نوع رنگ Color Type

• نوع رنگ Color Type

• ویژگی های رایجی که در ویجت های فرم پیدا خواهید کرد Common Attributes You Will Find on Form Widgets

• ویژگی های رایجی که در ویجت های فرم پیدا خواهید کرد Common Attributes You Will Find on Form Widgets

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

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

• شماره 1 چالش ایمیل فرم وب - مقدمه #1 Web Form Email Challenge - Introduction

• شماره 1 چالش ایمیل فرم وب - مقدمه #1 Web Form Email Challenge - Introduction

• شماره 1 چالش ایمیل فرم وب - راه حل #1 Web Form Email Challenge - Solution

• شماره 1 چالش ایمیل فرم وب - راه حل #1 Web Form Email Challenge - Solution

• # 2 تغییر سفارشی - مقدمه #2 Custom Toggle - Introduction

• # 2 تغییر سفارشی - مقدمه #2 Custom Toggle - Introduction

• # 2 تغییر حالت سفارشی - ساخت HTML #2 Custom Toggle - Building HTML

• # 2 تغییر حالت سفارشی - ساخت HTML #2 Custom Toggle - Building HTML

• شماره 2 تغییر حالت سفارشی - پایان دادن به ضامن #2 Custom Toggle - Finishing Off the Toggle

• شماره 2 تغییر حالت سفارشی - پایان دادن به ضامن #2 Custom Toggle - Finishing Off the Toggle

• #3 چالش انتخاب رنگ - مقدمه #3 Color Picker Challenge - Introduction

• #3 چالش انتخاب رنگ - مقدمه #3 Color Picker Challenge - Introduction

• #3 چالش انتخاب رنگ - ساخت HTML #3 Color Picker Challenge - Building the HTML

• #3 چالش انتخاب رنگ - ساخت HTML #3 Color Picker Challenge - Building the HTML

• #3 چالش انتخاب رنگ - اضافه کردن جاوا اسکریپت #3 Color Picker Challenge - Adding JavaScript

• #3 چالش انتخاب رنگ - اضافه کردن جاوا اسکریپت #3 Color Picker Challenge - Adding JavaScript

• #4 چالش انتخاب کننده محدوده سفارشی - مقدمه #4 Custom Range Picker Challenge - Introduction

• #4 چالش انتخاب کننده محدوده سفارشی - مقدمه #4 Custom Range Picker Challenge - Introduction

• #4 چالش انتخاب محدوده سفارشی - ساخت HTML #4 Custom Range Picker Challenge - Building the HTML

• #4 چالش انتخاب محدوده سفارشی - ساخت HTML #4 Custom Range Picker Challenge - Building the HTML

• شماره 4 چالش انتخاب محدوده سفارشی - اضافه کردن جاوا اسکریپت #4 Custom Range Picker Challenge - Adding JavaScript

• شماره 4 چالش انتخاب محدوده سفارشی - اضافه کردن جاوا اسکریپت #4 Custom Range Picker Challenge - Adding JavaScript

• شماره 5 چالش فرم وب ساده - مقدمه #5 Simple Web Form Challenge - Introduction

• شماره 5 چالش فرم وب ساده - مقدمه #5 Simple Web Form Challenge - Introduction

• شماره 5 چالش فرم وب ساده - راه حل #5 Simple Web Form Challenge - Solution

• شماره 5 چالش فرم وب ساده - راه حل #5 Simple Web Form Challenge - Solution

دور شدن از عنصر <input> Moving Away from the <input> Element

دور شدن از عنصر <input> Moving Away from the <input> Element

• معرفی Introduction

• معرفی Introduction

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

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

• <textarea> - چیست؟ <textarea> - What Is It

• <textarea> - چیست؟ <textarea> - What Is It

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

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

• <textarea> - ویژگی های مشترک <textarea> - Common Attributes

• <textarea> - ویژگی های مشترک <textarea> - Common Attributes

• <textarea> - تغییر اندازه ویژگی و خلاصه <textarea> - Resize Property and Summary

• <textarea> - تغییر اندازه ویژگی و خلاصه <textarea> - Resize Property and Summary

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

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

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

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

• <textarea> چالش شماره 2 - تمرکز و تاری رویدادها <textarea> Challenge #2 - Focus and Blur Events

• <textarea> چالش شماره 2 - تمرکز و تاری رویدادها <textarea> Challenge #2 - Focus and Blur Events

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

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

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

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

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

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

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

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

• دو سوال مهم در مورد <datalist> Two Important Questions about <datalist>

• دو سوال مهم در مورد <datalist> Two Important Questions about <datalist>

• ایجاد یک کشویی <datalist> پویا Creating a Dynamic <datalist> Dropdown

• ایجاد یک کشویی <datalist> پویا Creating a Dynamic <datalist> Dropdown

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

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

• منوهای کشویی - خلاصه Dropdown Menus - Summary

• منوهای کشویی - خلاصه Dropdown Menus - Summary

• عنصر خروجی - مقدمه Output Element - Introduction

• عنصر خروجی - مقدمه Output Element - Introduction

• عنصر خروجی - رویداد ورودی Output Element - The oninput Event

• عنصر خروجی - رویداد ورودی Output Element - The oninput Event

• چالش عنصر خروجی 1 - ضرب Output Element Challenge 1 - Multiplication

• چالش عنصر خروجی 1 - ضرب Output Element Challenge 1 - Multiplication

• راه حل چالش عنصر خروجی 1 - ضرب Output Element Challenge 1 Solution - Multiplication

• راه حل چالش عنصر خروجی 1 - ضرب Output Element Challenge 1 Solution - Multiplication

• چالش عنصر خروجی 2 - نمایش مقدار لغزنده Output Element Challenge 2 - Display Slider Value

• چالش عنصر خروجی 2 - نمایش مقدار لغزنده Output Element Challenge 2 - Display Slider Value

• راه حل چالش عنصر خروجی 2 - نمایش مقدار لغزنده Output Element Challenge 2 Solution - Display Slider Value

• راه حل چالش عنصر خروجی 2 - نمایش مقدار لغزنده Output Element Challenge 2 Solution - Display Slider Value

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

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

• نوار پیشرفت - جزئیات Progress Bar - Detail

• نوار پیشرفت - جزئیات Progress Bar - Detail

• نوار متر - مقدمه Meter Bar - Introduction

• نوار متر - مقدمه Meter Bar - Introduction

• نوار متر - جزئیات Meter Bar - Detail

• نوار متر - جزئیات Meter Bar - Detail

• متر و نوار پیشرفت - خلاصه Meter and Progress Bar - Summary

• متر و نوار پیشرفت - خلاصه Meter and Progress Bar - Summary

• چالش نوار پیشرفت شماره 1 - مقدمه (پیشرفت ویدیویی) Progress Bar Challenge #1 - Introduction (Video Progress)

• چالش نوار پیشرفت شماره 1 - مقدمه (پیشرفت ویدیویی) Progress Bar Challenge #1 - Introduction (Video Progress)

• چالش نوار پیشرفت شماره 1 - راه حل (پیشرفت ویدیویی) Progress Bar Challenge #1 - Solution (Video Progress)

• چالش نوار پیشرفت شماره 1 - راه حل (پیشرفت ویدیویی) Progress Bar Challenge #1 - Solution (Video Progress)

• چالش نوار پیشرفت شماره 2 - مقدمه (پیشرفت فرم) Progress Bar Challenge #2 - Introduction (Form Progress)

• چالش نوار پیشرفت شماره 2 - مقدمه (پیشرفت فرم) Progress Bar Challenge #2 - Introduction (Form Progress)

• چالش نوار پیشرفت شماره 2 - راه حل (پیشرفت فرم) - HTML + CSS Progress Bar Challenge #2 - Solution (Form Progress) - HTML + CSS

• چالش نوار پیشرفت شماره 2 - راه حل (پیشرفت فرم) - HTML + CSS Progress Bar Challenge #2 - Solution (Form Progress) - HTML + CSS

• چالش نوار پیشرفت شماره 2 - راه حل (پیشرفت فرم) - جاوا اسکریپت Progress Bar Challenge #2 - Solution (Form Progress) - JavaScript

• چالش نوار پیشرفت شماره 2 - راه حل (پیشرفت فرم) - جاوا اسکریپت Progress Bar Challenge #2 - Solution (Form Progress) - JavaScript

• Outro Outro

• Outro Outro

شکل دادن به فرم های وب (شامل عناصر شبه و کلاس های شبه) Styling Web Forms (Including Pseudo Elements and Pseudo Classes)

شکل دادن به فرم های وب (شامل عناصر شبه و کلاس های شبه) Styling Web Forms (Including Pseudo Elements and Pseudo Classes)

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• شکل دادن به فرم ها با CSS، کلاس های شبه و عناصر شبه - مقدمه Styling Forms with CSS, Pseudo Classes, and Pseudo Elements - Introduction

• شکل دادن به فرم ها با CSS، کلاس های شبه و عناصر شبه - مقدمه Styling Forms with CSS, Pseudo Classes, and Pseudo Elements - Introduction

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

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

• مدل جعبه CSS CSS Box Model

• مدل جعبه CSS CSS Box Model

• کلاس های شبه - مقدمه Pseudo Classes - Introduction

• کلاس های شبه - مقدمه Pseudo Classes - Introduction

• کلاس های شبه - برای فرم ها Pseudo Classes - For Forms

• کلاس های شبه - برای فرم ها Pseudo Classes - For Forms

• :ضروری :required

• :ضروری :required

• ساختن فرم وب پایه ما (همچنین در سخنرانی های آینده استفاده می شود) Building Our Base Web Form (Also Used in Future Lectures)

• ساختن فرم وب پایه ما (همچنین در سخنرانی های آینده استفاده می شود) Building Our Base Web Form (Also Used in Future Lectures)

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

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

• افزودن محتوای تولید شده به فرم ما (با استفاده از ::after) Adding Generated Content to Our Form (Using ::after)

• افزودن محتوای تولید شده به فرم ما (با استفاده از ::after) Adding Generated Content to Our Form (Using ::after)

• :valid و :invalid :valid and :invalid

• :valid و :invalid :valid and :invalid

• اضافه کردن :valid و :invalid Styling به فرم ما (استفاده از ::before) Adding :valid and :invalid Styling to Our Form (Using ::before)

• اضافه کردن :valid و :invalid Styling به فرم ما (استفاده از ::before) Adding :valid and :invalid Styling to Our Form (Using ::before)

• :in-range و :out-of-range :in-range and :out-of-range

• :in-range و :out-of-range :in-range and :out-of-range

• :enabled و :disabled :enabled and :disabled

• :enabled و :disabled :enabled and :disabled

• مثال فرم وب - خلاصه ای از HTML Web Form Example - Rundown of the HTML

• مثال فرم وب - خلاصه ای از HTML Web Form Example - Rundown of the HTML

• مثال فرم وب - ساخت جاوا اسکریپت ما Web Form Example - Building Our JavaScript

• مثال فرم وب - ساخت جاوا اسکریپت ما Web Form Example - Building Our JavaScript

• رادیو باکس ها و چک باکس ها - حالت علامت زده شده است Radio Boxes and Checkboxes - :checked State

• رادیو باکس ها و چک باکس ها - حالت علامت زده شده است Radio Boxes and Checkboxes - :checked State

• رادیو باکس ها و چک باکس ها - حالت پیش فرض Radio Boxes and Checkboxes - :default State

• رادیو باکس ها و چک باکس ها - حالت پیش فرض Radio Boxes and Checkboxes - :default State

• رادیو باکس ها و چک باکس ها - :indeterminate State Radio Boxes and Checkboxes - :indeterminate State

• رادیو باکس ها و چک باکس ها - :indeterminate State Radio Boxes and Checkboxes - :indeterminate State

• شبه کلاس ها - خلاصه Pseudo-Classes - Summary

• شبه کلاس ها - خلاصه Pseudo-Classes - Summary

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

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

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• دو نوع اعتبار سنجی سمت مشتری در فرم های وب Two Types of Client-Side Validation on Web Forms

• دو نوع اعتبار سنجی سمت مشتری در فرم های وب Two Types of Client-Side Validation on Web Forms

• اعتبار سنجی داخلی - نمای کلی Built-In Validation - Overview

• اعتبار سنجی داخلی - نمای کلی Built-In Validation - Overview

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

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

• اعتبار سنجی داخلی - ویژگی الگو Built-In Validation - Pattern Attribute

• اعتبار سنجی داخلی - ویژگی الگو Built-In Validation - Pattern Attribute

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

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

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

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

• روش setCustomValidity() - دو مثال آسان setCustomValidity() Method - Two Easy Examples

• روش setCustomValidity() - دو مثال آسان setCustomValidity() Method - Two Easy Examples

• مقدمه چالش - روش setCustomValidity(). Challenge Introduction - setCustomValidity() Method

• مقدمه چالش - روش setCustomValidity(). Challenge Introduction - setCustomValidity() Method

• راه حل چالش - روش setCustomValidity(). Challenge Solution - setCustomValidity() Method

• راه حل چالش - روش setCustomValidity(). Challenge Solution - setCustomValidity() Method

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

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

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

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

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

• CSS Grid - یک مرور کلی CSS Grid - An Overview

• CSS Grid - یک مرور کلی CSS Grid - An Overview

• ساخت HTML Building the HTML

• ساخت HTML Building the HTML

• اتمام کار با CSS Finishing Off with CSS

• اتمام کار با CSS Finishing Off with CSS

پردازش سمت سرور داده های فرم وب Server-Side Processing of Web Form Data

پردازش سمت سرور داده های فرم وب Server-Side Processing of Web Form Data

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• AJAX در مقابل ACTION AJAX Versus ACTION

• AJAX در مقابل ACTION AJAX Versus ACTION

• AJAX - مقدمه AJAX - Introduction

• AJAX - مقدمه AJAX - Introduction

• مثال AJAX - ساخت HTML AJAX Example - Building the HTML

• مثال AJAX - ساخت HTML AJAX Example - Building the HTML

• مثال AJAX - ساخت فایل PHP AJAX Example - Building the PHP File

• مثال AJAX - ساخت فایل PHP AJAX Example - Building the PHP File

• مثال AJAX - ساخت پرس و جو AJAX AJAX Example - Building the AJAX Query

• مثال AJAX - ساخت پرس و جو AJAX AJAX Example - Building the AJAX Query

• مثال AJAX - پیام های خطا و اتمام پروژه AJAX Example - Error Messages and Finishing Off the Project

• مثال AJAX - پیام های خطا و اتمام پروژه AJAX Example - Error Messages and Finishing Off the Project

• نحوه ارسال داده‌های فرم وب به سرور - جمع‌بندی سمت مشتری How to Submit Web Form Data to a Server - Client-Side Recap

• نحوه ارسال داده‌های فرم وب به سرور - جمع‌بندی سمت مشتری How to Submit Web Form Data to a Server - Client-Side Recap

• PHP - نحوه دریافت داده های فرم PHP - How to Receive Form Data

• PHP - نحوه دریافت داده های فرم PHP - How to Receive Form Data

• NODE - نحوه دریافت داده های فرم NODE - How to Receive Form Data

• NODE - نحوه دریافت داده های فرم NODE - How to Receive Form Data

• خلاصه دوره Course Summary

• خلاصه دوره Course Summary