فصل ۹: ایجاد فرم‌های ورودی

فصل ۹: ایجاد فرم‌های ورودی – جمع‌آوری اطلاعات از کاربران! 📝

سلام دوستای گل! تا اینجا کلی با ساختار صفحات وب، متن‌ها، لینک‌ها، تصاویر و جدول‌ها آشنا شدیم. حالا وقتشه بریم سراغ یکی از مهم‌ترین بخش‌های هر وب‌سایت تعاملی: فرم‌های ورودی! فرم‌ها به ما این امکان رو می‌دن که از کاربرهامون اطلاعات بگیریم؛ مثلاً موقع ثبت‌نام، ورود به حساب کاربری، ارسال پیام، یا خرید آنلاین.

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

تگ <form>: جعبه اصلی فرم! 📦

اولین و مهم‌ترین تگی که برای ساخت فرم نیاز داریم، تگ <form> هست. این تگ مثل یه کانتینر یا جعبه عمل می‌کنه که تمام عناصر ورودی فرم (مثل کادرهای متن، دکمه‌ها، چک‌باکس‌ها و…) رو در خودش جا می‌ده.

خصوصیت‌های مهم <form>:

• action: مشخص می‌کنه که وقتی فرم ارسال می‌شه، اطلاعات به کدوم صفحه یا آدرس (URL) فرستاده بشه. این آدرس معمولاً به یک اسکریپت سمت سرور (مثل PHP، Python، Node.js) اشاره داره که اطلاعات رو پردازش می‌کنه.
• method: مشخص می‌کنه که اطلاعات فرم چطور ارسال بشه. دو مقدار رایج داره:
  • GET: اطلاعات رو به صورت پارامتر در URL نمایش می‌ده (برای اطلاعات حساس مناسب نیست).
  • POST: اطلاعات رو در بدنه درخواست HTTP ارسال می‌کنه و در URL نمایش داده نمی‌شه (امن‌تر و مناسب‌تر برای اکثر فرم‌ها).

<form action="/submit-your-data" method="post">
  <!-- عناصر ورودی فرم اینجا قرار می‌گیرند -->
  <button type="submit">ارسال اطلاعات</button>
</form>

نکته: اگر خصوصیت action خالی باشه، فرم به همون صفحه فعلی ارسال می‌شه.

تگ <label>: نام‌گذاری عناصر ورودی! 🏷️

هر عنصر ورودی در فرم باید یه برچسب یا توضیح داشته باشه تا کاربر بفهمه اون کادر برای چه اطلاعاتیه. تگ <label> دقیقاً همین کار رو انجام می‌ده.

خصوصیت مهم <label>:

• for: این خصوصیت، برچسب رو به یک عنصر ورودی خاص (که id مشخصی داره) وصل می‌کنه. وقتی کاربر روی برچسب کلیک می‌کنه، فوکوس به صورت خودکار به اون عنصر ورودی منتقل می‌شه. این کار دسترسی‌پذیری (Accessibility) فرم رو خیلی بالا می‌بره.

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

با این کار، وقتی کاربر روی “نام کاربری:” کلیک کنه، نشانگر ماوس به صورت خودکار توی کادر input قرار می‌گیره.

انواع عناصر ورودی (Input Types): ⌨️

تگ اصلی برای ایجاد انواع عناصر ورودی، تگ <input> هست. ولی چیزی که نوع ورودی رو مشخص می‌کنه، خصوصیت type اون هست.

چند نمونه از رایج‌ترین انواع <input>:

• type=”text”: یک کادر متن ساده برای ورود متن.
• type=”password”: شبیه کادر متن، ولی کاراکترهای وارد شده رو به صورت نقطه یا ستاره نشون می‌ده (برای رمز عبور).
• type=”email”: برای ورود آدرس ایمیل. مرورگرها می‌تونن این نوع ورودی رو اعتبارسنجی کنن.
• type=”number”: برای ورود اعداد.
• type=”checkbox”: چک‌باکس برای انتخاب گزینه‌های مختلف (می‌شه چندتا رو انتخاب کرد).
• type=”radio”: دکمه رادیویی. در یک گروه، فقط یکی از گزینه‌ها رو می‌شه انتخاب کرد. (برای کار با رادیو، باید نام name برای همه اون‌ها یکسان باشه).
• type=”submit”: دکمه ارسال فرم.
• type=”reset”: دکمه‌ای که تمام فیلدهای فرم رو به حالت اولیه برمی‌گردونه.
• type=”date”: برای انتخاب تاریخ.
• type=”file”: برای انتخاب فایل از سیستم کاربر.

نکته مهم: خصوصیت name در تگ <input> خیلی مهمه! وقتی فرم ارسال می‌شه، اطلاعات هر ورودی با استفاده از نامش (که توسط خصوصیت name مشخص شده) دسته‌بندی و ارسال می‌شه.

در فصل‌های آینده، با تگ‌های بیشتری برای ساخت فرم‌های پیچیده‌تر مثل <textarea> (برای متن طولانی) و <select> (برای انتخاب از لیست) آشنا خواهیم شد. اما این مفاهیم اولیه، پایه‌ی ساخت هر فرمی هستن!

ساخت فرم‌ها یه مهارت خیلی کاربردیه. با تمرین و آشنایی با تگ‌ها و خصوصیت‌های مختلف، می‌تونید فرم‌های قدرتمند و کاربرپسندی طراحی کنید. پس آماده باشید که دنیای فرم‌ها رو کشف کنیم! ✨