نمونه ای از یک فرم در HTML :
<"form action = "/action_page.php >
<First name: <br
<" input type = "text " name = "firstname " value = "Mickey >
<br >
<Last name: <br
<" input type = "text " name = "lastname " value = "Mouse >
<br > <br >
<"input type = "submit " value = "Submit >
<form/ >
خروجی کد بالا در تصویر زیر نشان داده شده است :
در مثال قبل از عناصر دیگری هم مانند Input ها، داخل تگ فرم استفاده شده است که در همین فصل به آنها خواهم پرداخت.
دقت داشته باشید که از دکمه ی submit برای ارسال اطلاعات فرم به سرور استفاده میشود.
عنصر <form>
عنصر <form> در HTML فرمی را تعریف میکند که برای جمع آوری داده های ورودی کاربر استفاده میشود.
<form >
.
form elements
.
<form />
فرم ها در HTML در خود عناصر دیگری را جای میدهند که عناصر form نام دارند.
عناصر form از انواع مختلف عناصر input همچون فیلد های متن ، چک باکس ها ، رادیو باتن ها ، باتن های سابمیت و غیره هستند.
عنصر <input>
عنصر <input> مهمترین عنصر در فرم است.
عنصر <input> بسته به خاصیت type آن ، میتواند به شکل های مختلفی نمایش یابد.
جدول زیر بعضی از انواع <input> را نشان میدهد :
| نوع |
توضیح |
| <"input type="text> |
یک فیلد ورودی تک خطی را تعریف میکند |
| <"input type="radio> |
یک رادیو باتن را تعریف میکند (برای انتخاب یک گزینه از چند انتخاب) |
| <"input type="submit> |
یک باتن سابمیت را تعریف میکند (برای ارسال داده های فرم به سرور) |
ورودی متن (Text Input)
<input type="text"> یک فیلد ورودی یک خطی را تعریف میکند :
<form >
<First name: <br
<" input type = "text " name = "firstname >
<br >
< Last name: <br
<" input type = "text " name = "lastname >
<form/ >
نکته : عنصر فرم خود قابل نمایش نیست. اما عناصر داخل آن در مرورگر نمایش داده میشوند.
ورودی های رادیو باتن (Radio Button)
<input type="radio"> یک رادیو باتن را تعریف میکند.
رادیو باتن ها به کاربر اجازه میدهند از چندین انتخاب یکی را برگزیند :
<form >
<input type = "radio " name = "gender " value = "male " checked > Male <br >
<input type = "radio " name = "gender " value = "female " > Female <br >
input type = "radio " name = "gender " value = "other " > Other>
<form/ >
عنصر Submit در فرم
<"input type="submit> یک باتنی را برای ارسال داده های ورودی به سمت سرور تعریف میکند.
البته الزامی ندارد که مقصد همیشه سرور باشد در واقع دکمه ی سابمیت، داده ها را به اکشنی که در تگ فرم مشخص شده ارسال میکند.
معمولا این اکشن صفحه ای سمت سرور خواهد بود که داده ها را پردازش میکند (منظور از پردازش هر عملی روی داده ها از جمله ثبت آنها در پایگاه داده و ... است).
آدرس صفحه ی مقصد در صفت action از فرم قرار داده میشود :
<" form action = "/action_page.php >
<First name: <br
<" input type = "text " name = "firstname " value = "Mickey >
<br >
<Last name: <br
<" input type = "text " name = "lastname " value = "Mouse >
<br > <br >
<" input type = "submit " value = "Submit >
<form/ >
خروجی نمونه کد بالا در مثال اول همین صفحه نشان داده شد.
صفت Action
صفت action عملی را تعریف میکند که وقتی فرم به سمت سرور ارسال میشود باید انجام بشود.
به طور معمول، پس کلیک کاربر روی دکمه ی submit ، داده های فرم به صفحه ی وبی در سرور ارسال میشود.
در مثال بالا داده های فرم به صفحه ای در سرور به نام "action_page.php/" ارسال میشود. این صفحه شامل اسکریپت های سمت سروری خواهد بود که داده های ارسالی را مدیریت میکند :
<" form action = "/action_page.php >
اگر صفت action مقدار دهی نشود، این صفت با آدرس صفحه ی جاری مقدار دهی میشود.
دقت داشته باشید که در مثال های بالا فرض بر این گذاشته شده است که سرور از زبان سمت سرور php استفاده میکند. تفاوتی برای زمانی که سرور از زبان های دیگری استفاده کند وجود ندارد فقط مقدار صفت action تغییر میکند.
صفت Method
صفت Method ، روش GET یا POST را که هنگام ارسال داده ها باید استفاده شود مشخص میکند.
<" form action = "/action_page.php " method = "get >
یا
<" form action = "/action_page.php " method = "post >
چه موقع از GET استفاده کنیم؟
روش پیشفرض برای ارسال داده ها GET است.
وقتی از GET برای ارسال داده ها استفاده میکنید داده های ارسالی در آدرس مرورگر قابل مشاهد خواهند بود.
action_page.php?firstname=Mickey&lastname=Mouse/
نکته : از روش GET برای ارسال داده ای حساس استفاده نکنید! روش GET برای داده های کم و غیر حساس مناسب است زیرا در این روش محدودیت اندازه وجود دارد.
به هیچ وجه در هنگام دریافت رمز عبور از کاربران از روش GET برای ثبت آن استفاده نکنید زیرا رمز عبور در آدرس مرورگر نشان داده میشود.
چه موقع از POST استفاده کنیم؟
همیشه برای ارسال داده های شخصی و اطلاعات حساس از روش POST استفاده کنید. در روش POST داده های ارسالی در آدرس مرورگر نمایش داده نمیشوند.
POST محدودیتی در اندازه ی داده های ارسالی ندارد و میتواند برای ارسال مقادیر بزرگ داده استفاده شود.
صفت Name
در عنصر form هر فیلد ورودی باید صفتی به نام name داشته باشد که مقدارش ارسال شود.
اگر صفت name جا انداخته شود، داده ی آن فیلد ورودی به سمت سرور ارسال نمیشود.
در نمونه مثال زیر تنها مقدار فیلد ورودی "Last name" به سمت سرور ارسال میشود.
<" form action = "/action_page.php >
<First name: <br
<" input type = "text " value = "Mickey >
<br >
<Last name: <br
<" input type = "text " name = "lastname " value = "Mouse >
<br > <br >
<" input type = "submit " value = "Submit >
<form/ >
گروه بندی فرم ها با استفاده از تگ <fieldset>
عنصر <fieldset> برای گروه بندی داده های مرتبط در فرم استفاده میشود.
عنصر <legend> یک caption را برای عنصر <fieldset> تعریف میکند.
<" form action = "/action_page.php >
<fieldset >
<legend >Personal information: </legend >
<First name: <br
<" input type = "text " name = "firstname " value = "Mickey >
<br >
<Last name: <br
<" input type = "text " name = "lastname " value = "Mouse >
<br > <br >
<" input type = "submit " value = "Submit >
<fieldset/ >
<form/ >
خروجی کد بالا به شکل زیر خواهد بود :
منبع:learnsource