لطفا صبر کنید...
آموزش فرانت اند رایگان، جلسه 7؛ تگ‌های فرم




سلام خدمت دوستان و همراهان عزیز هولوسن

این دوره برنامه نویسی فرانت اند (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 برای متن‌های طولانی‌تر.



هولوسن

با من یاد بگیر

آموزش های بیشتر در وبسایت هولوسن : https://holosen.net

نظرات
5.0
(0 نظر)
5
1
4
0
3
0
2
0
1
0
نظرات
**پرسش و پاسخ** سوال خود را مطرح کنید.
در کمتر از 10 دقیقه پاسخگوی شما هستیم

آدرس ایمیل شما منتشر نخواهد شد. فیلدهای الزامی علامت گذاری شده اند *

امتیاز:
Captcha Image