دوره مقدماتی آموزش HTML و CSS | قسمت ششم – فرم ها در HTML

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

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

فرم ها کاربرد بسیار زیادی در صفحات وب دارند برای مثال : ثبت نام و ورود کاربران به سایت , جستو جوی کلمات کلیدی در سایت و …

فرم ها در HTML چگونه کار میکنند؟

در این بخش به چگونگی  کار کردن فرم ها در صفحات وب خواهیم پرداخت.

• پر کردن فرم و ثبت آن برای ارسال به سرور
• هر فرم با نام مشخص به سرور ارسال میشود
• در سرور با زبانهایی مثل سی شارپ , پی اچ پی یا پایتون این اطلاعات بررسی و در صورت نیاز در دیتابیس ذخیره میشوند
• سرور پیامی در صفحه ای جدید به کاربر ارسال میکند

ورودی های فرم ها حتما باید یک ویژگی name داشته باشند که سرور به طور دقیق متوجه شود کدام یک از ورودی ها پر شده است.

name=value

تگ های کاربردی فرم ها در HTML

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

تگ form در HTML

این تگ یک تگ جمع کننده یا wrapper  برای فیلدها می باشد که مشخصه یک فرم است.

این تگ دو تا attribute  (ویژگی) مهم را میتواند داشته باشد

• اولین ویژگی آن action میباشد. این ویژگی به این معناست که وقتی کاربر اطلاعات خود را وارد و تایید کرد این اطلاعات به کجا فرستاده شوند.
• دومین ویژگی آن method میباشد . یعنی اطلاعات با چه متدی به سرور ارسال شوند.

ما متدهای مختلفی داریم که بیشتر از همه از دو متد GET و POST استفاده میشه.

در واقع ما با متد مشخص می کنیم که اطلاعات ارسالی به سمت سرور از طریق چه متدی در دسترس برنامه نویس می باشد.

تگ input در HTML

این تگ یکی از پرکاربردترین و اساسی ترین تگ های فرم ها در html می باشد.

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

این تگ چند مورد ویژگی بسیار مهم دارد که به آن میپردازیم :

• مهم ترین ویژگی آن type می باشد که شما با این ویژگی میتوانید نوع ورودی که از کاربر درخواست میکنید را مشخص کنید برای مثال برای دریافت نام کاربر باید از type=text , دریافت رمز عبور ازtype=password و دریافت ایمیل از type=email استفاده کنید که این سه مورد از پراستفاده ترین انواع این ویژگی میباشد
• ویژگی maxlength : از این ویژگی برای محدود کردن تعداد کاراکتر ورودی برای کابر استفاده میشود.
• ویژگی name : وقتی کاربر یک input را پر میکند سرور باید متوجه بشود که کدام یک از آنها پر شده است. برای مثال هنگام  login کردن به سایت سرور باید متوجه شود که  input  برای نام کاربری و input برای رمز عبور کدام است.

نکته : ویژگی های دیگری هم برای input  ها وجود دارد که بالطبع در دوره مقدماتی نمیتوان به آنها اشاره کرد.

خروجی کدهای بالا به شکل زیر خواهد بود :

تگ button در HTML

وقتی شما یک input  را پر میکنید نیاز به تایید آن و ارسال به سرور دارید که این کار با تگ button به همراه ویژگی type=submit انجام میگیرد .

نکته : شما میتوانید درون تگ input به همراه ویژگی type=submit همین کار را انجام دهید .

تفاوت تگ button و input با نوع Button در اینه که شما توی تگ button میتونید از تگ های دیگه هم استفاده کنید مثلا تگ span اما توی input این عمل امکان پذیر نیست.

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

برای مشاهده تگ های بیشتر در این باره توصیه میکنیم لینک زیر رو مشاهده کنید :

HTML From

این جلسه هم به پایان رسید امیدواریم از این جلسه هم رضایت داشته باشید و در جلسات آینده به سراغ کار با css خواهیم رفت.