آموزش HTML5: آموزش ساخت فرم در HTML (قسمت نهم)

آموزش HTML5 قسمت نهم

درود بر همه شما علاقه مندان به آموزش های برنامه نویسی تحت وب، امروز نیز با قسمت نهم از سری ویدیوهای آموزش HTML5 و این بار با موضوع آموزش ساخت فرم در HTML در خدمت شما هستیم.

این جلسه یکی از مهم ترین جلسات آموزش HTML5 است، به دلیل این که در تمامی پروژه های سایت شما به بحث فرم ها نیاز دارید.

برای ساخت فرم های تماس، عضویت در سایت، آزمون های آنلاین، فرم های استخدامی و غیره لازم است توجه ویژه ای به آموزش های امروز داشته باشید.

خب به رسم همیشه، بی مقدمه و سرشار از انرژی مثبت ابتدا ویدیو آموزش ساخت فرم در HTML را مشاهده خواهیم کرد و سپس گریزی هم به متن این نوشته می زنیم:

این شما و این هم قسمت نهم از آموزش HTML5 :

 

 

پیش از شروع آموزش ساخت فرم در HTML

اگر موافق باشید قبل از این که آموزش ساخت فرم در HTML را آغاز کنیم، برای درک بهتر این مفهوم، ابتدا به تعریف فرم ها بپردازیم.

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

در انتهای آموزش ساخت فرم در HTML شما به راحتی می توانید با دستان پرتوان خود، یکسری فرم های ساده نظیر عکس زیر، طراحی و پیاده سازی نمایید.

 

کار با تگ <label> در HTML

یکی از ساده ترین دستوراتی که ما را در ساخت فرم در HTML یاری می نماید، تگ <label> است. این دستور تنها لطفی که به ما می کند، نمایش متن است (مانند تگ <P>). سوالی که مطرح می شود این است که آیا می توان به جای تگ <label> از تگ <p> استفاده نمود؟

پاسخ قطعاً خیر است، چراکه تگ <label> اختصاصاً برای فرم ها ساخته شده است و شاید در ظاهر تفاوتی با دستور <p> نداشته باشد اما زمانی که قصد ارسال اطلاعات سمت سرور و ذخیره در پایگاه داده را داشته باشیم، خواص این تگ ما را کمک خواهد کرد. یکی از این Attribute ها For است که به نوعی شناسه ی انحصاری تگ <label> برای مدیریت در کدنویسی Server Side  است که در حال حاضر هیچ صحبتی از این موارد نکرده ایم (در آینده ای نه چندان دور این آموزش ها در سایت قرار خواهد گرفت).

 

ساخت Text Box با استفاده از تگ <input> در HTML

یکی از کلیدی ترین آیتم ها در ساخت فرم، جعبه های متن یا اصطلاحاً Text Box ها هستند. با استفاده از تگ <input> و مقدار text در خاصیت Type قادر خواهیم بود، یک جعبه متن ساده را در سایت خود ایجاد نماییم. تگ <input> و خاصیت Type مهمترین دستوراتی هستند که همواره می باید بخاطر داشته باشیم.

تگ <input> دو خاصیت مهم دارد که در ادامه به معرفی و تعریف آن ها می پردازیم:

Value: این خاصیت تعیین می کند که جعبه های متن، به طور پیش فرض چه مقداری درون خود داشته باشند (که در حال حاضر کاربرد آن خیلی برای ما ملموس نیست)

AutoComplete: این Attribute در HTML5 جهت راحتی کاربران رونمایی شده است. به عنوان مثال اگر فردی، آدرس ایمیل خود را یک بار در جعبه متن مورد نظر وارد کرده باشد، برای بار دوم دیگر نیازی به تایپ مجدد کل ایمیل ندارد و صرفاً با وارد کردن حرف اول ایمیل خود می تواند کل متن ایمیل که به آن پیشنهاد می شود را با فشردن یک کلیک، به جعبه متن اضافه نماید. به خاصیت AutoComplete دو مقدار می توان انتساب داد: On و Off. اگر برابر On باشد، تکمیل اطلاعات به صورت خودکار انجام خواهد شد و اگر روی Off تنظیم شود، مشخصاً این اتفاق نخواهد افتاد که به صورت پیش فرض، این مقدار روی On تنظیم شده است.

 

 

آشنایی با خاصیت AutoFocus در HTML Forms

