این آموزش در تاریخ ۱۳۹۹/۰۲/۱۲ آپدیت شده است.
آموزش کار با فرم ها یا Forms در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با فرم ها یا Forms در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
فرم ها یا Forms در HTML
دوستان محترم در این بخش میخواهیم با فرم ها و نحوه ی ایجاد آنها در یک صفحه ی وب HTML آشنا شویم و ان اشالله در بخش های بعدی ما با تگ هایی که میتوانیم در فرم ها استفاده نماییم نیز آشنا خواهیم شد.
شاید تا به الان برای یکبار هم که شده شما یک فرم کاغذی را از نزدیک دیده باشید و یا فرمی را تکمیل کرده باشید، خودمونی بخواهیم یک فرم را تعریف کنیم میگوییم به مجموعه ای از چندین فیلد (متنی ، انتخابی و..) در یک صفحه (کاغذ ، وب و..) که قرار است توسط یک شخص تکمیل شود را فرم میگوییم.
که باز البته فرم ها میتونن نوع های مختلفی داشته باشند، مثلا یک فرم تماس با یک شخص، فرم ورود به یک سیستم و یا فرم ثبت نام در یک سیستم و دیگر مواردی که ممکن است تا به الان با آنها روبرو شده باشید.
خب در صفحات اینترنتی هم فرم ها وجود دارند و ما میتونیم از آنها استفاده های بسیار زیادی را داشته باشیم، بفرض مثال یک فرم برای ثبت نام کاربران در وبسایت مان یا یک فرم برای ارسال پیام و دیگر مواردی که میتوانیم در یک صفحه ی وب از فرم ها استفاده نماییم.
پس بطور کلی یک فرم برای جمع آوری اطلاعات از کاربران و همچنین ارسال این اطلاعات به پایگاه داده یک وبسایت می باشد، که امروزه تقریبا در هر وبسایتی یک فرم همانند فرم ورود یا ثبت نام وجود دارد.
Free-Learn
کار با فرم ها یا Forms در HTML
بطور کلی در HTML ما با استفاده از تگ <form> میتوانیم یک فرم را ایجاد نماییم، سپس در این فرم ما باید از تگ ها یا عناصر مخصوص به فرم ها استفاده نماییم که ان شاالله در بخش های بعدی با تمامی تگ هایی که میتوان در فرم ها استفاده کرد آشنا خواهید شد.
شکل کلی برای استفاده از تگ <form> در HTML بصورت زیر می باشد :
|
1 2 3 |
<form> تگ های فرم در اینجا قرار میگیرند </form> |
Free-Learn
برای مثال دستورات زیر یک فرم را ایجاد میکنند که برای مشاهده خروجی دستورات زیر لطفا بروی دکمه (امتحان کنید) کلیک نمایید.
|
1 2 3 4 5 6 7 8 9 |
<form> نام:<br> <input type="text" name="firstname" value="Sadegh"> <br> فامیلی:<br> <input type="text" name="lastname" value="Asadi"> <br><br> <input type="submit" value="ارسال"> </form> |
اگر لطف بفرمایید و بروی دکمه امتحان کنید کلیک نمایید، شما در خروجی شکل کلی یک فرم را میتوانید مشاهده نمایید ،یک فرم ساده با ۲ دکمه و ۲ باکس متنی برای دریافت و ارسال داده ها .
Free-Learn
صفت Action فرم ها در HTML
فرم ها در صفحات وب دارای یک صفت بنام action می باشند، که وظیفه این صفت ارسال اطلاعات وارد شده توسط کاربر به سرور سایت مورد نظر می باشد، یعنی کاربر اطلاعاتش را وارد میکند و سپس با زدن دکمه ثبت این اطلاعات به سرور و بطور کلی به پایگاه داده سایت مورد نظر ارسال می شود.
برای مثال لطفا به فرم زیر توجه نمایید : (در مثال زیر یک صفحه بصورت تستی وجود دارد که میگوید اطلاعات فرم دریافت شده است، این ذخیره از اطلاعات ذخیره بین صفحه ای ایست و هیچ گونه اطلاعاتی از شما در پایگاه داده ذخیره نخواهد شد)
|
1 2 3 4 5 |
<form action="get-data.php"> . . . </form> |
همانطور که مشاهده مینمایید با استفاده از صفت action در مثال بالا اطلاعات وارد شده توسط کاربر پس از کلیک بروی دکمه ثبت به یک صفحه بروی سرور بنام get-data.php ارسال می شوند.
Free-Learn
صفت Target در تگ <form>
اگر بخش کار با لینک ها را در فری لرن دنبال کرده باشید میدانید که ما با استفاده از صفت target میتوانیم نحوه / چگونگی باز شدن صفحه ی مقصد را مشخص نماییم.
بصورت پیش فرض Target یا چگونگی باز شدن صفحه ی مقصد، تمامی لینک ها مقدار self_ می باشد یعنی اینکه وقتی ما بروی یک لینک کلیک مینماییم مقصد درون همان صفحه فعلی/جاری باز خواهد شد ولی به راحتی ما با استفاده از مقدار blank_ میتوانیم مقصد را درون یک تب جدید باز نماییم.
|
1 2 3 4 |
<form action="get-data.php" target="_blank"> . . </form> |
Free-Learn
صفت Method فرم ها در HTML
اصلا صفت method چیست؟ وظیفه این صفت در فرم ها مشخص کننده نوع متد HTTP ارسالی (GET یا POST) در هنگام ارسال اطلاعات به سرور می باشد، که هر یک از نوع های بالا در ادامه با مثال مشاهده خواهید نمود.
صفت method دو مقدار میتونه داشته باشه :
- Get
- Post
مقدار Get در صفت method در فرم ها
اگر ما از مقدار Get درون صفت method استفاده نماییم، در هنگام ارسال اطلاعات به سرور، اطلاعات وارد شده توسط کاربر در نوار آدرس مرورگر قابل مشاهده می باشد. (لطفا به مثال زیر توجه نمایید)
اگر اطلاعاتتان حساس می باشند لطفا از این متد استفاده نکنید.
بصورت پیش فرض متد ارسالی یک فرم در HTML در حالت GET می باشد.
حال لطفا به مثال زیر توجه نمایید و همچنین برای مشاهده خروجی بروی دکمه (امتحان کنید) کلیک نمایید.
|
1 2 3 4 |
<form action="get-data.php" method="get"> . . </form> |
مقدار Post در صفت method در فرم ها
برخلاف Get در صورت استفاده از مقدار Post دیگه اطلاعات ارسالی در نوار آدرس مرورگر نمایش داده نخواهد شد و از نظر امنیتی نیز این روش برای ارسال اطلاعات پیشنهاد میشود.
لطفا به مثال زیر توجه نمایید همچنین برای مشاهده خروجی بروی دکمه (امتحان کنید) کلیک نمایید.
|
1 2 3 4 |
<form action="post-data.php" method="post"> . . </form> |
Free-Learn
چه موقع باید از مقادیر Get و Post استفاده نماییم؟
Get : بصورت پیش فرض در فرم ها این مقدار قرار دارد، یعنی با کلیک بروی دکمه ارسال ، اطلاعات درون نوار آدرس مرورگر نمایش داده خواهد شد و همانطور که میدانید از لحاظ امنیتی استفاده از این مقدار پیشنهاد نمی شود.
نکاتی درباره مقدار Get در صفت Method :
- داده های فرم درون نوار آدرس مرورگر نمایش داده می شود
- اندازه یا طول URL در این روش محدود می باشد (تقریبا تا ۳۰۰۰ کاراکتر)
- هرگز برای داده های محرمانه از این روش استفاده نکنید
- اگر داده هایتان حساس و محرمانه نیستند بهتر است از این روش استفاده نمایید
Post : وقتی داده هایمان حساس و از نظر امنیتی مهم هستند ما باید از این روش استفاده نماییم چونکه در این روش دیگه داده های ما در نوار آدرس مرورگر نمایش داده نخواهند شد.
نکاتی درباره مقدار Post در صفت Method :
- اندازه یا طول URL در این روش نامحدود می باشد (بی نهایت)
خب دوستان خسته نباشید به پایان این بخش یعنی آموزش کار با فرم ها یا Forms در HTML رسیدیم، لطفا و پیشنهاد میکنم حتما بخش های بعدی را مشاهده نمایید چون در بخش های بعدی میخواهیم با تگ هایی که میشه درون فرم ها استفاده کرد آشنا شویم.
