جلسه 11 آموزش HTML: ساخت فرم و کار با تگ form

خیلی خوشحالم که تا اینجای دوره آموزش HTML رایا وردپرس همراه من بودی و خودت رو به جلسه ۱۱ ام رسوندی! 🎉 امروز می‌خوایم با یکی از بخش‌های مهم دیگه از HTML آشنا بشیم: فرم‌ها 🌟!

هر وقت توی یه سایت چیزی رو سرچ می‌کنی، کامنت یا دیدگاه میزاری، یا حتی می‌خوای توی یه سایت ثبت‌نام کنی، در واقع داری با فرم‌های HTML کار می‌کنی.

امروز قراره یاد بگیری چطور با تگ <form> فرم‌های حرفه‌ای بسازی و مثل یک توسعه‌دهنده وب حرفه‌ای، با کاربرانت ارتباط برقرار کنی. فرم‌ها نه‌تنها برای تعامل با کاربران ضروری هستن، بلکه می‌تونن تجربه کاربری رو هم به‌شدت بهبود بدن. پس بیا با هم این جلسه رو با دقت پیش ببریم و همه‌چیز رو بررسی کنیم! 🚀

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

از ساخت فرم‌های ساده تا اعتبارسنجی و نکات پیشرفته‌تر، همه‌چیز رو تو این جلسه قراره بهت یاد بدم. پس آماده باش، چون قراره یه جلسه پُر از مطالب خفن و کاربردی داشته باشیم! 😊

تگ <form> چیه و چرا استفاده میشه؟

تگ <form> یکی از تگ‌های مهم HTML هست که به کمک اون می‌تونی اطلاعاتی که کاربر در یک فرم وارد می‌کنه رو به سرور ارسال کنی. فرم‌ها معمولاً شامل فیلدهای مختلف برای وارد کردن داده‌ها مثل نام، ایمیل، پیام و غیره هستن. وقتی که یک کاربر فرم رو پر می‌کنه و دکمه ارسال رو می‌زنه، داده‌ها به یک سرور منتقل می‌شن تا پردازش بشن.

ساختار اصلی یک فرم در HTML 📋

وقتی تصمیم داری یک فرم بسازی، اولین چیزی که نیاز داری تگ <form> هست. این تگ پایه‌ گذار ساختار اصلی فرم‌ها در HTML هست و همه چیز داخل این تگ قرار می‌گیره. پس برای شروع، باید فرم خودت رو با این تگ شروع کنی.

مثال: ساختار کلی یه فرم بسیار ساده به صورت زیره:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

داخل تگ form یه سری عناصر مهم قرار میگیرن که باید باهاشون آشنا باشی🔑

این عناصر هستن که به فرم‌ ها جان می‌دن و به کاربران اجازه می‌دن اطلاعاتشون رو وارد کنن. بیا با هم مهم‌ترین‌هاش رو بررسی کنیم:

 🟨 انواع ورودی‌های <input>

یکی از عناصر مهمی که داخل تگ <form> قرار می‌گیره، ورودی‌ها یا همون input ها هستن. این ورودی‌ها به ما این امکان رو می‌دن که اطلاعات مختلفی رو از کاربر بگیریم. 😎 بد نیست با هم انواع مختلف ورودی‌ها رو بررسی کنیم: 👇

💡 نکته مهم: برای دریافت اطلاعات از کاربر، همیشه از تگ <input> استفاده می‌کنیم. اما این تگ به تنهایی کافی نیست! باید نوع ورودی رو با ویژگی type مشخص کنیم. یعنی قبل از بسته شدن تگ آغازین <input>، باید تعیین کنیم که کاربر قراره چه نوع اطلاعاتی وارد کنه. اینطوری مرورگر و سرور می‌تونن به درستی داده‌ها رو پردازش کنن و فرم بدون مشکل کار کنه. 🧐

1. ورودی متنی ساده – <input type="text">

این ورودی برای دریافت متن‌های کوتاه مثل نام کاربری یا آدرس استفاده میشه. وقتی که نیاز داری اطلاعات متنی از کاربر بگیری، از <input type="text"> استفاده می‌کنی. 📝

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

2. ورودی ایمیل – <input type="email">

