آموزش فرم ها در HTML

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

فرم ها یا Forms در HTML

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

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

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

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

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

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

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

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

<form>
---- Tags In Here ----
</form>

مثال :

برای مشاهده دستورات لطفا بروی دکمه امتحان کنید کلیک نمایید

امتحان کنید

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

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

برای مثال لطفا به فرم زیر توجه نمایید :

<form action="test.php">
.....
</form>

امتحان کنید

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

صفت Target در تگ <form>

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

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

<form action="test.php" target="_blank">
........
</form>

امتحان کنید

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

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

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

• Get
• Post

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

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

اگر اطلاعاتتان حساس می باشند لطفا از این متد استفاده نکنید.

بصورت پیش فرض متد ارسالی یک فرم در HTML در حالت GET می باشد.

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

<form action="test.php" method="get">
....
</form>

امتحان کنید

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

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

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

<form action="test.php" method="post">
...
</form>

امتحان کنید

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

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

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

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

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

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

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

منبع: سایت آموزشی فری لرن
برای مشاهده آموزش های بیشتر و همچنین دانلود فایل PDF این آموزش لطفا به سایت مراجعه نمایید.