۲۳ خرداد آموزش فرانت اند رایگان، جلسه ۷؛ تگ‌های فرم
سلام خدمت دوستان و همراهان عزیز هولوسن
این دوره برنامه نویسی فرانت اند (front-end) تحت وب، با زبان های HTML و CSS را شامل میشود.
در جلسه اول با معرفی آموزش فرانت اند رایگان در خدمتتان بودیم. و در جلسات گذشته با زبان HTML آشنا شدیم و همینطور با ساخت اولین صفحه HTML ، اکستنشن‌های VSCode و Chrome و لینک‌ها و تصاویر در خدمتتان بودیم. همینطور در جلسه قبل تحت عنوان آشنایی با استایل‌ها، کامنت، جداول، لیست‌ها و تگ div در خدمتتان بودیم. در این جلسه قرار است تا با تگ‌های فرم و ورودی‌های فرم آشنا شویم.
پس با ما همراه باشید. 👨💻
مارو هم از نظرات خوب خودتون بی بهره نذارید. ❤💬
در ابتدا باید با مفهوم درخواست و پاسخ (Request & Response) آشنا شویم. زمانی که یک سایت را می‌خواهیم در مرورگر باز کنیم، با وارد کردن دامنه آن سایت، یا جستجو کردن آن در موتورهای جستجوگری مثل گوگل و باز کردن آن از لیست نتایج، در واقع درخواستی به سمت سرور این سایت ارسال میکنیم. (البته ما ساده‌ترین نوع مسئله را در نظر گرفته‌ایم، در واقعیت پیچیده‌تر است)
بعد از اینکه سرور مدنظر این درخواست را دریافت کرد، شروع به پردازش درخواست می‌کند و در نهایت پاسخی را برای درخواست ما مهیا می‌کند و به سمت ارسال کننده درخواست در قالب پاسخ، ارسال می‌کند.
به طور مثال زمانی که ما صفحه اصلی سایت هولوسن را می‌خواهیم ببینیم، درخواست ما میشود صفحه اصلی سایت هولوسن و پاسخ سرور هولوسن فایل html صفحه اصلی سایت هولوسن است. بعد از اینکه پاسخ دریافت شد، مجددا به ازای هر فایل css، جاوا اسکریپت، تصاویر، ویدیوها، موزیک، فونت و … یک درخواست دیگر به سرورهای مختلف ارسال میشود و پاسخ مورد نظر هر کدام دریافت و نمایش داده میشود.
اما همیشه اینطور نیست که ما بخواهیم یک سایت را باز کنیم، بعضی اوقات می‌خواهیم مثلا اطلاعاتی را به یک سرور ارسال کنیم. مثلا فرم ثبت نام در یک سایت را در نظر بگیرید که باید در آن اطلاعاتی مثل نام، نام خانوادگی، سن، نام کاربری، گذرواژه و … را وارد کنیم.
تگی که برای ارسال درخواست به سرور از آن استفاده میکنیم تگ form است.
این تگ دو خصوصیت اصلی دارد. یکی action است که مشخص می‌کند مقصد ارسال این اطلاعات کجاست و دیگری method است که مشخص کننده http method مدنظر برای ارسال این اطلاعات است. چون این اطلاعات باید به سمت سرور ارسال شوند، باید ببینیم مقصد که همان سرور است، به کدام روش http method اطلاعات ما را می‌پذیرد. اما معمولا به شکل زیر استفاده میشود:
- برای دریافت اطلاعات از GET
- برای ارسال اطلاعات جدید از POST
- برای ویرایش اطلاعات موجود از PUT
- برای حذف اطلاعات موجود از DELETE
| Method | Summary | CRUD | Accepts Request Body | Safe |
| GET | To fetch a single resource or group of resources | Read | No | Yes |
| PUT | To update an entire resource in one go | Update | Yes | No |
| POST | To create a new resource | Create | Yes | No |
| PATCH | To partially update a resource | Update | Yes | No |
| DELETE | To delete a resource | Delete | No | No |
| OPTIONS | To get information on permitted operations | Read | No | Yes |
| HEAD | To get metadata of the endpoint | Read | No | Yes |
| TRACE | For diagnosing purposes | Read | No | Yes |
| CONNECT | To make the two-way connection between the client and the resource. | – | No | No |
داخل هر تگ form باید به ازای هر ورودی یک تگ مثل تگ input داشته باشیم. علاوه بر تگ input تگ‌های دیگر هم داریم که در ادامه به آنها می‌پردازیم.
تگ‌های input مثل ورودی‌هایی برای نام، نام خانوادگی، رنگ، شماره همراه، ایمیل، تاریخ تولد، فایل، رمز عبور، جنسیت، وضعیت تاهل و موارد این چنینی را شامل می‌شوند.
نمونه‌هایی از تگ input را در زیر می‌توانید ببینید.
علاوه بر تگ‌های input تگ‌های دیگری نیز داریم.
تگ select به همراه تگ option
تگ دیگر تگ button است و تگ بعدی تگ textarea برای متن‌های طولانی‌تر.
بدون نظر