خانه / HTML / کار با تگ فرم (form) در HTML
پرشیُن هاست

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

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

تگ form در html

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

تگ form به تنهایی کاربردی ندارد و تنها معرف ایجاد یک امکان تعاملی ار نوع فرم است، لذا این تگ را با موارد زیر تکمیل می کنیم.

خاصیت action در form

از آنجایی که اطلاعات یک فرم html پس از تکمیل شدن باید به یک فایل در سرور ارسال شود، خاصیت action برای تعیین آدرس فایل مقصد مورد استفاده قرار می گیرد، به طور مثال اطلاعات فرم زیر (در صورت ارسال) به یک فایل با نام get.php فرستاده خواهد شد.

مقادیر خاصیت action می تواند به صورت آدرس کامل (با //:http) یا به صورت آدرس دایرکتوری (مانند مثال بالا) در نظر گرفته شود.

خاصیت method در form

در کنار action که مقصد اطلاعات یک فرم را معیین می کند، خاصیت method شیوه ارسال را مشخص می کند، این شیوه می تواند به یکی از دو شکل post یا get (حالت پیش فرض) باشد، در متد post، اطلاعات دور از چشم ما و به صورت پنهانی، در پس زمینه به سرور ارسال می شوند اما در متد get، اطلاعات در نوار آدرس مرورگر قابل مشاهده هستند و به صورت پارامترهایی به همراه مقادیر به سرور ارسال می شوند، متد post برای ارسال مقادیر طولانی، اطلاعات حساس کاربری، آپلود فایل و… کاربرد دارد و متد get بیشتر برای ارسال اطلاعات کوتاه و با حساسیت کمتر به کار می رود.

نکته: متد get و post هر دو از شیوه های استاندارد HTTP برای نقل و انتقال اطلاعات هستند و در برخی زبان های برنامه نویسی مانند Ajax یا فریم ورک های مربوط به آن (مانند jQuery) ممکن است کارکردی مشابه داشته باشند، لذا تفاوت های عنوان شده در آموزش، حالت معمول و کدنویسی html را مد نظر دارد.

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

همان طور که اشاره شد، تگ form به تنهایی قابلیت خاصی در اختیار کاربران قرار نمی دهد، بلکه با کمک تگ ها و خاصیت های دیگر است که امکانات بالقوه آن قابل استفاده است، این تگ ها به طور کلی شامل input، select و textarea می شوند که در زیر کاربرد آنها توضیح داده شده است.
– تگ input: با خاصیت هایی که می پذیرد برای ایجاد دکمه های رادیویی، فیلدهای متنی (متن کوتاه)، دکمه ارسال، فیلدهای مربوط به کلمه عبور، فیلد آپلود فایل و… کاربرد دارد، تگ input باید به صورت یکتا استفاده شود.
– تگ select: تگ select در کنار تگ option قابلیت ایجاد منوهای بازشونده و انتخاب یک یا چند مورد را فراهم می کند، تگ select باید به صورت جفتی استفاده شود.
– تگ textarea: برای ایجاد فیلدهای ورود متن (متن طولانی) کاربرد دارد، تگ textarea باید به صورت جفتی استفاده شود.

تگ input در form

اصلی ترین تگی که به همراه تگ form در ایجاد قابلیت های تعاملی نقش دارد، input است که با تنظیم type های مختلف برای آن می توان انواع مختلفی از امکانات نظیر فیلد متنی (text)، فیلد کلمه عبور (password)، دکمه معمولی (button)، دکمه ارسال (submit) و … را ایجاد کرد، در زیر چند نمونه اولیه از نحوه تعریف و به کارگیری تگ input را ملاحظه می کنید.

مقادیری که تگ input برای خاصیت type می پذیرد و کاربرد آنها به صورت خلاصه در زیر عنوان می شود.

نوع button

برای ایجاد دکمه های ساده به کار می رود، یک دکمه معمولی باید به همراه دستورات جاوا اسکریپت تکمیل شود در غیر این صورت به خودی خود کاربردی ندارد، به طور مثال:

نوع checkbox

از این مقادیر به همراه تگ input برای ایجاد باکس های قابل تایید (چک باکس) استفاده می شود، مثال:

اگر به مثال های بالا دقت کرده باشید، هر مقادیر زیرمجموعه، می تواند تنظیمات به خصوصی نیز داشته باشد، به فرض وقتی برای چک باکس از پارامتر checked استفاده می شود، یعنی حالت پیش فرض آن را به صورت انتخاب شده تنظیم می کنیم، یا پارامتر name باعث می شود تا اطلاعات فرم پس از ارسال در سرور قابل دریافت باشد (اطلاعات هر تگ با نام آن قابل شناسایی است).
نکته: خاصیت value برای دکمه ها، صرفا حالت نمایشی دارد، اما برای سایر موارد به عنوان مقادیر پیش فرض، به سرور ارسال می شود.

نوع file

برای آپلود یک فایل به سرور استفاده می شود، به طور مثال:

برای اینکه نوع file به درستی عمل کند، باید enctype (رمزنگاری) را با مقادیر multipart/form-data به تگ form اضافه کنیم.
نکته: پارامتر اختیاری accept مشخص کننده فرمت های مجازی است که از طریق فیلد، قابل آپلود هستند، این فرمت ها بر اساس استاندارد MIME یا (Multipurpose Internet Mail Extensions) مشخص می شوند، اگرچه MIME در اصل استانداردی برای نقل و انتقال اطلاعات از طریق ایمیل در وب است، اما برای صفحات وب نیز کاربرد دارد، برای کسب اطلاعات بیشتر می توانید در لینک زیر لیست تقریبا کاملی از فرمت ها و معادل آنها در استاندارد MIME را ملاحظه کنید.
لیست فرمت ها و معادل آنها در استاندارد MIME

نوع hidden

برای ایجاد فیلدهای مخفی کاربرد دارد، مقادیر فیلدهای مخفی ثابت است و بدون تغییر کاربر به سرور ارسال می شود، مثال:

نوع hidden کاربردهای خاصی دارد، به طور مثال با تنظیم یک فیلد مخفی، می توان از ارسال شدن یک فرم اطمینان حاصل کرد یا برخی بررسی های امنیتی را با آن انجام داد.

نوع image

از نوع image برای ایجاد یک دکمه ارسال فرم (که خود از یک تصویر به عنوان پس زمینه استفاده می کند) استفاده می شود، مثال:

نکته: نوع image علاوه بر ارسال فرم، مختصات موقعیت خود در صفحه را نیز به سرور ارسال می کند، این مختصات به صورت دو پارامتر X و Y دریافت می شوند که هر کدام با یک مقدار عددی موقعیت افقی و عمودی تصویر را در صفحه مشخص می کنند.

نوع password

از نوع password برای ایجاد فیلدهای کلمه عبور (ستاره ای) استفاده می شود، مثال:

اگر در مثال بالا دقت کرده باشید، یک پارامتر دیگر نیز به فرم خود اضافه کرده ایم، این پارامتر maxlength نام دارد که از آن برای تعیین حداکثر کاراکتر مجاز یک فیلد (معمولا فیلد متنی و پسورد) استفاده می شود.
نکته: استفاده از نوع password در فرم های وب (فیلدهای کلمه عبور) از لحاظ حفظ امنیت کاربران اهمیت زیادی دارد.

نوع radio

از نوع radio برای ایجاد دکمه های رادیویی تایید شونده در فرم های وب استفاده می شود، مثال:

نوع reset

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

نکته: استفاده از این قابلیت باید با دقت انجام شود، چرا که کلیک ناخواسته بر روی دکمه rest باعث از دست رفتن اطلاعات فعلی فیلدها می شود.

نوع submit

نوع submit برای ایجاد دکمه ارسال اطلاعات فرم کاربرد دارد، مثال:

نوع text

از نوع text برای ایجاد فیلدهای متنی (متن کوتاه) استفاده می شود، مثال:

تگ select در form

در صفحات html برای ایجاد یک منوی کشویی که دارای چند گزینه باشد، از تگی به نام select به همراه تگ زیرمجموعه آن یعنی option استفاده می شود، به طور مثال:

نکته: خاصیت selected گزینه پیش فرض یک منو را مشخص می کند.
در حالت عادی هر تگ select مجاز به ارسال تنها یک مقدار است، لذا برای ارسال مقادیر چندگانه، باید خاصیت multiple را به این تگ اضافه کنیم، مثال:

نکته ۱: برای انتخاب چند گزینه از یک منوی select، کلید Ctrl را نگهداشته و گزینه های خود را انتخاب کنید.
نکته ۲: اطلاعات فرم چندگانه به صورت یک آرایه به سرور ارسال می شود و علامت [] در انتهای نام منو بدین منظور نیاز است (درک مفهوم آرایه هدف این آموزش نیست، اما جهت آشنایی بیشتر و به زبان ساده آرایه در برنامه نویسی زبان های سمت سرور مانند php، asp و… به معنی یک متغیر است که درون خود چند متغیر دیگر دارد).

تگ textarea در form

در کنار دو تگ اصلی input و select عنصر دیگری در صفحات وب جهت ایجاد قابلیت های تعاملی نقش کلیدی دارد، این عنصر تگ textarea است که جهت ایجاد فیلدهای متنی (متن طولانی) به عنوان مثال برای وارد کردن یادداشت، ارسال مطلب، نمایش یک متن کپی رایت و… کاربرد دارد، به طور مثال:

تنظیم یک فیلد از نوع textarea به وسیله خاصیت های زیرمجموعه آن از جمله cols (ستون ها) و rows (سطرها) صورت می گیرد، از cols برای تعیین عرض و از rows برای ارتفاع استفاده می شود.
نکته ۱: اندازه ها برای cols و rows صرفا جهت نمایش دلخواه فیلد کاربرد دارند و مانع ورود کاراکترهای بیشتر نمی شوند، برای محدود کردن تعداد کاراکتر مجاز از خاصیت maxlength استفاده کنید (البته محدودیت کاراکتر می تواند در سرور اعمال گردد یا در صفحات وب از تکنیک های دیگری مانند جاوا اسکریپت برای نمایش حداکثر کاراکتر مجاز به کاربر استفاده شود).
نکته ۲: در حالت پیش فرض، هر فیلد متنی از نوع textarea ممکن است با اندکی تفاوت (از لحاظ ارتفاع و عرض) در مرورگرهای مختلف نمایش داده شود، برای تنظیم دقیق و یکسان اندازه باید از CSS استفاده کنیم (که خود مبحثی جدا است).

خاصیت readonly

تگ textarea برای نمایش متن های readonly (صرفا خواندنی) نیز کاربرد دارد، به طور مثال می توان با افزودن خاصیت readonly به آن، یک متن برجسته شده را جهت مطالعه کاربر به او نشان داد (کاربر قادر به تغییر متن نیست)، مثال:

خاصیت های disabled

برای غیر فعال کردن تگ های فرم (به طور کلی) از خاصیتی به نام disabled استفاده می شود، با این کار اگرچه فرم ها به ظاهر نمایش داده می شوند، اما عملا کاربر قادر به وارد کردن اطلاعات یا انتخاب موردی نیست، مثال:

نکته: خاصیت disabled محدود به تگ textarea نیست و عمومیت دارد.

استفاده از label در form

برای ایجاد برچسب های استاندارد در فرم های وب، از تگی (جفتی) به نام label استفاده می شود، label در واقع نقش معرف و برچسب را برای یک تگ فرم ایفا می کند، مثال:

همان طور که ملاحظه می کنید، label از یک id برای شناسایی فیلد مربوطه استفاده می کند، در واقع برای هر فیلدی که قصد تعریف برچسب داریم، یک id تعریف کرده و با خاصیت for برچسب را به آن نسبت می دهیم.
نکته: در کنار خاصیت های عنوان شده، برخی خواص کلی مانند class، dir، id، lang و… نیز برای تگ های فرم قابل اعمال است.
مثال و پیش نمایش آنلاین
در زیر یک مثال کاربردی از تگ form و پیش نمایش آنلاین آن را ملاحظه می کنید.

ضمیمه های مطلب



جهت دانلود فایل های این مطلب روی این متن کلیک کنید.

جهت مشاهده نمونه این کد روی این متن کلیک کنید .( پیش نمایش )

منبع : وبگو

پرشیُن هاست

دیدگاه شما

( الزامي )

(الزامي)