یکی دیگر از خاصیت هایی که در HTML5 رونمایی شده است، Auto Focus است. این Attribute اغلب برای Text Box ها مورد استفاده قرار می گیرد و باعث می شود توجه کاربر به سمتی که ما می خواهیم، حرکت کند.

وب سایت گوگل به زیبایی از این ویژگی استفاده کرده است. زمانی که گوگل را باز می کنیم، لازم نیست نشانگر موس را درون جعبه متن ببریم تا اجازه تایپ کردن داشته باشیم، به محض این که سایت گوگل لود شود، می توانیم بی وقفه تایپ نماییم.

به عبارتی واضح تر، با به کارگیری امکان Auto Focus در HTML5 قادر خواهیم بود، به صورت پیش فرض یک آیتم از صفحه را به حالت انتخاب شده تبدیل نماییم (جای کاربر تصمیم بگیریم).

پیشنهاد می شود، هم اکنون Google را باز کرده و این موضوع را به طور عملی بررسی نمایید

 

 

تغییر اندازه Text Box با بهره گیری از خاصیت Size

شاید باورتان نشود اما اکنون به جایگاهی رسیده ایم که می توانیم، اندازه Text Box ها را کم یا زیاد نماییم 🙂 .

با استفاده از خاصیت Size و یک مقدار عددی می توان اندازه (عرضی)جعبه های متن را تغییر داد. همان طور که در تصویر زیر مشخص است، در گام اول Size را برابر ۵۰ قرار داده ایم و در مرحله دوم، مقدار آن به عدد ۵ تغییر داده شده است که تفاوت کاملاً واضح است و با توجه به نیاز خود می توانید اندازه مورد نظرتان را وارد کنید.

 

 

معرفی خاصیت PlaceHolder در Text Box ها

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

در واقع از این خاصیت زمانی استفاده می شود که قصد داریم هشداری تسهیلگر (این عبارت رو با ذکر منبع همه جا استفاده کنید 🙂 )به کاربر بدهیم. مثلاً: فرض کنید ما یک جعبه متن داریم و خواسته ما از کاربران این است که آدرس کامل محل زندگی خود را در آن وارد نمایند.

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

نحوه ی نمایش Place Holder نیز در به زیبایی هر چه تمام تر در عکس زیر پیداست (دلیل زیبایی، زحمتی است که برای ساخت این تصویر کشیده شده است 🙂 )

 

 

خاصیت مهم Max Length در Text Box

ویژگی Max Length که در Text Box ها بسیار پرکاربرد است، برای مواقعی استفاده می شود که قصد داریم ورودی کاربر را (از لحاظ تعداد کاراکترها)محدود نماییم.

یک پرسش فنی: آیا می دانید شماره تلفن همراه، حداکثر از چند عدد (کاراکتر)می تواند تشکیل شود؟

پاسخ: درود بر شما که درست حدس زدید، ۱۱ عدد.

حال اگر قصد دریافت شماره تلفن همراه کاربران را داشته باشیم، به راحتی با خاصیت Max Length می توانیم ورودی کاربران را به ۱۱ کاراکتر محدود کنیم.

در نتیجه، کاربران هر چقدر هم تلاش کنند، نمی توانند بیش از ۱۱ کاراکتر در جعبه متن ما وارد نمایند.

 

 

Attribute کلیدی Disabled در HTML Forms

شاید گاهی اوقات لازم باشد، یکسری از آیتم ها را برای کاربران، غیر فعال نماییم. در این صورت از خاصیت Disabled کمک می گیریم.

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

شاید این سوال در ذهن شما ایجاد شود که چرا باید با زحمت یک آیتم را کدنویسی نماییم و طی یک عمل غیر منطقی، آن را از کار بیاندازیم؟

نکته اینجاست که اگر سایت ما صرفاً با HTML ساخت شده باشد، این کار کاملاً غیر معقول به نظر می رسد. اما در ادامه خواهیم دید که با زبان های برنامه نویسی پیشرفته مانند PHP می توانیم تعریف کنیم که اگر کاربری در سایت ما ثبت نام نکرده، پس نمی تواند به یکسری آیتم ها دسترسی داشته باشد(در واقع امکانات خاص برای کاربران عادی غیر فعال می شود).

 

 

خاصیت معروف ReadOnly در HTML Forms

استفاده از خاصیت ReadOnly (به معنی فقط خواندنی)در دنیای وب بسیار متداول است و کاربردی شبیه به خاصیت Disabled دارد.

