آموزش ساختن فرم HTML با استفاده از تگ Form

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

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

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

همانطور که مشاهده میکنید، در آدرس بالا میتوان مقدار firstname و lastname را به طور کامل مشاهده کرد.
برعکس این حالت، زمانی که میخواهیم اطلاعات ارسالی در آدرس صفحه ی action مشخص نباشند، از متد POST استفاده میکنیم. مثلا زمانی که میخواهیم اطلاعاتی را به دیتابیس ارسال کرده و آپدیت کنیم، یا وقتی میخواهیم از کاربر رمز دریافت کنیم و کلیه ی حالات مشابه. هیچوقت نباید اجازه دهید اطلاعات حساب در url به نمایش در بیایند.

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

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

در کد بالا میتوانیم مقدار دلخواه خود را از قبیل text, radio, password و … بجای عبارت neededtype قرار دهیم تا نوع ورودی بر اساس type تعیین شده تغییر کند. بعضی از انواع پر کاربرد input را در ادامه شرح میدهیم :

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

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

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

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

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

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

درج عبارت image/* در بخش accept باعث میشود که ورود بالا تنها تصاویر را قبول کند. شما میتوانید برای accept مقادیر دیگری را نیز به شرح زیر تعریف کنید :

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

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

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

ادامه ی این آموزش را با پرداخت به مبحث ایجاد select, استفاده از button و ورودی های مخفی در صفحه ی دوم بخوانید.