این ورودی مخصوص دریافت ایمیل از کاربر هست. مرورگر به طور خودکار چک می‌کنه که آیا ایمیل وارد شده معتبر هست یا نه.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

3. ورودی رمز عبور – <input type="password">

این ورودی برای دریافت رمز عبور از کاربر استفاده میشه. اطلاعاتی که وارد می‌کنی به صورت نقطه‌ای (••••••) نمایش داده میشه تا امنیت بیشتری داشته باشه. 🔒

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

4. ورودی شماره – <input type="number">

این ورودی مخصوص دریافت اعداد از کاربر هست. با این ورودی می‌تونی تنها اعداد رو دریافت کنی و از وارد کردن متن جلوگیری بشه. 🔢

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

5. دکمه رادیویی – <input type="radio">

این ورودی برای انتخاب یک گزینه از بین چندین گزینه استفاده میشه. معمولاً برای سوالات “بله/خیر” یا زمانی که از کاربر می‌خوای فقط یک گزینه خاص رو انتخاب کنه، به کار میره. 🔘

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

6. چک‌ باکس – <input type="checkbox">

این ورودی برای انتخاب چندین گزینه به طور همزمان استفاده میشه. به کاربر این امکان رو می‌ده که بیشتر از یک گزینه رو انتخاب کنه. ✅

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

7. ورودی تاریخ – <input type="date">

این ورودی برای انتخاب تاریخ از تقویم استفاده میشه. کاربر می‌تونه تاریخ مورد نظرش رو به راحتی از تقویم انتخاب کنه. 📅

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

8. ورودی ساعت – <input type="time">

این ورودی برای دریافت زمان از کاربر به کار میره. کاربر می‌تونه ساعت و دقیقه رو از طریق یک انتخاب‌ گر زمانی وارد کنه.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

9. ورودی جستجو – <input type="search">

این ورودی برای ایجاد یک فیلد جستجو طراحی شده. به طور معمول در سایت‌هایی که نیاز به جستجوی سریع دارن، از این ورودی استفاده میشه.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

10. ورودی رنگ – <input type="color">

این ورودی برای انتخاب رنگ از یک پالت رنگی استفاده میشه. کاربر می‌تونه رنگ مورد نظرش رو به صورت گرافیکی از پالت انتخاب کنه. 🎨

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

11. ورودی فایل – <input type="file">

این ورودی برای انتخاب فایل از سیستم کاربر استفاده میشه. معمولاً برای آپلود فایل‌ها به کار میره. 📁

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

12. ورودی آدرس اینترنتی – <input type="url">

این ورودی برای دریافت آدرس‌های وب (URL) از کاربر استفاده میشه. مرورگر معمولاً بررسی می‌کنه که آیا URL وارد شده معتبر هست یا نه.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

13. ورودی محدوده – <input type="range">

این ورودی برای ایجاد یک رنج‌ سلکتور (Range Selector) استفاده میشه، که به کاربر اجازه می‌ده یک مقدار از یک بازه مشخص رو انتخاب کنه. این ورودی معمولاً برای انتخاب مقادیر عددی در یک محدوده خاص، مثل انتخاب بازه قیمت در فیلترهای فروشگاهی، کاربرد داره.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

14. ورودی شماره تلفن – <input type="tel">

این ورودی برای دریافت شماره تلفن از کاربر استفاده میشه. با استفاده از type="tel"، مرورگر می‌تونه به کاربر کمک کنه تا شماره تلفن رو راحت‌تر و دقیق‌تر وارد کنه.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

حالا که با انواع ورودی‌ها آشنا شدی، وقتشه بریم سراغ تگ‌های مهم دیگه‌ای که درون فرم‌ها استفاده می‌شن و هرکدوم نقش خاص خودشون رو دارن:

1. تگ <textarea>: برای متن‌های طولانی 📄

وقتی که نیاز داری از کاربر متن‌های طولانی مثل پیام، نظرات یا توضیحات دریافت کنی، از تگ <textarea> استفاده کن. این تگ به کاربر این امکان رو می‌ده که چندین خط از متن رو وارد کنه.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

2. تگ <select>:  لیست بازشو📋