اما تفاوت ReadOnly با Disabled در این است که کاربر در نگاه اول متوجه غیر فعال بودن المان نمی شود، چون ReadOnly برخلاف Disabled ظاهر المان را تغییر نمی دهد.

برای واضح تر شدن ماجرا پیشنهاد می شود تصویر زیر را با دقت مشاهده نمایید و اگر ماجرا روشن نشد، تنها راه باقی مانده این است که هر چه سریع تر دست به کد شوید 😁.

 

 

بررسی ۲ خاصیت مهم و کلیدی در تگ <form>

تگ <form> دارای دو خاصیت بسیار کلیدی است که در حال حاضر شاید یادگیری آن لطفی نداشته باشد اما پیشنهاد می شود حتماً این نکات را گوشه ای در ذهن خود نگه دارید. زمانی که به بحث PHP برسیم، این مفاهیم معنا پیدا می کنند.

علی ایحال، در این آموزش صرفاً قصد معرفی خواص Action و Method را داریم:

Action: در این خاصیت مشخص می کنیم، اطلاعات فرم ما به چه مقصدی ارسال شود (منظور همان آدرس است).

Method: خاصیت Method تعیین می کند که اطلاعات وارد شده، به چه روشی به سمت سرور ارسال شود. خاصیت Method دو مقدار را می تواند در خود جای دهد: Get و Post که در حالت پیش فرض روی مقدار Get تنظیم شده است.

Get: ارسال اطلاعات با روش Get بسیار نا امن است و اغلب برای ارسال Data هایی استفاده می شود که درجه اهمیت آن ها پایین است.

Post: روش Post از امنیت بالاتری نسبت به Get برخوردار می باشد. جهت ارسال اطلاعات مهم مانند: رمز عبور کاربران، بهتر است از این متد استفاده شود.

 

 

ساخت جعبه متن Password در HTML

نوع دیگری از جعبه های متن، Password ها هستند که با استفاده از خاصیت Type در تگ <input> به سادگی می توان این Text Box را ایجاد نمود.

خاصیت دیگری که جا دارد در خصوص آن صحبت کنیم، name است که در ادامه تعریف مختصری از آن را خواهیم داشت:

Name: شناسه ای است که ما را در تفکیک اطلاعات در DataBase یاری می نماید (این موضوع در بخش phpMySql مفسلاً آموزش داده خواهد شد.). ضمناً این خاصیت در تمامی TextBox ها بهتر است وجود داشته باشد تا کارِ برنامه نویسان سمت سرور راحت تر پیش رود.

 

 

Text Box از نوع Search در HTML5

نوع دیگری از جعبه های متن که در HTML نسخه ۵ معرفی شده است، Search می باشد. این نوع تنها فرقی که با Text Box معمولی (در ظاهر)دارد این است که هنگام تایپ در آن، آیکون ❌ نمایش داده می شود که می توان متن تایپ شده را با یک کلیکِ ساده، حذف نمود. این ایده جالب را می توانید در تصویر زیر به طور واضح مشاهده نمایید.

 

درست کردن Text Box از نوع URL در HTML5

یکی از انواع Text Box که استفاده از آن نیز بسیار رایج است، URL می باشد. مجدداً در ظاهر شاید هیچ تفاوتی با یک جعبه متن معمولی نداشته باشد اما پس از وارد کردن اطلاعات و فشردن دکمه ارسال، متوجه یکسری عملیات خارق العاده می شویم که به برکت حضور نوعِ URL است.

در واقع همانطور که در تصویر زیر کاملاً روشن است، اگر در جعبه متن URL چیزی غیر از URL Address وارد نماییم، اجازه ارسال اطلاعات به ما داده نمی شود.

 

 

آموزش ایجاد دکمه در HTML با تگ <input>

تقریباً تا به اینجای کار، اغلب نکات در خصوص ساخت فرم در HTML گفته شد اما در این بخش قصد داریم به آموزش ساخت دکمه در HTML بپردازیم. همانطور که در تصویر بالا قابل مشاهده است، با بهره گیری از تگ <input> و مقدار submit در خاصیت Type در کسری از ثانیه قادر خواهیم بود، برای فرم های خود یک دکمه ساده را به منصه ی ظهور برسانیم 😋.

ساخت جعبه رنگ با استفاده از HTML5

شاید در مخیله شما نگنجد، همانطور که اوایل در مخیله بنده هم نمی گنجید 😝 اما در آموزش ساخت فرم در HTML خواهیم توانست، جعبه رنگ در سایت خود ایجاد نماییم. نا گفته نماند که این امکان از برکت وجود HTML نسخه ۵ است (گفتم که در جریان باشید 😡).

