از سری آموزش طراحی سایت از سایت آموزش برنامه نویسی می خواهیم در مورد فرم های html صحبت کنیم. با ما همراه باشید.
عنصر form
فرم های HTML برای گرفتن ورودی کاربر استفاده می شوند.
عنصر FORM، فرم HTML را تعریف می کند:
|
1
2
3
4
5
|
<
form
>
.
form elements
.
|
فرم های 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"
>
|
در زیر نحوه نمایش کد بالا در مرورگر نشان داده شده است:
توجه:خود فرم قابل رویت نیست. همچنین توجه داشته باشید که عرض پیش فرض یک فیلد متن ۲۰ کاراکتر است.
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
|
در زیر نحوه نمایش کد 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"
>
|
در زیر نحوه نمایش کد 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"
>
|
گروه بندی داده های فرم با 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:
First name:
<
input
type
=
"text"
name
=
"firstname"
value
=
"Mickey"
>
Last name:
<
input
type
=
"text"
name
=
"lastname"
value
=
"Mouse"
>
<
input
type
=
"submit"
value
=
"Submit"
>
|
در زیر نحوه نمایش کد 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 را برای شما گردآوری کرده ایم:
منبع : آموزش طراحی سایت
مشاهده پست مشابه : کارورزی حقوق در دفتر وکالت+کارآموزی حقوق دفتر وکالت
