آموزش کار با فرم ها یا Forms در HTML

آموزش کار با فرم ها یا Forms در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با فرم ها یا Forms در HTML با من همراه باشید.

فرم ها یا Forms در HTML

دوستان محترم این بخش میخواهیم با فرم ها و نحوه ی ایجاد آنها در یک صفحه ی وب HTML آشنا شویم و ان اشالله در بخش های بعدی ما با تگ هایی که میتوانیم در فرم ها استفاده نماییم نیز آشنا خواهیم شد.

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

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

خب در صفحات اینترنتی هم فرم ها وجود دارند و ما میتونیم از آنها استفاده های بسیار زیادی را داشته باشیم، بفرض مثال یک فرم برای ثبت نام کاربران در وبسایت مان یا یک فرم برای ارسال پیام و دیگر مواردی که میتوانیم در یک صفحه ی وب از فرم ها استفاده نماییم.

پس بطور کلی یک فرم برای جمع آوری اطلاعات از کاربران و همچنین ارسال این اطلاعات به پایگاه داده یک وبسایت می باشد، که امروزه تقریبا در هر وبسایتی یک فرم همانند فرم ورود یا ثبت نام وجود دارد.

کار با فرم ها یا Forms در HTML

بطور کلی در HTML ما با استفاده از تگ <form> میتوانیم یک فرم را ایجاد نماییم، سپس در این فرم ما باید از تگ ها یا عناصر مخصوص به فرم ها استفاده نماییم که ان شاالله در بخش های بعدی با تمامی تگ هایی که میتوان در فرم ها استفاده کرد آشنا خواهید شد.

شکل کلی برای استفاده از تگ <form> در HTML بصورت زیر می باشد :

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

امتحان کنید

اگر لطف بفرمایید و بروی دکمه امتحان کنید کلیک نمایید، شما در خروجی شکل کلی یک فرم را میتوانید مشاهده نمایید ،یک فرم ساده با ۲ دکمه و ۲ باکس متنی برای دریافت و ارسال داده ها .

صفت Action فرم ها در HTML

فرم ها در صفحات وب دارای یک صفت بنام action می باشند، که وظیفه این صفت ارسال اطلاعات وارد شده توسط کاربر به سرور سایت مورد نظر می باشد، یعنی کاربر اطلاعاتش را وارد میکند و سپس با زدن دکمه ثبت این اطلاعات به سرور و بطور کلی به پایگاه داده سایت مورد نظر ارسال می شود.

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

امتحان کنید

همانطور که مشاهده مینمایید با استفاده از صفت action در مثال بالا اطلاعات وارد شده توسط کاربر پس از کلیک بروی دکمه ثبت به یک صفحه بروی سرور بنام test.php ارسال می شوند.

صفت Target در تگ <form>

اگر بخش کار با لینک ها را در فری لرن دنبال کرده باشید میدانید که ما با استفاده از صفت target میتوانیم نحوه / چگونگی باز شدن صفحه ی مقصد را مشخص نماییم.

بصورت پیش فرض Target یا چگونگی باز شدن صفحه ی مقصد، تمامی لینک ها مقدار self_ می باشد یعنی اینکه وقتی ما بروی یک لینک کلیک مینماییم مقصد درون همان صفحه فعلی/جاری باز خواهد شد ولی به راحتی ما با استفاده از مقدار blank_ میتوانیم مقصد را درون یک تب جدید باز نماییم.

امتحان کنید

صفت Method فرم ها در HTML

اصلا صفت method چیست؟ وظیفه این صفت در فرم ها مشخص کننده نوع متد HTTP ارسالی (GET یا POST) در هنگام ارسال اطلاعات به سرور می باشد، که هر یک از نوع های بالا در ادامه با مثال مشاهده خواهید نمود.

صفت method دو مقدار میتونه داشته باشه :

• Get
• Post

مقدار Get در صفت method در فرم ها

اگر ما از مقدار Get درون صفت method استفاده نماییم، در هنگام ارسال اطلاعات به سرور، اطلاعات وارد شده توسط کاربر در نوار آدرس مرورگر قابل مشاهده می باشد. (لطفا به مثال زیر توجه نمایید)

حال لطفا به مثال زیر توجه نمایید و همچنین برای مشاهده خروجی بروی دکمه (امتحان کنید) کلیک نمایید.

امتحان کنید

مقدار Post در صفت method در فرم ها

برخلاف Get در صورت استفاده از مقدار Post دیگه اطلاعات ارسالی در نوار آدرس مرورگر نمایش داده نخواهد شد و از نظر امنیتی نیز این روش برای ارسال اطلاعات پیشنهاد میشود.

لطفا به مثال زیر توجه نمایید همچنین برای مشاهده خروجی بروی دکمه (امتحان کنید) کلیک نمایید.

امتحان کنید

چه موقع باید از مقادیر Get و Post استفاده نماییم؟

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

نکاتی درباره مقدار Get در صفت Method :

• داده های فرم درون نوار آدرس مرورگر نمایش داده می شود
• اندازه یا طول URL در این روش محدود می باشد (تقریبا تا ۳۰۰۰ کاراکتر)
• هرگز برای داده های محرمانه از این روش استفاده نکنید
• اگر داده هایتان حساس و محرمانه نیستند بهتر است از این روش استفاده نمایید

Post : وقتی داده هایمان حساس و از نظر امنیتی مهم هستند ما باید از این روش استفاده نماییم چونکه در این روش دیگه داده های ما در نوار آدرس مرورگر نمایش داده نخواهند شد.

نکاتی درباره مقدار Post در صفت Method :

• اندازه یا طول URL در این روش نامحدود می باشد (بی نهایت)

خب دوستان خسته نباشید به پایان این بخش یعنی آموزش کار با فرم ها یا Forms در HTML رسیدیم، لطفا و پیشنهاد میکنم حتما بخش های بعدی را مشاهده نمایید چون در بخش های بعدی میخواهیم با تگ هایی که میشه درون فرم ها استفاده کرد آشنا شویم.

• خلاصه ی این بخش
• با استفاده از تگ <form> و عناصر مورد استفاده در آن میتوان یک فرم برای دریافت اطلاعات از کاربر ایجاد کرد.
• صفت Action یکی از صفات ضروری در تگ فرم می باشد، این صفت اطلاعات وارد شده در فرم را به یک فایل یا صفحه در مقصد ارسال میکند.
• با استفاده از صفت Target میتوان نحوه باز شدن صفحه ی مقصد فرم را مشخص کرد، مثلا اگر این صفت مقدار blank_ بگیرد، صفحه ی مقصد در یک تب جدید از مرورگر باز شود.
• صفت Method در تگ فرم مشخص کننده نوع متد یا نحوه ارسال داده به سمت سرور می باشد.
• مقدار Get در صفت method باعث میشه اطلاعات ارسال شده در نوار آدرس مرورگر قابل مشاهده باشد.
• در صورت استفاده از مقدار Post در صفت method دیگه اطلاعات ارسالی در نوار آدرس مرورگر نمایش داده نخواهد شد.
• هرگز برای داده های محرمانه از مقدار Get در درون صفت Method استفاده نکنید.
• دانلود PDF این آموزش
• برای دانلود فایل PDF این آموزش کلیک نمایید