این کارِ ارزشمند صرفاً با یک دستور ساده قابل پیاده سازی است. فقط کافیست مقدار type را برابر Color قرار دهید. کن فیکون خواهد گردید 😔.

 

 

پیاده سازی جعبه متن E-Mail در HTML5

در نسخه های قبل از HTML5 برای دریافت ایمیل کاربران، از Text Box های معمولی استفاده می شد، اما با ظهور و قدرت نمایی HTML5 هم اکنون با بهره گیری از نوع email در خاصیت Type می توان یک جعبه متن اختصاصی برای دریافت ایمیل ساخت.

در تصویر زیر به طور واضح و کامل این موضوع نمایش داده شده است، یکی از مواردی که توسط این Type کنترل می شود، الزام در قرار دادن @ است. در واقع اگر کاربر در متن ورودی خود، کاراکتر @ را قرار ندهد، جعبه ی متن email اجازه ارسال اطلاعات را نخواهد داد.

 

 

آموزش ساخت CheckBox در HTML

یکی از آیتم های اثر گذار در فرم ها بلاشک چک باکس ها هستند. گاهی وقت ها نیاز داریم یک سوال چند انتخابی برای مخاطبان خود مطرح نماییم. تنها راه برای این موضوع، ساخت Check Box در HTML است که به راحتی و صرفاً با قرار دادن مقدار Checkbox در خاصیت Type می توان به تعداد دلخواه، از این موارد، ایجاد کرد. تصویر زیر به طور واضح نشانگر این مطلب است:

 

 

به کارگیری خاصیت Checked در چک باکس

ممکن است تصمیم ما بر این باشد که یکی از چک باکس ها در حالت پیش فرض، به صورت انتخاب شده برای کاربران نمایش داده شود. در این صورت می باید از خاصیت Checked استفاده نمود. این خاصیت به دلیل این که مقدارش برابر با خودش است، لذا برای جلوگیری از تکرار بی جهت، مجاز هستیم آن را به صورت مستقل درج نماییم.

 

 

آموزش ساخت Radio Buttons در زبان HTML

گاهی اوقات در فرم های خود نیاز است سوالاتی مطرح کنیم که صرفاً دارای یک جواب صحیح هستند. به عنوان مثال: آیا شما شاغل هستید؟

پاسخ یا بلی است یا خیر. در این حالت از Radio Button ها استفاده می شود. فقط کافیست به تعدادی که قصد داریم، Radio Button بسازیم، تگ <input> از نوع radio ایجاد نماییم.

اما نکته جالب توجه: قرار دادن مقدار radio در خاصیت Type کافی نیست. اگر می خواهیم نهایتِ امر، دکمه های رادیویی ما به درستی کار کنند، درج خاصیت Name الزامی است. و نکته جالب تر این که مقدار Name هر کدام از Radio Button های مرتبط، باید یکسان باشد.

لطفاً با دقت هر چه تمام تر به تصویر زیر توجه نمایید (دیگه کم کم کار جدی شده😈)

 

 

آموزش ساخت Text Box از نوع Number در HTML

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

با قرار دادن مقدار number در خاصیت Type به راحتی می توان یک Text Box عددی ایجاد کرد. این نوع از جعبه متن، دارای سه خاصیت است که در ادامه مطلب به معرفی هر کدام از آن ها می پردازیم:

Min: با درج این خاصیت می توان کمترین مقدار انتخابی کاربر را تعیین نماییم.

Max: با به کار گیری این Attribute قادر هستیم، حداکثر مقدار انتخابی کاربر را مشخص کنیم.

Step: این امکان را به ما می دهد که فواصل حرکت انتخاب کاربران را مشخص نماییم (مثلاً: یکی یکی زیاد بشه یا پنج تا پنج تا).

 

 

آشنایی با نوع Range در تگ <input>

یکی دیگر از امکاناتی که در HTML5 به منصه ظهور گذاشته شده، ساخت دکمه های لغزنده ی افقی است (آخه من اینو چطوری توضیح بدم؟! 😡).

همانطور که در تصویر زیر به طور واضح، نمایش داده شده است، برای موارد خاصی می توان از این آیتم نیز استفاده نمود.

بدیهی است که برای پیاده سازی این مورد، کافیست مقدار Range را دورن خاصیت Type بریزیم و سپس منتظر خلق شگفتی باشیم!