تگ <select> بهت این امکان رو می‌ده که یک منوی کشویی (Dropdown Menu) بسازی تا کاربر از بین چندین گزینه، یکی رو انتخاب کنه. این تگ برای مواقعی که بخوای گزینه‌های متنوعی رو به کاربر نشون بدی، خیلی مفیده. وقتی صفحه لود میشه، به‌صورت پیش‌فرض اولین گزینه موجود در لیست، به صورت خودکار انتخاب میشه.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• تگ <select>: این تگ یه منوی کشویی ایجاد می‌کنه.
• تگ <option>: هر گزینه داخل منوی کشویی با این تگ تعریف میشه.
  • ویژگی value: مقداری که به سرور ارسال میشه وقتی کاربر اون گزینه رو انتخاب می‌کنه.
  • محتوا: متنی که کاربر داخل منوی کشویی می‌بینه.

اگر می‌خوای یه گزینه خاص به‌صورت پیش‌فرض انتخاب بشه، از ویژگی selected داخل تگ <option> استفاده کن:

برای مثال من میخام گزینه بی ام و به صورت پیش فرض انتخاب بشه برای همین باید کدم رو به صورت زیر بنویسم:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

3. placeholder: راهنمایی برای ورودی‌های فیلد

ویژگی placeholder در تگ‌های ورودی (مثل <input> و <textarea>) استفاده میشه تا به کاربر نشون بده که چه چیزی باید داخل فیلد وارد کنه. این ویژگی معمولاً به‌صورت متن خاکستری‌ رنگ داخل فیلد نمایش داده میشه و زمانی که کاربر شروع به تایپ می‌کنه، به‌طور خودکار ناپدید میشه.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در این مثال، وقتی کاربر روی فیلد کلیک می‌کنه، متن “نام کاربری خود را وارد کنید” به‌صورت محو نمایش داده میشه و وقتی شروع به تایپ می‌کنه، این متن ناپدید میشه.

4. تگ <label>: برچسب‌ گذاری فیلدهای فرم

تگ <label> یکی از مهم‌ترین عناصر برای بهبود تجربه کاربری در فرم‌هاست. این تگ به کاربر نشون می‌ده که هر فیلد ورودی برای چه منظوری استفاده میشه.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• خاصیت for در <label>: وقتی برای یک Input میخوایم Label تعریف کنیم، باید اول یه id برای Input مون مشخص کنیم بعدش همون id رو داخل تگ Label قرار بدیم تا بهمدیگه وصل بشن.
• محتوا: متن داخل <label> به کاربر نشون می‌ده که این فیلد برای چه منظوری استفاده میشه.

نکته! هر ورودی (<input>) می‌تونه یک برچسب (<label>) داشته باشه و از این بابت هیچ محدودیتی وجود نداره. یعنی می‌تونی برای هر نوع ورودی که ایجاد می‌کنی، یک برچسب اضافه کنی تا توضیح بدی که کاربر باید چه چیزی وارد کنه.

متأسفانه خیلی‌ها <label> رو با placeholder اشتباه می‌گیرن، در حالی که این دو کاملاً متفاوت هستن!

• تگ <label>: برچسبی هست که به طور دائم و ثابت در کنار ورودی نمایش داده میشه و معمولاً برای راهنمایی به کاربر استفاده میشه.
• placeholder: متنی هست که داخل فیلد ورودی به طور موقت نمایش داده میشه و به کاربر نشون می‌ده که باید چه چیزی وارد کنه. وقتی کاربر شروع به تایپ کنه، این متن ناپدید میشه.

5. تگ‌ <fieldset>: گروه‌ بندی فیلدهای فرم

