آموزش تگ form در HTML

اهمیت تگ Form در طراحی وب

تگ Form پایه و اساس ایجاد فرم‌های HTML است که برای ارسال داده‌های کاربر به سرور استفاده می‌شود.

در دنیای امروز وب، جایی که تجربه کاربری (UX) اولویت دارد، فرم‌ها باید واکنش گرا، امن و بهینه‌سازی‌شده برای موتورهای جستجو باشند. طبق استانداردهای HTML5، این تگ با ویژگی‌های پیشرفته‌ای مانند validation داخلی همراه است که خطاها را کاهش می‌دهد.

ساختار پایه تگ به این شکل است:

<form action="/process-form" method="post" name="contact-form" target="_self">
  
form>

ویژگی‌های کلیدی تگ Form

action: آدرس URL سروری که داده‌ها به آن ارسال می‌شوند. در طراحی مدرن، اغلب از APIهای RESTful استفاده می‌شود.

method: دو گزینه اصلی:GET: داده‌ها در URL نمایش داده می‌شوند (مناسب برای جستجوها، اما ناامن برای اطلاعات حساس).

POST: داده‌ها در بدنه درخواست ارسال می‌شوند (ایمن‌تر و مناسب برای فرم‌های ثبت‌نام یا ورود).

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

target: کنترل نحوه باز شدن صفحه پاسخ (مانند _blank برای تب جدید).

autocomplete: ویژگی HTML5 برای فعال/غیرفعال کردن تکمیل خودکار (مثلاً autocomplete=”on”).

novalidate: برای غیرفعال کردن validation مرورگر (در صورت نیاز به validation سفارشی).

در کلاس آموزش HTML-CSS آموزشگاه پرتو، ما بر ترکیب این ویژگی‌ها با استایل‌های CSS تمرکز داریم تا فرم‌هایی واکنشگرا و زیبا بسازید.

آموزش تگ Input

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

در HTML5، انواع جدیدی مانند email، number و date اضافه شده تا validation آسان‌تر شود.

ورودی متن (Type Text)

ایجاد فیلد تک‌خطی برای متن:

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

ویژگی‌های مهم:

name: برای ارسال داده به سرور ضروری است.

maxlength: محدودیت تعداد کاراکترها (مثلاً برای جلوگیری از ورودی‌های طولانی).

size: عرض فیلد (در CSS مدرن، بهتر است از width استفاده کنید).

readonly: فیلد قابل خواندن اما غیرقابل ویرایش.

disabled: فیلد غیرفعال.

value: مقدار پیش‌فرض.

placeholder: متن راهنما (ویژگی HTML5 برای بهبود UX).

مثال

<form>
  نام: <input type="text" name="first-name" value="نام پیش‌فرض" maxlength="50" required>
form>

ورودی رمز عبور (Type Password)

برای فیلدهای امن

<input type="password" name="password" minlength="8" required>

این نوع ورودی کاراکترها را پنهان می‌کند و با ویژگی minlength در HTML5، حداقل طول را کنترل می‌کند.

دکمه‌های رادیویی (Type Radio)

برای انتخاب تک‌گزینه‌ای

<input type="radio" name="gender" value="male" id="male">
<label for="male">مردlabel>
<input type="radio" name="gender" value="female" id="female">
<label for="female">زنlabel>

نکته: استفاده از برای دسترسی‌پذیری بهتر (Accessibility) در استانداردهای روز ضروری است.

چک‌باکس‌ها (Type Checkbox)

برای انتخاب چندگزینه‌ای

<input type="checkbox" name="hobbies" value="reading" checked>
<label>کتاب‌خوانیlabel>

ویژگی checked برای انتخاب پیش‌فرض.

دکمه ارسال (Type Submit)

برای ارسال فرم

<input type="submit" value="ارسال فرم">

دکمه ریست (Type Reset)

برای پاک کردن ورودی‌ها

<input type="reset" value="پاک کردن">

با شرکت در کلاس آموزش جاوااسکریپت میتوانید این دکمه ها را پویا و کاربردی نمایید.

آموزش تگ Textarea: ورودی‌های چندخطی

برای متن‌های طولانی مانند نظرات

<textarea name="message" rows="5" cols="30" placeholder="پیام خود برای پرتو را بنویسید" required>textarea>

ویژگی‌های آپدیت‌شده:

maxlength و minlength برای کنترل طول متن.

گروه‌ بندی عناصر با Fieldset و Legend

برای سازماندهی فرم

<fieldset>
  <legend>اطلاعات شخصی دانشجوlegend>
  
fieldset>

این ساختار سئو را بهبود می‌بخشد و دسترسی‌پذیری را افزایش می‌دهد.

لیست‌های کشویی با Select و Option

ایجاد منوهای انتخابی

<select name="country">
  <option value="ir" selected>ایرانoption>
  <option value="us">آمریکاoption>
select>

ویژگی multiple برای انتخاب چندگانه در HTML5

نکات پیشرفته برای فرم‌های HTML5

Validation داخلی: از ویژگی‌هایی مانند pattern (برای regex) استفاده کنید.

امنیت: همیشه از HTTPS برای فرم‌های حساس استفاده کنید.

بهینه‌سازی موبایل: فرم‌ها را با CSS responsive طراحی کنید.

ادغام با CSS و JS: در دوره آموزش HTML-CSS، یاد می‌گیرید چگونه فرم‌ها را استایل دهید و با JavaScript validate کنید.

اگر می‌خواهید مهارت‌های خود را ارتقا دهید، در دوره آموزش طراحی سایت آموزشگاه پرتو ثبت‌نام کنید. این آموزش‌ها بر اساس آخرین استانداردهای وب مانند HTML5 و CSS3 تدوین شده‌اند و به شما کمک می‌کنند سایت‌های حرفه‌ای بسازید. برای اطلاعات بیشتر، با ما تماس بگیرید!