آموزش زبان HTML (جلسه ۵۰)

آشنایی با فرم ها در اچ تی ام ال (HTML)

یکی از اجزای جدایی ناپذیر وب سایت های دینامیک، استفاده از فرم ها برای جمع آوری اطلاعات از کاربران اینترنتی است. در واقع زمانیکه می خواهیم در یک سایت یا وبلاگ ثبت نام کنیم، در خبرنامه ثبت نام کنیم و یا حتی نام کاربری و رمز عبور خود را وارد سایتی کنیم به فرم ها نیاز داریم.
همانطور که قبلاً هم به آن اشاره شد در این سری از آموزش ها تمرکز روی طراحی سایت های استاتیک است اما از آنجا که استفاده از فرم ها، هم نیازمند آگاهی از اصول طراحی سایت های استاتیک همچون تگ های مرتبط با فرم ها است و هم برنامه نویسی دینامیک توسط زبان هایی همچون PHP، در این سری از آموزش ها بخش طراحی استاتیک فرم های اچ تی ام ال (HTML) را آموزش خواهیم داد.
برای ساخت یک فرم در صفحات اچ تی ام ال (HTML) از تگی تحت عنوان <form></form> استفاده می کنیم. یکی از اصلی ترین Attribute های تگ <form> در زبان اچ تی ام ال (HTML) چیزی است تحت عنوان action. کاری این که این Attribute انجام می دهد این است که اطلاعاتی که کاربر داخل بخش های مختلف فرم وارد می کند را برای یک فایل مثلاً با پسوند php که مسئول تحلیل اطلاعات فرم ها است ارسال می کند. Attribute دیگری که داخل تگ <form> قرار می گیرد method نام دارد که Value یا مقدار آن می تواند get یا post باشد(با توجه به اینکه اینگونه موارد خارج از حوزه تدریس این دوره آموزشی بوده و بیشتر مرتبط با دوره آموزش PHP است، از ارائه توضیحات تکمیلی پیرامون این مسائل خودداری خواهیم کرد).
تگ <form> بدون استفاده از تگی تحت عنوان <input> هیچ کاری انجام نخواهد داد. در واقع تگ <input> به معنی “ورودی” این وظیفه را دارا است تا فضایی روی صفحات اچ تی ام ال (HTML) ایجاد کند تا کاربر بتواند اطلاعات خود را داخل آنها تایپ نماید (لازم به ذکر است که تگ <input> همانند تگی همچون <img> نیاز به تگ پاپانی به شکل <input/> ندارد).
حال برای روشن شدن این مسئله کد زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
   </head>
   
   <body>
       <form action="send-form-information.php" method="post">
           <input type="text">
       </form>
   </body>
</html>

همانطور که در کد فوق می بینیم، داخل تگ <body> ابتدا تگ <form> را نوشته ایم. برای این تگ دو Attribute تحت عناوین action و method در نظر گرفته ایم که action مقداری برابر با send-form-information.php داشته و method هم مقداری برابر با post دارد. به خاطر داشته باشیم که نام فایلی که برای action در نظر گرفته ایم نامی دلخواه است و در این آموزش فقط جهت روشن تر شدن مطلب چنین کدی را به فرم خود اضافه کرده ایم.
سپس داخل تگ های <form> و <form/> یک تگ <input> اضافه کرده ایم و از Attribute یی تحت عنوان type برای مشخص کردن نوع این داده ورودی فرم استفاده کرده ایم که text است که فیلدی ایجاد می کند یک خطی و به صورت پیش فرض ۲۰ کاراکتر طول دارد. لازم به ذکر است کاربر در این خانه از فرم می تواند هر متنی را تایپ نماید (اگر از type استفاده نکنیم، به صورت پیش فرض گزینه text مد نظر قرار داده خواهد شد). اکنون با ذخیره کردن این فایل و اجرای آن در مرورگر خروجی این صفحه را خواهیم دید:

ساخت_اولین_فرم_از_اچ_تی_ام_ال

می بینیم که اصطلاحاً یک Field یا “فیلد” فرم روی صفحه ایجاد شده است.

گاهی اوقات در برخی از وب سایت ها می بینیم که برخی خانه های فرم از پیش داری متنی هستند که این متن توسط برنامه نویس وارد فرم شده است و چنانچه کاربر نیاز داشت می تواند آن متن را تغییر دهد. برای افزودن چنین ویژگی به تگ <input> خود می بایست کد فوق را به صورت زیر تکمیل کنیم:

   <body>
       <form action="send-form-information.php" method="post">
           <input type="text" value="Iran">
       </form>
   </body>

همانطور که می بینیم داخل تگ <input> از Attribute یی تحت عنوان value استفاده کرده ایم و مقدار در نظر گرفته شده برای آن را هم معادل با Iran گذاشته ایم. اکنون مرورگر خود را به روز رسانی می کنیم:

استفاده_از_value_در_تگ_های_فرم

می بینیم که واژه Iran داخل این خانه از فرم قرار گرفته است. فرض کنیم که این خانه از فرم مخصوص وارد کردن نام کشور محل سکونت کاربران است. حال کاربر با مشاهده این خانه اگر در ایران زندگی می کرد که نیاز به تغییر داده ورودی این خانه از فرم ندارد و اگر هم در کشور دیگری زندگی می کرد به سادگی می تواند این مقدار اولیه فرم را پاک کند و هر مقداری دیگر که تمایل داشت را وارد فرم خود نماید.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)