Range هم مانند نوع Number دارای سه خاصیت Min, Max, Step است که در مورد قبل توضیح داده شد.

اگر این مفهوم برای شما جا نیفتاده، لطفاً جای نگریستن به عکس ها و متن های این آموزش، دست به کد شوید 😋.

 

کار با چند Element و Attribute خاص در HTML Forms

در این بخش از آموزش نیز با چند نوع دیگر از تگ های <input> آشنا خواهیم شد که هر کدام را به صورت مُنفک (جداگانه)بررسی خواهیم نمود:

نوع Submit که برای ساخت دکمه به کار گرفته می شود، چند خاصیت مهم دارد که در زیر به برخی از آن ها پرداخته ایم:

FormAction: در این قسمت، آدرس مقصدی که می خواهیم اطلاعات به آن جا ارسال شود را درج می کنیم.

FromNoValidate: این خاصیت به تازگی و در HTML5 معرفی شده است.

از این خاصیت به شکل NoValidate نیز استفاده می شود. تمام حرف این خاصیت: توجهی به کنترل ها نکن. درواقع اگر تگ <form> یا دکمه از نوع Submit خاصیت NoValidate را داشته باشد، حتی اگر برخی از آیتم ها خاصیت Required را داشته باشند (هنوز نخوندیم، نگران نباشید چند پاراگراف بعد یاد میگیریم)، NoValidate (بدون اعتبارسنجی)اجازه می دهد اطلاعات بی آنکه کنترلی انجام شود، ارسال شود.

FormTarget: این خاصیت تعیین می کند، پس از فشرده شدن دکمه توسط کاربر، مرحله ی بعد در همین صفحه باز شود یا در تب جدید؟

اگر قصد داریم محتوای گام آخر (صفحه ای که پس از کلیک کردن باز خواهد شد.)روی صفحه فعلی باز شود، FromTarget را برابر با Self_ قرار خواهیم داد اما اگر می خواهیم در تب جدید باز شود از مقدار Blank_  استفاده می کنیم.

دو نوع دیگر از تگ <input> در ذیل توضیح داده شده است:

Reset: اگر Type را برابر Reset قرار دهیم، نتیجتاً دکمه ای ایجاد خواهد شد که با کلیک بر آن می توان تمامی اطلاعات وارد شده را پاک نمود.

Image: اگر قصد قرار دادن عکس بین فرم ها را داریم، بهتر است از تگ <input> و مقدار Image در خاصیت Type استفاده نماییم که طبق تصویر زیر نحوه پیاده سازی آن واضح و روشن است.

 

ساخت بخش آپلود فایل با استفاده از دستور ساده HTML

بسیاری از مواقع نیاز است امکانی در سایت فراهم کنیم تا کاربران برای ما فایل هایی را ارسال کنند (مانند: فایل رزومه، عکس پروفایل یا کارت شناسایی).

برای فراهم آوردن این مورد، همین بَس که مقدار file را در خاصیت Type قرار دهیم.

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

 

 

افزودن خاصیت Required در HTML نسخه ۵

هم اکنون خواهیم توانست، کاری شگفت آور انجام دهیم. شوخی کردم، یک کار عادی است اما بسیار مهم 🧐.

یکسری از اطلاعات مثل ایمیل، نام و نام خانوادگی و یا رمز عبور که برای ما بسیار مهم هستند را با استفاده از خاصیت Required می توان الزامی کرد.

به عبارتی راحت تر، اگر کاربر بدون وارد کردن اطلاعات مهم (دارای خاصیت Required)روی دکمه ارسال کلیک کند، با خطا مواجه خواهد شد.

در تصویر زیر نیز به طور کامل این موضوع نشان داده شده است:

 

 

جمع بندی آموزش ساخت فرم در HTML

خب قسمت نهم آموزش HTML5 با موضوع ساخت فرم در HTML نیز به پایان خود رسید. امیدواریم از این آموزش هم در حدِ کفایت لذت برده باشید.

بخش دیگری از مبحث فرم ها باقی مانده است که در قسمت دهم آموزش HTML5 تا چند روز آینده تقدیم تان می شود.

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

⭐⭐⭐

برای موفقیت در برنامه نویسی اقدام باید گردد.

⭐⭐⭐

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

امیدوارم همواره امیدوار و پایدار باشید.

ارادتمند شما_ محمدرضا یعقوبی

 

 

 

 

 

 

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

رونمایی از محصول قدم صفر کسب و کار + گارانتی بی قید و شرط
همین الان توضیحات محصول را می خوانم