آموزش فرم ها در html

از سری آموزش طراحی سایت از سایت آموزش برنامه نویسی می خواهیم در مورد فرم های html صحبت کنیم. با ما همراه باشید.

عنصر form

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

عنصر FORM، فرم HTML  را تعریف می کند:

1 2 3 4 5

<form> . form elements . form>

  فرم های HTML حاوی عناصر form است.

عنصر form انواع مختلف از عناصر ورودی دارد مثل چک باکس، دکمه های رادیویی، دکمه تایید، و غیره.

عنصر input
عنصر input از مهم ترین عناصر form است.
عنصر input متغییرهای زیادی دارد که به نوع خصوصیت (type attribute) بستگی دارد.
انواعی که در این آموزش استفاده خواهند شد در جدول زیر آورده شده است:

در ادامه درباره انواع ورودی ها اطلاعات بیشتری خواهیم داد.
Text Input
“input type=text” تعریف یک فیلد ورودی یک خطی برای وارد کردن متن تعریف می کند:
مثال:

1 2 3 4 5 6

<form>   First name:   <input type="text" name="firstname">   Last name:   <input type="text" name="lastname"> form>

در زیر نحوه نمایش کد بالا در مرورگر نشان داده شده است:

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

Radio Button Input

“input type=radio” برای  تعریف یک دکمه رادیویی استفاده می شود.

دکمه های رادیویی به کاربر اجازه می دهد یکی از چند گزینه را انتخاب کند (تعداد گزینه ها محدود است):

1 2 3 4 5

<form>   <input type="radio" name="gender" value="male" checked> Male   <input type="radio" name="gender" value="female"> Female   <input type="radio" name="gender" value="other"> Other form>

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

Submit Button

“input type=submit” یک دکمه برای ارسال  فرم به رسیدگی کننده فرم (form-handler)  تعریف می کند.

form-handler معمولا یک صفحه سرور با یک اسکریپت برای پردازش داده های ورودی است.

form-handler معمولا در خصوصیت  action  فرم مشخص می شود:

مثال:

1 2 3 4 5 6 7 8

<form action="action_page.php">   First name:   <input type="text" name="firstname" value="Mickey">   Last name:   <input type="text" name="lastname" value="Mouse">     <input type="submit" value="Submit"> form>

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

خصوصیت یا ویژگی Action

ویژگی action اقداماتی که هنگام ارسال فرم انجام می شود را تعریف می کند.
روش رایج برای ارائه یک فرم به سرور، استفاده از دکمه submit است.
به طور معمول، فرم به یک صفحه وب بر روی یک وب سرور ارسال میشود.
در مثال بالا، یک اسکریپت سمت سرور مشخص شده است که مسئولیت رسیدگی به فرم ارسالی را دارد:

1	<form action="action_page.php">

اگر ویژگی action حذف شود، پیش فرض action به صفحه فعلی تنظیم شده است.

خصوصیت یا ویژگی Method
ویژگی method روش HTTP (GET یاPOST) برای ارسال فرم را مشخص می کند:

1	<form action="action_page.php" method="get">

یا

1	<form action="action_page.php" method="post">

چه زمانی از GET استفاده کنیم؟
شما می توانید از GET استفاده کنید (روش پیش فرض GET است).
اگر فرم منفعل باشد (مانند پرس و جوی موتور جستجو)، و بدون اطلاعات حساس باشد.
هنگام استفاده از GET، داده های فرم در آدرس صفحه قابل مشاهده خواهند بود.

GET بهترین درخواست برای داده های کوتاه است. محدودیت اندازه در مرورگر تنظیم می شود.

چه زمانی از POST استفاده کنیم؟
از POST استفاده کنید.
اگر فرم اطلاعات جدیدی دارد، یا شامل اطلاعات حساس (رمز عبور) است.
POST امنیت بهتری ارائه می دهد چون داده های ارسال شده در آدرس صفحه قابل رویت نیست.

ویژگی یا خاصیت Name 
برای ارسال درست، هر فیلد ورودی باید ویژگی Name داشته باشد.
در این مثال تنها فیلد ورودی”Last name ” ارسال شده است.
مثال:

1 2 3 4 5 6 7 8

<form action="action_page.php">   First name:   <input type="text" value="Mickey">   Last name:   <input type="text" name="lastname" value="Mouse">     <input type="submit" value="Submit"> form>

گروه بندی داده های فرم با fieldset
عنصر fieldset داده مرتبط در فرم را گروه بندی می کند.
عنصر legend یک عنوان برای عنصر fieldset تعریف می کند.
مثال:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<form action="action_page.php">   <fieldset>   <legend>Personal information:legend>       First name:     <input type="text" name="firstname" value="Mickey">     Last name:     <input type="text" name="lastname" value="Mouse">       <input type="submit" value="Submit">   fieldset>   form>

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

ویژگی های فرم HTML
عنصر

در HTML، با تمام ویژگی های ممکن ، شبیه کد زیر خواهد بود:

1 2 3 4 5

<form action="action_page.php" method="post" target="_blank" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate> . form elements . form>

و در آخر لیستی از ویژگی های عنصر form را برای شما گردآوری کرده ایم:

 

منبع : آموزش طراحی سایت