این آموزش در تاریخ ۱۴۰۲/۰۶/۱۹ آپدیت شده است.
آموزش کار با فرم ها یا Forms در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با فرم ها یا Forms در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با فرم ها یا Forms در HTML
فرم که دیگه میدونید چیه! حالا یا فرم کاغذی یا هر نوع فرم دیگه ای! در هر صورت فرم ها یه ابزاری هستن برای جمع آوری داده ها ( که این داده ها میتونه هرچیزی باشه )
ما انواع فرم داریم که شاید تا الان اسمشون رو شنیده باشید، مثلا فرم تماس با ما، فرم سفارش گیری ، فرم ثبت نام و ورود و هرنوع فرم دیگه که در ذهن شما باشه.
کلا هرجور فرمی که در هرسایتی دیدید بدونید در یه کلام اون فرم توسط تگ Form که متعلق به زبان HTML می باشد ایجاد شده، و این تگ Form باز خودش یسری تگ های مخصوص بخودش داره که بایدم فقط در خودش استفاده بشه که ان شاالله در ادامه باهاشون آشنا میشید.
Free-Learn
فرم ها چجوری کار میکنن؟
خیلی سادس، ببینید دوستان اساس کار همه ی فرم ها بصورت زیر می باشد :
- ایجاد تگ Form ( اسکلت اصلی فرم ) ( برعهده زبان HTML )
- استایل فرم ( مثلا رنگ بندی و شکل شمایل ) ( برعهده زبان CSS )
- اعتبارسنجی ( یعنی مثلا اگه نام خالی بود پیغام بده نام را وارد کنید ) ( هم میتونه با HTML هم با JS هم با Jquery و هم زبان PHP انجام بشه )
- گرفتن داده ها ( یعنی چیزی که کاربر وارد کرده رو بتونیم دریافت کنیم ) ( برعهده زبان های سمت سرور مثه PHP )
پس این میشه اساس کار فرم ها ، همونطور که میبینید هر زبانی اینجا برای خودش یه وظیفه ای داره و دقیقا زبان های طراحی وب یعنی همین، یعنی هر زبانی یه کاربردی و یه قدرتی داره
یعنی هر زبانی برای انجام کاری ایجاد شده، پس حواستون باشه همینجوری عشقی پشقی فرم ها کار نمیکنن ( یعنی یه فرم خالی با HTML هیچ کاربردی نداره مگه اینکه در سمت سرور بشه داده هارو گرفت )
Free-Learn
تگ ها و صفت های مخصوص فرم ها
خب دوستان عزیز در ادامه آموزش کار با فرم ها یا Forms در HTML ، یسری تگ و صفت داریم که فقط مخصوص استفاده در تگ Form می باشند، یعنی اگه از این تگ ها یا صفت ها در خارج از تگ Form استفاده کنید هیچ نتیجه ای نداره و فقط مخصوص استفاده در تگ Form می باشد.
که ان شاالله در جلسه بعدی با تگ های مخصوص فرم و در جلسه بعدش با صفت های مخصوص فرم آشنا خواهید شد، در این جلسه فقط نگاه کلی داریم به فرم ها و نحوه ایجادش.
Free-Learn
نحوه ایجاد فرم یا Form در HTML
بطور کلی در HTML ما با استفاده از تگ <form> میتونیم یک فرم رو ایجاد نماییم، بعدش در این فرم ما باید از تگ های مخصوص به فرم ها استفاده نماییم که ان شاالله در بخش های بعدی با تمامی تگ هایی که میتوان در فرم ها استفاده کرد آشنا خواهید شد.
شکل کلی برای استفاده از تگ <form> در HTML بصورت زیر می باشد :
|
1 2 3 |
<form> تگ های فرم در اینجا قرار میگیرند </form> |
مثال : ایجاد یک فرم ساده با یک عدد اینپوت و دکمه ارسال
|
1 2 3 4 5 6 7 8 |
<body> <form> نام: <input type="text"> <br><br> <input type="submit" value="ارسال"> </form> </body> |
Free-Learn
صفت Action فرم ها در HTML
در ادامه آموزش کار با فرم ها یا Forms در HTML میخوام شمارو با صفت action آشنا کنم.
فرم ها در صفحات وب دارای یک صفت بنام action می باشند، که وظیفه این صفت ارسال اطلاعات وارد شده توسط کاربر به سمت سرور می باشد، یعنی کاربر اطلاعاتش رو وارد میکنه و سپس با زدن دکمه ثبت این اطلاعات به سرور سایت مورد نظر ارسال میشه.
پس میشه گفت اصلی ترین و مهمترین بخش یک فرم ، همین صفت Action می باشد، یعنی اگه این صفت نباشه عملا هیچی به هیچیه و فرم نمیتونه هیچگونه عملیاتی انجام بده.
برای مثال لطفا به فرم زیر توجه نمایید :
|
1 2 3 |
<form action="get_data.php"> ... </form> |
یعنی داریم میگیم که داده های فرم پس از کلیک بروی دکمه ارسال به سمت سرور و به فایل get_data.php ارسال بشه، اینجا دیگه فرم وظیفه شو بخوبی انجام داد دمش گرم.
ولی اینکه بتونیم دادهارو دریافت کنیم، دیگه ربطی به HTML نداره و باید از زبان های سمت سرور مثه مثلا زبان PHP استفاده کنیم، که مثلا ببینیم کاربر چه چیزی داخل اینپوت ها وارد کرده بوده.
Free-Learn
صفت method در فرم ها
این صفت هم جز صفت های ضروری و مهم در فرم ها می باشد، با استفاده از این صفت میتونیم نحوه ارسال داده ها بسمت سرور رو مشخص کنیم.
درکل وظیفه این صفت در فرم ها مشخص کننده نوع متد HTTP ارسالی ( GET یا POST ) در هنگام ارسال اطلاعات به سرور می باشد.
صفت method دو مقدار میتونه داشته باشه :
- Get
- Post
مقدار Get در صفت method در فرم ها
اگر ما از مقدار Get درون صفت method استفاده نماییم، در هنگام ارسال اطلاعات به سرور، اطلاعات وارد شده توسط کاربر در نوار آدرس مرورگر قابل مشاهده می باشد. یعنی هرچیزی که کاربر وارد کرده باشه در نوار آدرس مرورگر قابل مشاهدس. ( مثه تصویر زیر )
الان اون MyName میشه نام اون اینپوت یا Input داخل فرم و در نهایت اون Sadegh هم میشه مقدارش که کاربر داخل فرم وارد کرده، پس همونطور که میبینید صفت method با مقدار Get داده های فرم رو در نوار آدرس مرورگر نشون میده.
اگر اطلاعاتتان حساس می باشند لطفا از این متد استفاده نکنید.
بصورت پیش فرض اگه از این متد استفاده نکنیم، فرم خودش خودکار متد GET رو انتخاب میکنه.
مثال : استفاده از متد Get در فرم
|
1 2 3 4 5 6 7 8 |
<body> <form action="get_data.php" method="GET"> <input type="text" name="MyName"> <input type="submit" value="ارسال"> </form> </body> |
مقدار Post در صفت method در فرم ها
برخلاف Get در صورت استفاده از مقدار Post دیگه اطلاعات ارسالی در نوار آدرس مرورگر نمایش داده نخواهد شد و از نظر امنیتی نیز این روش برای ارسال اطلاعات پیشنهاد میشود.
مثال : استفاده از متد Post در فرم
|
1 2 3 4 5 6 7 8 |
<body> <form action="get_data.php" method="POST"> <input type="text" name="MyName"> <input type="submit" value="ارسال"> </form> </body> |
Free-Learn
چه موقع باید از مقادیر Get و Post استفاده نماییم؟
Get : بصورت پیش فرض در فرم ها این مقدار قرار دارد، یعنی با کلیک بروی دکمه ارسال ، اطلاعات درون نوار آدرس مرورگر نمایش داده خواهد شد و همانطور که میدانید از لحاظ امنیتی استفاده از این مقدار پیشنهاد نمی شود.
نکاتی درباره مقدار Get در صفت Method :
- داده های فرم درون نوار آدرس مرورگر نمایش داده می شود
- اندازه یا طول URL در این روش محدود می باشد (تقریبا تا ۳۰۰۰ کاراکتر)
- هرگز برای داده های محرمانه از این روش استفاده نکنید
- اگر داده هایتان حساس و محرمانه نیستند بهتر است از این روش استفاده نمایید
Post : وقتی داده هایمان حساس و از نظر امنیتی مهم هستند ما باید از این روش استفاده نماییم چونکه در این روش دیگه داده های ما در نوار آدرس مرورگر نمایش داده نخواهند شد.
نکاتی درباره مقدار Post در صفت Method :
- اندازه یا طول URL در این روش نامحدود می باشد (بی نهایت)
Free-Learn
صفت Name در Input ها
بعد از صفت Action و Method این صفت Name هست که خیلی ضروری و مهمه، یعنی در واقع اینجوری بگم که داده های فرم توسط همین صفت Name هست که بسمت سرور ارسال میشه، یعنی در سمت سرور از طریق این صفت هست که میتونیم متوجه بشیم کاربر چه چیزی وارد کرده.
کافیه از این صفت در هریک از Input هامون استفاده کنیم و یه نام دلخواه براشون مشخص کنیم، هر نامی که دوست داشتید میتونید مشخص کنید، ولی سعی کنید نام هاتون منحصربفرد باشه. مثلا اگه برای یه اینپوت نام test مشخص کردید برای اینپوت دیگه باید نام متفاوت باشه.
مثال : مشخص کردن یک نام برای اینپوت با استفاده از صفت Name
|
1 |
<input type="text" name="myname"> |
مثلا من برای اینپوتم با استفاده از صفت Name یک نام به اسم ” myname ” مشخص کردم، حالا همین نام رو در سمت سرور میگیریم و خیلی راحت با ۲کلمه کد متوجه میشیم که کاربر چه چیزی وارد کرده.
Free-Learn
مثال از فرم ها در HTML
مثال شماره ۱ : ارسال و دریافت یک نام از کاربر
|
1 2 3 4 5 6 7 8 |
<body> <form action="files/get_data.php" method="POST"> نام: <input type="text" name="myname"> <br><br> <input type="submit" value="ارسال"> </form> </body> |
خب دوستان به پایان آموزش کار با فرم ها یا Forms در HTML رسیدیم، امیدوارم که مشکل خاصی در این آموزش نداشته باشید و نهایت استفاده رو برده باشید.
