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

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

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

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

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

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

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

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

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

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

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

<form action="/submit" method="POST">
    <!-- اینجا محتویات فرمت رو میذاری -->
</form>

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

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

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

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

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

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

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

<input type="text">

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

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

<input type="email">

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

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

<input type="password">

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

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

<input type="number">

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

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

<input type="radio">

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

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

<input type="checkbox">

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

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

<input type="date">

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

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

<input type="time">

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

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

<input type="search">

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

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

<input type="color">

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

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

<input type="file">

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

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

<input type="url">

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

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

<input type="range">

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

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

<input type="tel">

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

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

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

<textarea></textarea>

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

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

<select>
  <option value="audi">آئودی</option>
  <option value="bmw">بی‌ام‌و</option>
  <option value="mercedes">مرسدس بنز</option>
</select>

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

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

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

<select>
  <option value="audi">آئودی</option>
  <option value="bmw" selected>بی‌ام‌و</option>
  <option value="mercedes">مرسدس بنز</option>
</select>

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

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

<input type="text" placeholder="نام کاربری خود را وارد کنید">

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

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

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

<label for="username">نام کاربری:</label>
<input type="text" id="username">

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

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

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

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

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

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

<fieldset>
 <legend>اطلاعات شخصی</legend>
  نام: <input type="text" name="Name"><br>
  نام خانوادگی: <input type="text" name="Family"><br><br>
</fieldset>

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

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

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

<button type="submit">ارسال</button>

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

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

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

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

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

  <button type="submit">ارسال</button>

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

  <button type="reset">پاک کردن</button>

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

<button type="button" onclick="alert('سلام!')">کلیک کن!</button>

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

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

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

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

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

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

<input list="browsers" name="browser">
<datalist id="browsers">
 <option value="اج">
 <option value="فایرفاکس">
 <option value="کروم">
 <option value="اپرا">
 <option value="سافاری">
</datalist>

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

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

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

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

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

<form oninput="result.value = parseInt(num1.value) + parseInt(num2.value)">
  <label>عدد اول: <input type="number" id="num1" value="0"></label>
  <label>عدد دوم: <input type="number" id="num2" value="0"></label>
  
  <p>نتیجه جمع: <output name="result" id="result">0</output></p>
</form>

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

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

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

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

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

<form action="submit.php"></form>

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

<form method="post"></form>

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

<form target="_blank"></form>

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

<form enctype="multipart/form-data"></form>

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

<form name="myForm"></form>

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

<form autocomplete="on"></form>

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

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

<form novalidate></form>

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

<form accept-charset="UTF-8"></form>

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

<form action="/ثبت‌ نام" method="POST">
    <div>
        <label for="fullname">اسمت چیه؟</label>
        <input type="text" id="fullname" name="fullname" required>
    </div>
    
    <div>
        <label for="email">ایمیلت رو بنویس:</label>
        <input type="email" id="email" name="email" required>
    </div>
    
    <div>
        <label for="password">یه رمز خفن انتخاب کن:</label>
        <input type="password" id="password" name="password" required>
    </div>
    
    <div>
        <label>جنسیت:</label>
        <input type="radio" name="gender" value="male"> پسر
        <input type="radio" name="gender" value="female"> دختر
    </div>
    
    <div>
        <label>چه چیزایی دوست داری؟</label>
        <input type="checkbox" name="interests" value="tech"> تکنولوژی
        <input type="checkbox" name="interests" value="sports"> ورزش
        <input type="checkbox" name="interests" value="art"> هنر
    </div>
    
    <button type="submit">ثبت‌نامم کن!</button>
</form>

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

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

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

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

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

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

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

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

<input type="text" name="username" required>

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

<!-- شماره موبایل 11 رقمی -->
<input type="text" name="phone" pattern="[0-9]{11}" required>

<!-- کد ملی 10 رقمی -->
<input type="text" name="national-code" pattern="[0-9]{10}" required>

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

<!-- رمز عبور بین 8 تا 16 کاراکتر -->
<input type="password" name="password" minlength="8" maxlength="16" required>

<!-- نام کاربری حداکثر 20 کاراکتر -->
<input type="text" name="username" maxlength="20">

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

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

<input type="number" name="age" min="18" max="100">

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

🔚 سخن پایانی

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

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