وقتی یه فرم پیچیده با فیلدهای زیاد داری، ممکنه کاربران سردرگم بشن که کدوم فیلدها به هم مرتبط هستن. اینجا تگ‌ <fieldset> به کمکت میاد! این تگ‌ بهت اجازه میده فیلدهای مرتبط رو گروه‌ بندی کنی و به فرم‌ها نظم و ساختار بدی.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• تگ <fieldset>: برای گروه‌بندی مجموعه‌ای از فیلدهای ورودی که به هم مرتبط هستن استفاده میشه. این تگ معمولاً یک حاشیه دور این فیلدها ایجاد می‌کنه تا اون‌ها رو از بقیه فرم جدا کنه و به کاربر نشون بده که این ورودی‌ها بخشی از یک گروه هستند. این گروه‌بندی کمک می‌کنه که فرم‌ها مرتب و سازمان‌دهی‌شده به نظر برسن و کاربر راحت‌تر بتونه اطلاعات رو وارد کنه.
• تگ <legend>: تگ <legend> به عنوان یه نوع تگ مکمل یا کمکی برای اضافه کردن یک عنوان به گروه‌هایی که با تگ <fieldset> ایجاد شدن، استفاده میشه. این عنوان داخل حاشیه‌ای که توسط <fieldset> ایجاد شده قرار می‌گیره و به کاربر کمک می‌کنه تا متوجه بشه این گروه از ورودی‌ها برای چه منظوری استفاده میشه.

6. تگ <button>: ایجاد دکمه‌های کاربردی در فرم

تگ <button> برای ایجاد دکمه‌ در فرم‌ها استفاده میشه. این دکمه‌ها می‌تونن برای ارسال فرم، انجام عملیات خاص یا حتی تعامل با کاربر به کار برن. یکی از مزیت‌های تگ <button> اینه که می‌تونی محتوای داخل دکمه رو سفارشی کنی و حتی از HTML و CSS برای زیباتر کردنش استفاده کنی.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

ویژگی type در تگ <button>:

ویژگی type مشخص می‌کنه که دکمه چه عملکردی باید داشته باشه. این ویژگی سه مقدار اصلی داره:

• submit: این نوع دکمه برای ارسال فرم به سرور استفاده میشه. وقتی کاربر این دکمه رو می‌زنه، تمام داده‌های فرم به آدرس مشخص‌شده در ویژگی action ارسال می‌شن.
• reset: دکمه‌ای که با این نوع تایپ ساخته میشه، فیلدهای فرم رو به حالت اولیه خودشون برمی‌گردونه. یعنی تمام مقادیری که کاربر وارد کرده پاک میشه و فرم به وضعیت اولیه خودش برمی‌گرده.
• button: این نوع دکمه هیچ عملکرد خاصی به خودش اختصاص نمی‌ده. معمولاً از این دکمه برای اجرا کردن عملیات‌های جاوا اسکریپتی یا تعاملات دلخواه استفاده میشه. میتونی با استفاده از ویژگی onclick و کدنویسی جاوا اسکریپت، عملکردهای مختلفی رو به این دکمه‌ نسبت بدی.

🙂مثال‌های استفاده از تگ <button>:

• دکمه ارسال فرم: این دکمه برای ارسال اطلاعات فرم به سرور استفاده میشه.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• دکمه ریست کردن فرم: این دکمه برای پاک کردن تمام ورودی‌های فرم به کار میره.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• دکمه معمولی: می‌تونی دکمه‌ها رو طوری بسازی که با کلیک روی اون‌ها یک عملیات خاص انجام بشه، مثلاً یک پیام به کاربر نمایش بدی.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

توجه! ویژگی onclick در تگ <button> برای اضافه کردن عملکرد جاوا اسکریپت به دکمه‌ها استفاده میشه. زمانی که کاربر روی دکمه کلیک می‌کنه، کدی که داخل ویژگی onclick قرار داده شده اجرا میشه.

7. تگ <datalist> – نمایش گزینه های پیشنهادی در فرم‌ ها 🗂️

تگ <datalist> برای ایجاد لیستی از پیشنهادات در فیلدهای ورودی استفاده میشه. اما برای اینکه ورودی <input> به این لیست پیشنهادات متصل بشه، باید یک ارتباط خاص بین این دو برقرار کنی. این ارتباط از طریق ویژگی list در تگ <input> و ویژگی id در تگ <datalist> انجام میشه.

چطور این ارتباط برقرار میشه؟

• ویژگی list در <input>: در تگ <input> باید ویژگی list رو استفاده کنی و مقدارش رو همون id تگ <datalist> قرار بدی.
• ویژگی id در <datalist>: در تگ <datalist> باید یک شناسه (id) مشخص کنی.

