آموزش گام به گام و تصویری HTML قسمت بیستم و دوم (ایران گستر)
نوشته شده توسط : فاطمه فیصلی

HTML

ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.

 

 

[caption id="attachment_3063" align="aligncenter" width="255"]HTML HTML[/caption]

عنصر <form>

عنصر <form> فرمی را تعریف می کند که برای دریافت داده های کاربر مورد استفاده قرار می گیرد و به طور کل به این شکل است:(ایران گستر)

هر فرم HTML ای دارای عناصر فرم (form elements) است و به خودی خود هیچ کاری را نمی تواند انجام دهد. این عناصر فرم در واقع انواع مختلف دریافت داده ها هستند؛ به طور مثال text field (مانند فیلد دریافت نام و نام خانوادگی کاربر)، checkbox (فیلد هایی که کاربر آن ها را تیک می زند) و … . ما می خواهیم با این عناصر به صورت خلاصه آشنا شویم.(ایران گستر)

 

عنصر <input>

عنصر <input> مهم ترین و شناخته شده ترین عنصر یک فرم است. ظاهر این تگ بر اساس attribute ای به نام type تغییر می کند و بستگی دارد که ما به این attribute چه مقداری داده باشیم:(ایران گستر)

Type توضیحات
<input type=”text”> یک فیلد متنی خالی به ما می دهد
<input type=”radio”> یک radio button به ما می دهد (انتخاب یک گزینه بین چند گزینه)
<input type=”submit”> یک submit button به ما می دهد (برای ثبت نهایی و ارسال فرم)

حالت <"input type="text>

نوع text یک فیلد متنی خالی به ما می دهد:(ایران گستر)

مشاهده ی خروجی در JSBin

نکته: در مورد این فرم باید به دو مورد توجه کرد؛ اولا خود تگ form قابل مشاهده نیست و ثانیا عرض پیشفرض فیلدهای text برابر با 20 کاراکتر است.(ایران گستر)

حالت <"input type="radio>

این نوع از type یک radio button را تعریف می کند. این نوع دکمه ها به کاربر اجازه می دهند که از بین چند گزینه تنها یک گزینه را انتخاب کند. در مثال زیر از کاربر خواسته ایم که جنسیت خود را به ما بگوید:(ایران گستر)

مشاهده ی خروجی در JSBin

حالت <"input type="submit>

در این نوع type، دکمه ای برای ارسال نهایی فرم به form-handler ایجاد می شود. form-handler ها در اکثر اوقات صفحات اسکریپت نویسی شده ای هستند که اطلاعات کاربر را پردازش می کنند. این صفحات در attribute ای به نام action آدرس دهی می شوند. به مثال زیر نگاه کنید:(ایران گستر)

مشاهده ی خروجی در JSBin

پیامی که پس از ثبت فرم به شما نشان داده می شود توسط سرور و پس از بررسی داده ها تولید شده است.(ایران گستر)

 

وظیفه ی action

attribute ای به نام action در تمام فرم ها وجود دارد (به غیر از موارد معدودی که استثناء هستند) و تعیین می کند که پس از ثبت نهایی فرم و ارسال آن چه اتفاقی بیفتد. البته خودِ action کاری انجام نمی دهد بلکه فرم و اطلاعاتش را به صفحه ی اسکریپتی هدایت می کند تا پردازش شود و عکس العملی نشان دهد.(ایران گستر)

در مثال بالا، فرم به صفحه ای به نام action_page.php ارسال شد که شامل اسکریپت های server-side (مانند PHP یا ASP.NET و …) است:(ایران گستر)

نکته: اگر action را کاملا حذف کنید، فرم به همان صفحه ای که در آن هستید ارسال می شود.(ایران گستر)
 

وظیفه ی target

target تعیین می کند که پس از ارسال فرم، پاسخ در یک سربرگ جدید در مرورگر باز شود، در یک frame دیگر باز شود، در همان صفحه باز شود و الی آخر. مقدار پیش فرض آن self_ است که می گوید فرم در همین پنجره ارسال شود اما اگر می خواهید در یک پنجره ی جدید باز شود باید از blank_ استفاده کنید.(ایران گستر)

مثال:

مشاهده ی خروجی در JSBin

مقادیر مجاز دیگر parent_ و top_ و یا نام یک iframe هستند.(ایران گستر)

 

وظیفه ی method

در فرم ها یک attribute بسیار مهم دیگری به نام method (به معنی «روش») وجود دارد. در واقع این attribute روش یا متد ارسال اطلاعات را مشخص می کند که یا می تواند GET باشد و یا POST.(ایران گستر)

مثالی از متد GET:

مشاهده خروجی در JSBin

مثالی از متد POST:(ایران گستر)

مشاهده خروجی در JSBin

 

تفاوت GET و POST چیست؟

حالت پیش فرض مرورگر برای ارسال اطلاعات حالت GET است اما زمانی که از GET استفاده می شود تمام اطلاعات ثبت شده در نوار آدرس مرورگر نمایان خواهند بود (رجوع کنید به دو مثال بالا):(ایران گستر)

نکاتی در مورد GET:(ایران گستر)

  • داده های فرم را به صورت جفت های name/value در URL قرار می دهد
  • طول این URL محدود است (حدود 3000 کاراکتر)
  • هیچ گاه برای ارسال اطلاعات حساس مانند رمز عبور از GET استفاده نکنید چرا که در نوار آدرس مرورگر قابل مشاهده خواهد بود
  • مناسب برای کاربرانی که می خواهند نتایج را Bookmark کنند
  • GET معمولا مناسب موقعیت هایی است که هیچ اطلاعات حساسی در آن رد و بدل نمی شود، مانند query string های گوگل زمانی که چیزی را در آن سرچ می کنید

اما اگر داده های شما حاوی اطلاعات مهم، شخصی، حساس و … است حتما باید از POST استفاده کنید. این متد داده های شما را در نوار آدرس نشان نمی دهد

نکاتی در مورد POST:

  • POST هیچ محدودیت اندازه ای ندارد و می توانید از طریق آن حجم بزرگی از داده ها را ارسال کنید
  • نتایجی که با POST ارسال شوند قابل bookmark شدن نخواهند بود

 

وظیفه ی name

هر فیلد ورودی (input) باید یک name داشته باشد و اگر فیلدی آن را نداشته باشد، داده های درون آن فیلد اصلا ارسال نمی شوند.(ایران گستر)

در مثال زیر می توانید ببینید که تنها Last name ثبت و ارسال می شود:(ایران گستر)

جمع کردن داده در فرم ها

عنصر <fieldset> داده های مرتبط با هم را در یک گروه جمع می کند. تگ <legend> نیز توضیحی درباره ی <fieldset> ارائه می کند. به مثال زیر دقت کنید:(ایران گستر)

مشاهده خروجی در JSBin





:: بازدید از این مطلب : 16
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : جمعه 26 مهر 1398 | نظرات ()
مطالب مرتبط با این پست
لیست
می توانید دیدگاه خود را بنویسید


نام
آدرس ایمیل
وب سایت/بلاگ
:) :( ;) :D
;)) :X :? :P
:* =(( :O };-
:B /:) =DD :S
-) :-(( :-| :-))
نظر خصوصی

 کد را وارد نمایید:

آپلود عکس دلخواه: