فرم ها (Forms) در HTML

فرم ها (Forms) در HTML

زمان مطالعه

5 دقیقه

تعداد بازدید

120

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب
سامان محمدپور
در مورد نویسنده : موفقیت بستگی به تلاش هر شخص داره، هممون ب همون اندازه که تلاش کردیم موفق شدیم.

فرم ها (Forms) در HTML

فرم ها (Forms) در HTML

زمان مطالعه

5 دقیقه

تعداد بازدید

120

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب

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

مثال: در زیر یک نمونه فرم برای شما آورده ایم که نام و نام خانوادگی کاربر  را دریافت می کند و آن را به سرور ارسال می کند.

 

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

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

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body>
</html>

 

 

فرم ها (Forms) در زبان نشانه گذاری HTML

 

عنصر form

عنصر form در HTML برای ایجاد یک فرم، برای دریافت ورودی های کاربرد استفاده می شود. که قالب آن به شکل زیر است:

 

<form>
.
form elements
.
</form>

 

 

عنصر form محفظه ای برای انواع عناصر ورودی است مانند:

  • فیلدهای متنی
  • Checkbox ها
  • Radio button ها
  • دکمه ارسال
  • و غیره

عنصر input در HTML

عنصر input پرکاربردترین عنصر در فرم ها در HTML است.

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

در جدول زیر برخی از انواع input را برای شما آورده ایم:

 

برخی مقادیر ویژگی type در input

مقادیر ویژگی type در input توضیحات
Text فیلد ورودی متن تک خطی را نمایش می دهد
Radio نمایش دکمه رادیویی (برای انتخاب یکی از گزینه ها)
Checkbox یک کادر تایید (برای انتخاب هیچ یا بیشتر از چند گزینه)
Submit نمایش دکمه ارسال (برای ارسال فرم)
Button یک دکمه قابل کلیک کردن را نمایش می دهد

 

در مقاله های آینده به طور اختصاصی به بررسی همه انواع آن خواهیم پرداخت.

فیلد text

این یک فیلد ورودی تک خطی را مشخص می کند که برای ورود متن استفاده می شود.

مثال: در زیر یک فیلد ورودی برای ورود متن تعریف کرده ایم.

 

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

 

فیلد text در زبان نشانه گذاری HTML

 

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

 

عنصر lable

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

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

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

عنصر label همچنین به کاربرانی که، مشکل کلیک بر روی عناصر کوچک (مانند دکمه های رادیویی یا کادر تایید) را دارند، کمک می کند – زیرا وقتی کاربر بر روی متن label عنصر ورودی کلیک می کند، دکمه رادیویی یا کادر تایید مورد نظر انتخاب می شود.

ویژگی for برچسب lable باید با ویژگی id عنصر input برابر باشد تا آن ها را به هم متصل کند.

دکمه رادیویی

مقدار radio در ویژگی type عنصر input باعث ایجاد یک دکمه رادیویی می شود.

دکمه رادیویی به کاربر اجازه می دهد از بین تعداد محدودی از گزینه ها یکی را امنخاب کند.

مثال: در زیر یک فرم با دکمه رادیویی برای شما آورده ایم

 

<p>Choose your favorite Web language:</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

 

کادر تایید

مقدار checkbox در ویژگی type عنصر input باعث ایجاد یک کادر تایید می شود.

کادر تایید به کاربر اجازه می دهد از بین تعداد محدودی از گزینه ها هیچ گزینه و بیشتر از یک گزینه را انتخاب کنند.

مثال: در زیر یک فرم با دکمه رادیویی برای شما آورده ایم

 

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

 

کادر تایید در زبان نشانه گذاری HTML

 

 

دکمه ارسال

مقدار submit در ویژگی type عنصر input باعث ایجاد یک دکمه ارسال برای ارسال داده های ورودی فرم به یک کنترل کننده فرم می شود.

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

کنترل کننده فرم در ویژگی action فرم مشخص شده است.

مثال: در زیر یک فرم با دکمه ارسال برای شما آورده ایم

 

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

 

دکمه ارسال در زبان نشانه گذاری HTML

 

ویژگی name برای input

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

اگر ویژگی 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>

 

ویژگی name برای input در زبان نشانه گذاری HTML

 

سامان محمدپور
در مورد نویسنده : موفقیت بستگی به تلاش هر شخص داره، هممون ب همون اندازه که تلاش کردیم موفق شدیم.


پرسش و پاسخ
0
دوره پیشنهادی
دوره پیشنهادی