مثال استفاده از <datalist>:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

8. تگ <output> – نمایش نتیجه محاسبات در فرم ها

تگ <output> مثل یک جعبه خروجیه که نتیجه محاسبات یا تغییرات فرم رو به کاربر نشون میده. این تگ معمولاً با جاوااسکریپت استفاده میشه تا نتایج رو به صورت زنده (بدون نیاز به رفرش صفحه) نمایش بده.

ویژگی‌های تگ <output>:

• این تگ می‌تونه برای نمایش هر نوع داده‌ای که از طریق فرم‌ها یا اسکریپت‌ها به دست میاد، به کار بره.
• معمولاً در ترکیب با جاوا اسکریپت برای انجام محاسبات و نمایش نتایج استفاده میشه.
• تگ <output> می‌تونه به راحتی چندین نتیجه مختلف رو در خودش نمایش بده.

مثال ساده (جمع دو عدد):

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• در این مثال دو فیلد ورودی عدد داریم، که کاربر می‌تواند اعداد مختلفی وارد کند.
• تگ <output> به طور زنده نتیجه حاصل از جمع دو عدد وارد شده رو نمایش میده.
• درون ویژگی oninput از جاوا اسکریپت استفاده شده که به محض تغییر هر کدام از فیلدهای ورودی (در اینجا فیلدهای num1 و num2)، نتیجه‌ی جمع آن‌ها به طور خودکار در تگ <output> نمایش داده میشه.

📋 جدول صفات مهم تگ <form> در HTML

صفات مهم تگ <form> در HTML شامل ویژگی‌هایی هستن که بهت کمک میکنن نحوه عملکرد و تعاملات کاربر با فرم‌ها رو کنترل کنی. این صفات تعیین میکنن که داده‌ها به کجا ارسال بشن، چطور ارسال بشن، و حتی اینکه چطور فرم در صفحه نمایش داده بشه. مهم ترین صفات تگ فرم رو در جدول زیر برات آوردم:

😊 توضیحات هر کدام از صفت های تگ فرم با مثال‌:

• action: وقتی که فرم رو ارسال می‌کنی، داده‌ها به URL مشخص شده در صفت action میرن. مثلاً اگر بخوای فرم رو به یه اسکریپت PHP بفرستی که داده‌ها رو پردازش کنه، از این صفت استفاده کن.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• method: این صفت مشخص می‌کنه که داده‌ها چطور ارسال بشن. اگر از GET استفاده کنی، داده‌ها در URL ظاهر میشن، ولی POST داده‌ها مخفیانه ارسال میشن.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• target: با این صفت می‌تونی مشخص کنی که نتیجه ارسال فرم در چه صفحه‌ای نمایش داده بشه. اگر بخوای فرم در صفحه جدید باز بشه، از _blank استفاده کن.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• enctype: برای ارسال فایل‌ها از طریق فرم، باید از این صفت استفاده کنی. مثلاً برای آپلود تصویر، از multipart/form-data استفاده کن.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• name: برای دسترسی به فرم از طریق جاوا اسکریپت یا CSS، می‌تونی از این صفت استفاده کنی.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• autocomplete: این صفت به مرورگر می‌گه که اطلاعات قبلی مثل نام و ایمیل رو به طور خودکار پر کنه یا نه.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

از دو مقدار on و off میتونی برای اینکار استفاده کنی 🙂

• novalidate: اگر می‌خوای مرورگر اعتبارسنجی خودکار رو نادیده بگیره و فرم بدون بررسی ارسال بشه، از این صفت استفاده کن.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• accept-charset: این صفت به سرور می‌گه که چه نوع کدگذاری باید برای داده‌ها استفاده بشه، به ویژه زمانی که فرم حاوی کاراکترهای خاص یا غیرلاتین مثل زبان‌های غیرانگلیسی باشه.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

🙂❤️ مثال جامع از فرم:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

توی این فرم ما اول از متد POST استفاده کردیم برای ارسال اطلاعات به سرور. یعنی وقتی کاربر فرم رو ارسال می‌کنه، داده‌ها به سرور با استفاده از این متد فرستاده می‌شن.

