آموزش جامع فرم‌ها در HTML

🎯 اهداف یادگیری

• آشنایی با ساختار پایه فرم‌های HTML
• شناخت انواع فیلدهای ورودی
• یادگیری اعتبارسنجی فرم‌ها
• طراحی فرم‌های حرفه‌ای و کاربرپسند

📌 مقدمه‌ای بر فرم‌های HTML

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

<form action="/submit" method="post">
  <label for="username">نام کاربری:</label>
  <input type="text" id="username" name="username">
  <button type="submit">ارسال</button>
</form>

ویژگی‌های اصلی فرم:

• action: آدرس URL که داده‌های فرم به آن ارسال می‌شوند
• method: نوع درخواست HTTP (معمولاً GET یا POST)

📌 انواع فیلدهای ورودی

HTML انواع مختلفی از فیلدهای ورودی را برای جمع‌آوری داده‌ها ارائه می‌دهد:

<!-- فیلد متنی ساده -->
<input type="text" placeholder="نام خود را وارد کنید">
<!-- فیلد رمز عبور -->
<input type="password" placeholder="رمز عبور">
<!-- چک باکس -->
<input type="checkbox" id="agree">
<label for="agree">با شرایط موافقم</label>
<!-- انتخاب تاریخ -->
<input type="date" name="birthday">

انواع پرکاربرد فیلدها:

• text: ورود متن یک خطی
• password: ورود رمز عبور (متن پنهان)
• email: ورود آدرس ایمیل با اعتبارسنجی خودکار
• number: ورود اعداد
• checkbox: انتخاب چند گزینه
• radio: انتخاب یک گزینه از چند گزینه
• file: آپلود فایل
• submit: دکمه ارسال فرم

📌 اعتبارسنجی فرم‌ها

HTML5 ویژگی‌های داخلی برای اعتبارسنجی فرم‌ها ارائه می‌دهد:

<form>
  <label>ایمیل:</label>
  <input type="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <label>رمز عبور (حداقل 8 کاراکتر):</label>
  <input type="password" required minlength="8">
  <button type="submit">ثبت نام</button>
</form>

ویژگی‌های اعتبارسنجی:

• required: فیلد اجباری برای پر کردن
• minlength/maxlength: حداقل/حداکثر طول متن
• min/max: حداقل/حداکثر مقدار عددی
• pattern: اعتبارسنجی با regex
• type: اعتبارسنجی نوع داده (email, url, number, ...)

📌 عناصر پیشرفته فرم

برخی عناصر فرم برای موارد خاص طراحی شده‌اند:

۱. لیست‌های انتخاب (Dropdown)

<label for="country">کشور:</label>
<select id="country" name="country">
  <option value="ir">ایران</option>
  <option value="us">آمریکا</option>
  <option value="uk">انگلیس</option>
</select>

۲. ناحیه متن چندخطی (Textarea)

<label for="message">پیام شما:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

۳. گروه‌بندی فیلدها (Fieldset)

<fieldset>
  <legend>اطلاعات تماس</legend>
  <label>نام:</label>
  <input type="text" name="name">
  <label>ایمیل:</label>
  <input type="email" name="email">
</fieldset>

📌 طراحی فرم‌های کاربرپسند

رعایت این نکات تجربه کاربری بهتری ایجاد می‌کند:

۱. استفاده صحیح از برچسب‌ها (Labels)

<!-- روش صحیح -->
<label for="username">نام کاربری:</label>
<input type="text" id="username">
<!-- روش جایگزین -->
<label>
  نام کاربری:
  <input type="text" name="username">
</label>

۲. placeholder مناسب

<input
  type="text"
  placeholder="مثال: 09123456789"
  title="شماره موبایل باید 11 رقمی و با 09 شروع شود"
>

۳. گروه‌بندی منطقی فیلدها

• استفاده از fieldset و legend برای گروه‌بندی منطقی فیلدها

<fieldset>
  <legend>جزئیات حساب کاربری</legend>
  <label>نام:</label>
  <input type="text" name="name">
  <label>ایمیل:</label>
  <input type="email" name="email">
</fieldset>

۴. دکمه‌های واضح و قابل استفاده

دکمه‌های ارسال باید به وضوح نشان دهند که کاربر قرار است چه کاری را انجام دهد.

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

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

📌 قدم بعدی

در درس بعدی با لینک‌ها و نحوه پیوند صفحات در HTML آشنا خواهیم شد!