۲ amin javadi
نکته اموزشی-خلاصه قسمت سوم html
جامعه وردپرس (برنامه نویسی) ایجاد شده در ۱۰ خرداد ۱۴۰۲

سلام دوستان امیدوارم حالتون خوب باشه خلاصه درس رو در اینجا قرار میدم :

فرم‌ها :

فرم‌ها یک تگ بسیار مهم در بحث بک اند که باعث تعامل بین کاربر و اپلیکیشن میشه که در واقع اطلاعات رو از کاربر میگیره واین دیتا رو به سمت سرور میفرسته که خیلی مهم هس برای ما .

یک فایل inde3.html برای اینن جلسه ایجاد میکینیم

برای ایجاد فرم در قسمت بادی کلمه form نوشته و یک tab رو میزنیم

اتربیوت مهم تگ فرم :

اتربیوت action

این اتربیوت action نام داره کارش اینه که دیتای فرم رو به صفحه یا سندی ما مد نظرمون هس ارجاع میده که که این صفحه یا سند میتونه خالی باشه مثلا بره یه صفخه دیگری مثل index2 که ما جلوی اکشن ادرس index2 رو باید بنویسیم و یا اینکه همون سند جاری ما باشه که در این صورت جلوی اکشن رو خالی میگزارن یعنی action= " "

اتریبیوت method : این اتربیوت رو نمیشه خالی گزاشت که یا دیتای ما بصورت post ارسال میشه یا get که get حالت query استرینگی داره و در url دیتا ارسال میشود اما post j توی url نیست و دیتا د پس زمینه ارسال میشه

اتربیوت enctype : این اتربیوت زمانی میگزاریم که در فرم بخوایم فایل رو هم ارسال کنیم و مقدار ان رو در اتوکامپلیت بزاریم روی multi part

اتربیوت auto complete : گزاشتن این اتربیوت سلیقه ای هست که مقدر ان یک on داره و یک off که از روی کش فرم قبلی برای ما auto complete میکند

پس فرم یک کامپوننت محسوب میشود که جالا که اتربیوت‌های ان را گفتیم شروع به گفتن اجرای فرم مبکنم :

اجزای فرم :

اجزای فرم input‌ها textbox‌ها radio button ه اهستن که بنا بر نیازمون توی فرم از این اجزا استفاده میکنیم که input‌ها یک فیلد خالی هستن که کاربر اطلاعتش رو در ان مینویسه

تمام input یک اتربیوت type دارن که بما میگویند جنس ورودی که کاربر وارد کنه چی باشه که حدود 14 الی 15 تا تایپ وجود داره مثل email , text , range ,...;ک هدر سایت w3scool قسمت فرم‌ها و input میتوانید انواع و اقسام این تایپ‌ها رو ببییم : https://www.w3schools.com/html/html_form_input_types.asp

مهمترین این‌ها : checkbox / email/file/hidden/ password/radio button /submit /tel /text/url

تگ label :

یک نام برای فیلد input میسازن که به این نام تگ لیبل میگویند مثلا :

نام خانوادگی : فیلد خالی اینپوت

که توسط تگ label این کار رو انجام میدهند که این label یک اتربیوت بنام for دارد که میگه برای چه اینپوتی یعنی وقتی روی نام کلیک شود کرسر موس بره روی اون input یا فیلد خالی قرار بگیره که برای اینکار باید نامی که به for میدهیم نام اتربیوت id در تگ input یاشد یعنی همنام با ایدی تگ اینپوت مد نظرمون

پس نام باید همنام با ایدی تگ اینپوت مد نظز ما باشه

نکته : تایپ در سمت فرانت با inspector میتوان عوض کرد لذا validation در سمت فرانت رو نمیشه بهش اعتماد کرد لذا validation سمت سرور هم باید صورت بگیرد

submit:

همان دکمه ارسال اطلاعات است و یک دکمه معمولی نیست که یک اتربیوت valu داره که میشه اسم اون دکمه/ بجای submit میتونیم بنویسیم reset که بجای ارسال بیاد ریست کنه و میتوان بنویسم button که در این صورت یک دکمه ایجاد میشود . کاری برای ما تنجام نمیدهد

اگه کاربر بر خلاف جنس چیزی عجیبی وارد کند و submit رو بزند ارور در یافت میکن د ارور validation رو میشه فارسی کرد که در دوره طراحی وب گفته شده

سوالات چند گزنه ای یا جنسیت که باید فقط یک گزینه انتخاب شود از radio button استفاده میکنیم

تگ text area :

این تگ مثل تگ input است با این تفاوت که میتوان عرض و طول برای فیلد ایجاد کنیم و یک متن ازمایشی جهت راهنما هم داخلش توی بک اند بنویسیم

اتربیوت name و id و value در تگ input :

اگر یک فرم داشته باششیم که داخلش بیست تا تگ input باشه هر تگ input این سه تا اتربیوت رو داره

اتربیوت value : مقدار فیلد خالی هست که کاربر وارد میکنه داخل اون ولی ما برای فهم بیشتر میتوانیم یک value بهش بدیم تا فیلد پر شود

اتربیوت name باید نسبت به خودش در ان فرم یک نام یکتا و یونیک داشته باشد تا بتوانیم بر اساس ان نام تگ input رو صدا بزنیم و مقدار فیلد ان رو به سرور بفرستیم

اتربیوت id

در بحث javascript از id بجای name استفاده میکنیم که توضیحات بیشتر به وقتش !!

اتریبیوت class :

در بحث css از class بجای name استفاده میکنیم که توضیحات بیشتر به وقتش!!

سلام وقت بخیر، ممنون از درج خلاصه و این نکات.

  • بنظرم موردی هم که مهمه اینکه در تگ input زمانی که type از نوع file هست باید توجه کنیم که در تگ form هم مقدار enctype را برابر multipart/formdata قرار بدیم. به عبارتی این دو مورد باید باهم به کار گرفته بشوند.


<form action="" method="post" enctype="multipart/formdata">
<input type="file">
form>
  • مورد بعدی اینکه اتربیوت method ، علاوه بر post و get مقدار دیگری به نام dialog رو هم میگیره که دوستان میتونن عملکرد دقیقش را جستجو کنند.




علیرضا امید ۱۰ مرداد ۱۴۰۲، ۰۹:۴۵

ممنون بابت خلاصه نویسیتون. مفید بود

Aryoubarzan Yousefi Alamouti ۲۰ مرداد ۱۴۰۲، ۱۰:۵۸