فرم چیست

فرم HTML عنصری است که برای جمع آوری و دریافت ورودی از کاربر استفاده می شود. ورودی کاربر اغلب برای پردازش به سمت سرور ارسال می شود. منظور از ورودی های کاربر داده هاییست که در قالب فرم از کاربر درخواست می کنیم . این داده ها مانند نام ، نام خانوادگی ، آدرس ، شماره تماس و غیره بعد از دریافت از کاربر به سمت سرور ارسال و پردازش می شوند . فرم ها میتوانند در مواردی مانند ثبت نام کاربر ، صفحه ورود ، صفحه ارسال پیغام و ... مورد استفاده قرار بگیرند .

عنصر <form> 

عنصر <form> برای ایجاد یک فرم HTML جهت دریافت ورودی از کاربر استفاده می شود:

<form>
.
عناصر فرم
.
</form>

عنصر <form> محفظه ای برای انواع مختلف عناصر ورودی است، مانند: فیلدهای متنی، چک باکس ها، دکمه های رادیویی، دکمه های ارسال و غیره.

این عناصر فرم در درس های آتی این فصل پوشش داده شده است و شما یاد خواهید گرفت.

عنصر<input> 

عنصر <input> پر استفاده ترین عنصر فرم است.

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

در اینجا چند نمونه آورده شده است:

انواع مختلف ورودی در درس های آتی این فصل پوشش داده شده است

فیلدهای متنی

<input type="text"> یک فیلد ورودی تک خطی را برای ورودی متن تعریف می کند.

مثال
فرمی با فیلدهای ورودی برای متن:

<form>
  <label for="fname">نام:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">نام خانوادگی:</label><br>
  <input type="text" id="lname" name="lname">
</form>

به این ترتیب کد HTML بالا در یک مرورگر نمایش داده می شود:

توجه داشته باشید خود عنصر فرم قابل مشاهده نیست. همچنین توجه داشته باشید که عرض پیش فرض یک فیلد ورودی 20 کاراکتر است.

 عنصر<label>

به استفاده از عنصر <label> در مثال بالا توجه کنید.

تگ <label> یک برچسب برای بسیاری از عناصر فرم تعریف می کند.

عنصر <label> برای کاربران با نرم افزار صفحه‌خوان نیز مفید است، زیرا وقتی کاربر روی عنصر ورودی کلیک می‌کند، صفحه‌خوان برچسب را با صدای بلند می‌خواند.

عنصر <label> همچنین به کاربرانی کمک می کند که در کلیک کردن بر روی مناطق بسیار کوچک (مانند دکمه های رادیویی یا چک باکس ها) مشکل دارند - زیرا وقتی کاربر روی متن موجود در عنصر <label> کلیک می کند، دکمه رادیویی/چک باکس را تغییر می دهد.

ویژگی for تگ <label> باید برابر با ویژگی id عنصر <input> باشد تا آنها را به یکدیگر متصل کند.

دکمه ارسال

<input type="submit"> دکمه ای را برای ارسال داده های فرم به سمت سرور تعریف می کند.

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

آدرس پردازشگر و عملگر فرم در ویژگی action فرم مشخص شده است.

مثال
فرمی با دکمه ارسال:

<form action="/action_page.php">
  <label for="fname">نام</label><br>
  <input type="text" id="fname" name="fname" value="محمد"><br>
  <label for="lname">نام خانوادگی</label><br>
  <input type="text" id="lname" name="lname" value="محمدی"><br><br>
  <input type="submit" value="ارسال">
</form>

این کد به شکل زیر نمایش داده می شود

ویژگی نام برای <input>

توجه داشته باشید که هر فیلد ورودی باید دارای یک ویژگی نام برای ارسال به سمت سرور باشد.

اگر ویژگی name حذف شود، مقدار فیلد ورودی ارسال نمی شود.

مثال
این مثال مقدار فیلد ورودی "نام" را ارسال نمی کند:

<form action="/action_page.php">
  <label for="fname">نام</label><br>
  <input type="text" id="fname" value="محمد"><br><br>
  <input type="submit" value="ارسال">
</form>