آموزش کار با تگ فرم (form) در HTML

//

آموزش  کار با تگ فرم (form) در HTML

تقریبا در هر سایت یا وبلاگی و به طور کل در هر صفحه وبی عناصری تعاملی وجود دارد
که کاربر می تواند نسبت به آنها عکس العمل داشته باشد،
به طور مثال بر روی دکمه ای کلیک کند یا از بین گزینه های مربوط به نظرسنجی یک مورد را انتخاب نماید،
شکل برجسته این عناصر تعاملی فیلد ها و فرم هایی هستند که کاربران با تکمیل اطلاعات آنها و با کلیک بر روی دکمه ارسال،
مقادیری را به سرور و پایگاه داده سایت یا وبلاگ مورد نظر ارسال می کنند،
از آنجایی که این نوع امکانات در صفحات وب، وابسته به تگ form و عناصر زیرمجموعه آن است،
لذا فراگیری دقیق این مبحث می تواند در آینده نزدیک دید شما را نسبت به تکنولوژی وب عمیق
تر و چه بسا یک قدم به سمت برنامه نویسی حرفه ای نزدیک تر کند

تگ form در html

همان طور که پیش تر گفتیم، تگ فرم با هدف ایجاد قابلیت های تعاملی (دکمه، فیلدهای متنی، امکان آپلود فایل و…)
برای صفحات html تعریف شده است، در واقع کنسرسیوم جهانی وب یا w3c این نکته را مد نظر داشته که صفحات وب باید از قابلیت ارتباط دو سویه برخوردار باشند،
یعنی همان طور که به فرض مدیران یک سایت می توانند مطالبی در آن منتشر کنند،
کاربران نیز باید بتوانند در محتوای آن مشارکت داشته یا از قابلیت های آن به صورت سفارشی استفاده نمایند،
به این ترتیب و به تدریج عناصر و ویژگی های تعاملی که شباهت های زیادی با هم داشتند در قالب یک تگ با عنوان فرم (form) و زیرمجموعه های آن معرفی شد.
یک فرم ساده به صورت زیر در html تعریف می شود.

آموزش کار با تگ فرم (form) در HTML

آموزش ایجاد فرم در HTML

برای ایجاد یک فرم HTML کارمان را با استفاده از تگ form شروع میکنیم. تگ فرم به صورت ساده و در حالت کلی، شکلی مشابه کد زیر خواهد داشت :

همانطور که مشاهده میکنید در تگ form از دو attribute با عناوین action و method استفاده کرده ایم.
هر دوی این صفات در کار کردن صحیح یک فرم، مهم و حائز اهمیت هستند.

طراحی باکس پربازدید ترین مطالب
یک آموزش جذاب دیگه!

کار با تگ فرم (form) در HTML

action : با استفاده از این صفت تعیین میکنید که اطلاعات فرم به چه آدرسی ارسال شود.
کافی است آدرس صفحه ای را که قرار است اطلاعات فرم را پردازش کند به عنوان مقدار action قرار دهید.
method : متد میتواند دارای دو حالت POST یا GET باشد.
زمانی نوع GET را برای فرم خود انتخاب میکنیم که اطلاعاتی که توسط فرم ارجاع داده میشوند،
دارای اهمیت (خصوصا اهمیت امنیتی) خاصی نیستند. مثلا یک کوئری جستجو و … وقتی از حالت GET استفاده کنید،
متغیر ها و مقادیر آنها پس از ارسال فرم، در انتهای آدرسی که به عنوان action فرم قرار گرفته، قابل مشاهده خواهند بود.

دریافت اطلاعات با عنصر input

input عنصر ارزشمندی است که بر اساس نیاز شما میتواند به شکل های گوناگونی در آمده و از کاربر اطلاعات دریافت کند. تغییر نوع input را با استفاده از صفت type انجام میدهیم. به کد زیر توجه کنید :

صفت name برای عناصر فرم

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

تایپ text

text : استفاده از این تایپ برای شما یک خط ورودی متنی ایجاد میکند.
مثلا استفاده از این تایپ در زمانی که میخواهید نام، نام خانوادگی و کلیه ی موارد مشابه را از کاربر دریافت کنید میتواند مناسب باشد. نمونه ی استفاده از این تایپ به شکل زیر است :

تایپ radio

radio : این تایپ برای شما انتخاب های رادیویی ایجاد میکند.
به این صورت که میتوانید با درج چندین input دارای تایپ radio به کاربر انتخاب های مختلفی بدهید که تنها یکی از آنها قابل انتخاب باشد. توجه داشته باشید که در این حالت در مورد هر گروه انتخاب، باید نام تمامی input های رادیویی که ایجاد میکنید را یکسان در نظر بگیرید :

