Beginning of dialog window. Escape will cancel and close the window.
End of dialog window.
نکته:
آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
در حال بارگزاری، لطفا صبر کنید...
توضیحات دوره:
استاد فرم های وب کامل. از طراحی HTML گرفته تا ارسال به سرورها. برای همه توسعه های جلویی بسیار مهم است. تازه کار تا حرفه ای چرا فرم های وب صفحات پول اکثر وب سایت ها هستند هزاران مثال کاربردی و چالش های سرگرم کننده برای آسان کردن یادگیری یاد بگیرید که چگونه وب سایت شما می تواند از ترافیک با درک نحوه ساخت فرم های وب استفاده کند یاد بگیرید چگونه داده های فرم را به سرور وب ارسال کنید. درباره HTTP و نحوه ارتباط آن با HTML بیاموزید نحوه استفاده از AJAX برای ارسال دادههای فرم به سرور را بیاموزید مثالهای عملی - با من بسیاری از فرمهای ظاهری پویا بسازید. -step Master اعتبار سمت کلاینت با استفاده از HTML و JavaScript درک نحوه ایجاد پیام های خطای سفارشی با ConstraintValidation یاد بگیرید چگونه جفت های فرم کلید: ارزش را با استفاده از URLSearchParams() API استخراج کنید از تسلط بر توسعه وب سایت پیشرفته جلویی طراحی و ایجاد لذت ببرید. فرم ها را برای دریافت پاسخ مورد نظر خود، موفق باشید درک مدل جعبه CSS، شبکه CSS و کلاس های شبه و عناصر شبه در مورد کنترل های مختلف فرم های موجود بیاموزید.<ورودی>انواعی مانند متن، رمز عبور، ایمیل، تلفن، رنگ، تاریخ، شماره و موارد دیگر! استاد نه<ورودی>کنترلهای فرم مانند textarea، خروجی، پیشرفت و نوارهای متر و موارد دیگر! بیاموزید که چرا مرورگر وقتی کاربر فرمی را ارسال میکند، کدگذاری URL را پیادهسازی میکند درک رمزگذاری URL درک نحوه دریافت دادهها از یک فرم توسط سرور نحوه راهاندازی سرور PHP و دریافت دادههای فرم (مثال واقعی) آموزش راهاندازی سرور Node و دریافت فرم داده ها (مثال واقعی) درک کنید که چرا یک کاربر می تواند نویسه های بین المللی را در فرم شما تایپ کند، حتی اگر رمزگذاری URL مشخص می کند که باید نویسه های ASCII باشد یاد بگیرید چگونه فرم های مورد حسادت را با عناصری مانند بسازید.
سرفصل ها و درس ها
معرفی
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)
خلاصه ای از صفت پذیرش-شخصیت
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 - 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"
خلاصه ای از صفت پذیرش-شخصیت
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 - 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"
خلاصه ای از بسته بندی <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
نمایش نظرات