ایجاد تگ فرم در HTML

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

تگ <form></form>

از تگ <form></form> برای ایجاد فرم در html استفاده می شود.البته این تگ به تنهایی کار خاصی نمی کند و نیاز به تگ های دیگری دارد که در ادامه با آن ها آشنا خواهیم شد.

صفت های تگ <form>

در ادامه به خاصیت های این تگ می پردازیم:

  • Action: با این ویژگی مشخص می کنیم اطلاعاتی که در این فرم وارد می شود به چه آدرسی ارسال شود.(این اطلاعات به یک فایل در سرور ارسال می شود مثلا get.php، که بررسی آن در آموزش html و css نمی گنجد)
  • Method: با این ویژگی می توانیم شیوه ارسال اطلاعات فرم به صفحه مقصد را مشخص کنیم.دو روش کلی وجود دارد:
    •   get :در این حالت اطلاعات در نوار آدرس مرورگر نمایش داده می شود و مقادیر همراه با پارامترها برای سرور ارسال می شوند
    •   Post: در این حالت اطلاعات در بدنه پیج مخفی می شود و بعد به سرور مقصد ارسال می شود بنابراین امنیت بالاتری دارد.
  • Target : مشخص می کند با فشردن دکمه ارسال چگونه اطلاعات ارسال شود
    • _self : در صفحه ای که اکنون باز است اطلاعات ارسال شود.
    • _blank: در صفحه ای جدید اطلاعات ارسال شود.

تگ های زیر مجموعه تگ Form

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

  • تگ <input>
  • تگ <textarea><textarea>
  • تگ <select> و تگ <option> به صورت ترکیبی

(البته تگ های دیگری هم هست که در این سطح از آموزش نمی گنجد، برای اطلاعات بیشتر به این لینک مراجعه کنید)

تگ <input>

استفاده از این تگ در تگ form به شدت پرکاربرد است.این تگ با توجه به مقداری که برای خاصیت type اش تعریف می شود ،به روش های مختلفی مورد استفاده قرار می گیرد.(راستی این تگ از اون دسته تگ هاییه که تگ پایانی نداره)

در ادامه با چندین type پرکاربرد آشنا می شویم (برای کسب اطلاعات بیشتر به این لینک مراجعه کنید) :

  • <input type=”text”> : از این نوع type برای ایجاد فیلد متنی استفاده می کنیم و انواع کاراکتر ها را می پذیرد.
  • <input type=”password”> : این نوع type هم برای ایجاد فیلد متنی است  فقط ورودی را به صورت نقطه نمایش میدهد.
  • <input type=”button”> : این نوع type برای ایجاد دکمه به کار می رود.
  • <input type=”checkbox”> : این نوع type برای ایجاد چک باکس به کار می رود.
  • <input type=”radio”> : این نوع type برای ایجاد دکمه های رادیو به کار می رود.
  • <input type=”submit”> : این نوع type برای ایجاد دکمه ارسال اطلاعات فرم به کار می رود.
  • <input type=”reset”> : این نوع type برای ایجاد یک دکمه ریسیت به کار می رود که با فشردن آن تمام فیلدها مقادیر پیشفرض می گیرند.

تگ <textarea></textarea>

از این تگ برای ایجاد فیلد متنی طولانی یا چند خطی استفاده می شود .بین تگ باز و بسته هم می توان مقدار پیشفرض فیلد را نوشت.
سه خصوصیت بارز برای این تگ شامل موارد زیر است:

  • maxlength : تعداد کاراکترهایی مجاز برای این فیلد را مشخص می کند.
  • rows : ارتفاع این فیلد را مشخص می کند
  • cols : عرض این فیلد را مشخص می کند.

البته توجه داشته باشید عرض و ارتفاع را می توانیم در CSS هم مشخص کنیم.

تگ <select></select> و تگ <option></option>

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

  • multiple برای تگ select: از این خاصیت برای انتخاب چند مورد از لیست استفاده می شود . (کاربر برای انتخاب چند مورد باید کلید ctrl را نگه دارد و موارد انتخاب شده به صورت آرایه ارسال می شود.)
  • size برای تگ select:  این خاصیت مشخص می کند چه تعداد ار منوهای لیست به صورت پیش فرض، بدون اسکرول، قابل مشاهده باشد.
  • value برای تگ option: مقادیر لیست را مشخص می کند.
  • selected برای تگ option: با این خاصیت می توان مقدار پیشفرض لیست را مشخص کرد.

خصوصیات مشترک برای فیلدهای ورودی

چندین خصوصیت می باشد که به صورت مشترکی برای فیلدهای ورودی به کار می رود مثل:

  • value: برای مشخص کردن مقدار پیش فرض هر فیلد به کار می رود.
  • readonly:  این خاصیت باعث می شود یک فیلد فقط خواندنی باشد
  • disabled :  این خاصیت باعث می شود یک فیلد غیرفعال شود.
  • maxlength : ماکزیمم تعداد کاراکترهایی مجاز برای ورودی فیلد را مشخص می کند.
  • size: این خاصیت مشخص می کند یک فیلد ورودی به اندازه چه تعداد کاراکتر رشد کند . توجه داشته باشید این خاصیت فقط عرض فیلد را تغییر می دهد و در مشخص کردن تعداد کاراکترهای ورودی دخالتی ندارد.
  • placeholder: متنی که به این خاصیت می دهیم به صورت راهنما در فیلد ورودی قرار می گیرد و به محض تایپ کاربر این متن حذف می شود.

نکته: می توانیم از المان تگ <lable></lable> برای مشخص کردن برچسب هر ورودی استفاده کنیم.

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

نتیجه اجرا به شکل زیر می باشد که فکر نمیکنم به توضیح اضافه تری نیاز داشته باشد.

فرم در HTML | مثال

امیدواریم که این آموزش مورد رضایت شما واقع شده باشد و بتوانید با توجه به نیازتون فرم در html طراحی کنید .

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

تگ
نامتوضیحات
formایجاد فرم
inputاین تگ با صفت type شکل های مختلف فیلدهای ورودی را مشخص میکند.
textareaایجاد فیلد ورودی چندخطی
select-optionایجاد لیست بازشونده

 

باز هم تاکید می کنم اگر خودتون دست به کار نشین و کد نزنید، خوندن این مطالب هیچ فایده ای نداره! اگر سوال یا نظری دارین میتونید از طریق دیدگاه زیر همین پست با ما در ارتباط باشین. شاد باشید  ;-) 

به این مقاله چند تا ستاره میدی؟
[تعداد رای: 1 امتیاز: 5]