این فرم شامل چندین فیلد هست:

1. فیلد اسم: اینجا از یک فیلد متنی از نوع text استفاده کردیم تا کاربر اسم خودش رو وارد کنه. همچنین از ویژگی required استفاده کردیم تا کاربر نتونه این فیلد رو خالی بذاره.
2. فیلد ایمیل: این فیلد از نوع email هست که به کاربر این امکان رو می‌ده که ایمیل خودش رو وارد کنه. همچنین، این فیلد هم با ویژگی required مشخص شده که نمی‌شه خالی بذاریمش.
3. فیلد رمز عبور: این فیلد برای وارد کردن رمز عبور کاربر طراحی شده و از نوع password هست تا نمایش داده‌ها به صورت مخفی (نقطه) باشه. همینطور با required تنظیم شده که پر کردنش الزامی باشه.
4. فیلد جنسیت: از دو فیلد رادیویی استفاده کردیم که به کاربر این امکان رو می‌ده که جنسیت خودش رو انتخاب کنه (پسر یا دختر). برای این فیلدها، از خاصیت name یکسان (gender) استفاده شده که باعث می‌شه فقط یکی از گزینه‌ها انتخاب بشه.
5. فیلد علایق: از چندین چک‌باکس استفاده کردیم که به کاربر این امکان رو می‌ده تا علاقه‌مندی‌های خودش رو انتخاب کنه. می‌تونه بیشتر از یک گزینه رو انتخاب کنه.

در نهایت، با دکمه submit، فرم ارسال میشه و اطلاعات به سرور منتقل می‌شن.

🛡️اعتبارسنجی (Validation) فرم ها

یه نکته مهم که قبل از اینکه فراموش کنم، می‌خواستم بهت بگم، بحث اعتبارسنجی (Validation) در فرم‌های HTML هست.

در HTML5 می‌تونیم به راحتی اعتبارسنجی رو بدون نیاز به جاوااسکریپت انجام بدیم. شاید از خودت بپرسی چرا اعتبارسنجی اینقدر مهمه؟ جواب ساده‌ست: چون باید مطمئن بشی که کاربر اطلاعات درست و دقیق وارد کرده، وگرنه ممکنه داده‌های اشتباه به سرور ارسال بشه که مشکلات زیادی به وجود میاره 🙂

• فیلد ضروری🚫 با required : با این ویژگی می‌تونی فیلدها رو اجباری کنی و از کاربر بخوای که اون فیلد رو پر کنه. با این ویژگی، کاربر نمی‌تونه فرم رو بدون پر کردن فیلد ارسال کنه.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• تعریف الگوی خاص 📝با pattern: با این ویژگی می‌تونیم یک الگوی خاص برای ورودی‌ها تعریف کنیم. مثلا شماره تلفنی که کاربر وارد میکنه 11 رقمی یا کد ملی کاربر 10 رقمی باشه.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• محدودیت طول متن با minlength و maxlength: این ویژگی‌ها برای مشخص کردن حداقل و حداکثر تعداد کاراکترها در یک فیلد متنی استفاده می‌شن.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در این مثال، رمز عبور باید حداقل 8 کاراکتر و حداکثر 16کاراکتر باشه. همینطور نام کاربری که کاربر در فیلد یوزرنیم می نویسه حداکثر باید 20 کاراکتر باشه.

• تعیین محدوده اعداد با min و max: با استفاده از این ویژگی‌ها می‌تونیم محدودیت‌هایی برای مقادیر عددی وارد شده تعیین کنیم.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در این مثال سنی که کاربر در فیلد از نوع number وارد میکنه باید بین 18 تا 100 باشه.

🔚 سخن پایانی

تو این جلسه، همه چیز رو درباره ساخت فرم های HTML یاد گرفتی؛ از تگ <form> و عناصر داخلیش تا اعتبارسنجی و نکات کلیدی. حالا وقتشه دست به کار بشی و فرم های مختلف رو تمرین کنی. یادت نره: تمرین مداوم، تو رو به یک طراح وب حرفه ای تبدیل میکنه! 💪

اگر سوالی دارى یا میخوای تجربت رو به اشتراک بذاری، تو کامنت ها بنویس. 😊