فرم ها در HTML

فرم‌ها در HTML

یک فرم HTML برای جمع‌آوری ورودی کاربر استفاده می‌شود. ورودی کاربر اغلب برای پردازش به یک سرور ارسال می‌شود.

مثال

First name:
John

Last name:
Doe

عنصر <form>

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

<form>
.
form elements
.
</form>

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

تمام عناصر مختلف فرم در این فصل پوشش داده شده‌اند: عناصر فرم در HTML.

عنصر <input>

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

در اینجا چند مثال آمده است:

فیلدهای متنی (Text Fields)

تگ <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 بالا در مرورگر به این صورت نمایش داده می‌شود:

First name:

Last name:

نکته: خود فرم قابل مشاهده نیست. همچنین توجه داشته باشید که عرض پیش‌فرض یک فیلد ورودی ۲۰ کاراکتر است.

عنصر <label>

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

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

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

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

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

تگ <input type="radio"> یک دکمه رادیویی تعریف می‌کند. دکمه‌های رادیویی به کاربر اجازه می‌دهند فقط یکی از تعداد محدودی گزینه را انتخاب کند.

مثال

یک فرم با دکمه‌های رادیویی:

<p>زبان وب مورد علاقه خود را انتخاب کنید:</p>
<form>
  <input type="radio" id="html" name="fav_language" value="HTML" />
  <label for="html">HTML</label><br />
  <input type="radio" id="css" name="fav_language" value="CSS" />
  <label for="css">CSS</label><br />
  <input type="radio" id="javascript" name="fav_language" value="JavaScript" />
  <label for="javascript">JavaScript</label>
</form>

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

Choose your favorite Web language:

 HTML
 CSS
 JavaScript

چک‌باکس‌ها (Checkboxes)

تگ <input type="checkbox"> یک چک‌باکس تعریف می‌کند. چک‌باکس‌ها به کاربر اجازه می‌دهند صفر یا چند گزینه را از تعداد محدودی انتخاب کند.

مثال

یک فرم با چک‌باکس‌ها:

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" />
  <label for="vehicle1"> من دوچرخه دارم</label><br />
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car" />
  <label for="vehicle2"> من ماشین دارم</label><br />
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat" />
  <label for="vehicle3"> من قایق دارم</label>
</form>

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

 I have a bike
 I have a car
 I have a boat

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

تگ <input type="submit"> یک دکمه برای ارسال داده‌های فرم به یک پردازشگر فرم (form-handler) تعریف می‌کند. پردازشگر فرم معمولاً یک فایل روی سرور است که اسکریپتی برای پردازش داده‌های ورودی دارد. پردازشگر فرم در خصوصیت action فرم مشخص می‌شود.

مثال

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

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

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

First name:
John

Last name:
Doe

خصوصیت name برای <input>

توجه داشته باشید که هر فیلد ورودی برای اینکه ارسال شود، باید یک خصوصیت name داشته باشد. اگر خصوصیت name حذف شود، مقدار آن فیلد ورودی اصلاً ارسال نخواهد شد.

مثال

این مثال مقدار فیلد ورودی «نام» را ارسال نخواهد کرد:

<form action="/action_page.php">
  <label for="fname">First name:</label><br />
  <input type="text" id="fname" value="John" /><br /><br />
  <input type="submit" value="Submit" />
</form>