آموزش خاصیت border در css جلسه 11
یک آموزش جذاب دیگه!

تایپ password

password : تفاوت این نوع با نوع text این است که در این حالت به محض اینکه کاربر هر کارکتر را وارد میکند،
محتوای وارد شده mask میشود و بجای آن ستاره یا دایره به نمایش در می آید.
به همین جهت استفاده از نوع password برای دریافت اطلاعات محرمانه مانند رمز عبور مناسب خواهد بود.
در نمونه ی زیر ابتدا نام کاربری و سپس پسورد را از کاربر درخواست میکنیم :

تایپ checkbox

checkbox : چک باکس ها به کاربر این امکان را میدهند که در صورت تمایل به صورت همزمان بتواند چندین گزینه را انتخاب کند.
(دقیقا برعکس radio) در اینجا هم مانند انتخاب های رادیویی،
باید در نظر داشته باشید که برای یک گروه انتخاب، نام یکسانی در نظر بگیرید.
مثلا در کد زیر، کاربر میتواند از بین سه نوع وسیله ی نقلیه، آنهایی که مایل است را انتخاب کند :

استفاده از مقدار checked در خط دوم ورودی درج شده در کد بالا، نشان میدهد که این انتخاب، از پیش تیک خورده و به صورت پیشفرض انتخاب شده است.

تایپ file

file : با استفاده از این تایپ میتوانید به کاربر اجازه بدهید که فایل دلخواه خود را بارگذاری کرده و به همراه فرم ارسال کند.
برای این تایپ صفتی با عنوان accept وجود دارد که نشان میدهد که این ورودی فایل میتواند چه پسوند هایی از فایل را قبول کند.
شکل کلی این نوع ورود به صورت زیر است :

مثلا اگر میخواستیم ورودی داشته باشیم که همه ی فایل های صوتی،
ویدئویی و عکس ها را قبول کند میتوانستیم از کد زیر استفاده کنیم :

درج ناحیه نوشتاری یا textarea

با استفاده از تگ textarea میتوانید یک باکس چند خطی برای درج محتوای نوشتاری در اختیار کاربر قرار دهید.
نمونه ای از این حالت، میتواند باکس های درج نظر یا باکس های درج توضیحات و کلیه ی موارد مشابه باشد.
اندازه ی این ناحیه نوشتاری را میتوانیم با استفاده از صفات rows و cols مشخص کنیم.
مقدار rows نمایانگر تعداد ردیف ها و cols نمایانگر تعداد ستون های ناحیه نوشتاری خواهد بود. مثلا :

آموزش border-radius در css پاسخ وردپرس
یک آموزش جذاب دیگه!

آموزش ایجاد منوی دراپ داون با استفاده از عنصر Select

ایجاد منو های دراپ داون و قرار دادن آنها در فرم بسیار ساده است. در اینجا از تگی به نام select استفاده خواهیم کرد.
هر تگ select میتواند تعدادی option یا انتخاب را در بر بگیرد که از میان این انتخاب ها،
یکی به صورت پیشفرض انتخاب شده که با اضافه کردن مقدار selected به option مورد نظر مشخص میشود.

به مثال زیر توجه کنید :

تایپ reset

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

به مثال زیر توجه کنید :

تایپ submit

submit : این نوع input برای ارسال داده های فرم به صفحه ای که در پارامتر action تعیین کرده اید به کار میرود.
در این حالت دکمه ی شما حالت نوشتاری خواهد داشت.
در صورت تمایل میتوانید بجای این تایپ از تایپ image برای عنصر input استفاده کرده و تصویر دلخواه را در آن قرار دهید.
تایپ image نیز دقیقا مانند submit عمل میکند
با این تفاوت که در شکل ظاهری آن میتوان از تصویر استفاده کرد :

خوب دوست عزیز این آموزش به پایان رسید امیدواریم که از این آموزش لذت برده باشید و در آینده نیز در آموزش های بعدی همراه ما باشید.

میانگین رتبه 4.8/5 تعداد رای : 46

نظرات

  1. کاربر پاسخ وردپرس

    من با این بخش مشکل داشتم.ولی خیلی روان و خوب توضیح دادین من یاد گرفتم.منظم توضیح دادید 🙂

    • زمان الله ابراهیمی ( مدیریت )

      خواهش می کنم خوشحالم که برای شما مفید بوده موفق باشید

  2. کاربر پاسخ وردپرس

    سلام
    کجا مشخص کنیم که اون فرم به کدوم آدرس ارسال بشه؟یا کدوم ایمیل؟

    • زمان الله ابراهیمی ( مدیریت )

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

سبد خرید
در حال بروز رسانی

آموزش‌های ویدیویی جدید یوتیوب رو از دست ندی!

بزن بریــم!