آموزش HTML به ساده ترین زبان

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

 

 

استفاده از این تگ بسیار ساده است و کاربرد آن هم جهت ایجاد یک نام برای <input> می‌باشد.

 

 

در این نمونه، همانطور که مشاهده می‌کنید برای هر input یک label مخصوص تعریف شده است. برای ایجاد ارتباط بین یک label و یک input، از for در label و آی دی در input استفاده می‌کنیم. در واقع برای ایجاد ارتباط بین این دو باید مقدار ویژگی for در label برابر با مقدار آی دی در input باشد.

برای تمامی انواع تگ <input> می‌توانید از تگ <label> استفاده کنید. استفاده از این تگ به همین سادگی که مشاهده کردید می‌باشد. اکنون که این تگ را نیز بررسی کردیم. به نحوه استفاده از فرم ها و ویژگی‌هایی که تگ فرم دارد، می‌پردازیم.

فرم‌ها <form> در آموزش HTML رایگان

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

 

در اینجا ما یک فرم داریم که شامل 2 ورودی و یک گزینه ثبت می‌باشد. دو جز اصلی یک فرم یک action و دیگری نوع متد آن می‌باشد. اکشن (action) در واقع آدرسی می‌باشد که اطلاعات فرم مورد نظر پس از ثبت به آن فرستاده می‌شود. (ارسال به سمت سرور و دریافت آن)

در این قسمت شما آدرس url ای را وارد می‌کنید که در سمت سرور تعریف کرده اید و زمانی می‌توانید آن را تست کنید که سمت سرور برای سایت نیز داشته باشید. (زمانی که صرفا به عنوان تست در فرانت کد نویسی می‌کنید، ممکن است که سمت سرور نداشته باشید)

کاربرد متد get در آموزش HTML رایگان

در مورد متد، ما دو نوع اصلی تحت عنوان get و post داریم. متد get در واقع برای گرفتن اطلاعات می‌باشد. شما بدین وسیله، اطلاعاتی را در داخل سرور ثبت نمی‌کنید و تنها دارید اطلاعاتی از سرور دریافت می‌کنید.

متد post برای ارسال اطلاعات می‌باشد و زمانی که شما از این متد استفاده می‌کنید برای فرم مورد نظرتان باید یک توکن نیز تعریف کنید که در جنگو (یک فریمورک برای سمت بک طراحی وب) به صورت {%csrf_token%} نیز تعریف کنید.

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

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

 

 

دو ویژگی‌ای که گفته شد، دو ویژگی اصلی و لازم برای هر فرم می‌باشد. ویژگی‌های دیگری نیز یک تگ <form می‌تواند داشته باشد که به آن‌ها در اینجا خواهیم پرداخت.

” به این نکته توجه کنید که برای ثبت اطلاعات در یک فرم، باید آن فرم حتما دارای یک دکمه از نوع submit داشته باشد، این دکمه می‌تواند با تگ button تعریف شود و یا با تگ input ولی مهم است که نوع آن submit باشد. “

ویژگی target

ویژگی بعدی، target می‌باشد. این ویژگی را در لینک‌ها ( تگ <a> ) نیز مشاهده کرده بودید. این ویژگی در اینجا برای این می‌باشد که شما با استفاده از آن مشخص کنید که پس از ثبت فرم، صفحه لود شود و یا صفحة دیگری باز شود. به دلیل آنکه در بخش لینک‌ها به بررسی آن پرداختیم، در اینجا تنها نمونه‌ای از آن را قرار می‌دهیم.

در این نمونه، پس از ثبت فرم، صفحه جدیدی باز می‌شود. این صفحه با توجه به تعریفی که در کد‌های قسمت بک تعریف شده است، صورت می‌گیرد. شما می‌توانید با استفاده از ajax ویا جاوا اسکریپت، بدون لود صفحه و یا باز شدن صفحه دیگر، اطلاعات فرم را ثبت کنید و به کاربر اطلاع دهید. در این رابطه در مقالات دیگری به طور کامل صحبت خواهیم کرد.

ویژگی name

ویژگی بعدی، name می‌باشد. با استفاده از این ویژگی شما می‌توانید با استفاده از جاوا اسکریپت، مقادیر فرم را بگیرید و یا مشخص کنید که آیا این فرم ثبت شود یا خیر. در این مثال شما مواردی مثل تابع و متد onclick() را مشاهده می‌کنید.

در حال حاضر در اینجا امکان صحبت در رابطه با این تابع و متد onclick() نیست، اما برای درک بهتر کد زیر، این متد بدین شکل می‌باشد که وقتی بر روی دکمة مورد نظر کلیک کنید، تابعی که اسم آن آمده است، از قسمت جاوا اسکریپت فراخوانده می‌شود و کد‌های داخل آن اجرا می‌شود.

همانطور که در مثال مشاهده می‌کنید، به جای وجود نوع submit از نوع button استفاده شده است و یک تابع فراخوانی شده است.

 

ویژگی enctype

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

  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded (حالت پیش‌فرض)

در حالت اول برای ارسال یک متن می‌باشد، در این حالت در صورتی که در فرم کاراکترهای خاصی وجود داشته باشد، آن‌ها را نمی‌تواند اصطلاحا رمزگذاری (encode) کند.

در حالت دوم، برای مواقعی مورد استفاده قرار می‌گیرد که شما یک فایل را قصد داشته باشید تا به سرور ارسال نمایید. در این حالت باید ویژگی enctype مقدار multipart/form-data را داشته باشد. حالت سوم نیز که پیش‌فرض این ویژگی می‌باشد، تمامی کاراکترها را رمزگذاری می‌کند.

 

 

در صورتی که فایلی برای ارسال کردن ندارید، نیازی به استفاده از این ویژگی و تغییر آن ندارید.

تگ <form>

ویژگی بعدی که آخرین ویژگی در تگ <form> می‌باشد را قبلا نیز با آن آشنا شدید، این ویژگی autocomplete می‌باشد. نحوه استفاده از آن نیز مشابه آنچه در قبل گفته شد می‌باشد. در اینجا، در صورتی on بودن این ویژگی، تمامی اطلاعات داخل فرم می‌تواند به صورت خودکار با استفاده از اطلاعات قبلی پر گردد.

 

ویژگی‌های تگ <input> در آموزش HTML رایگان

خب اکنون با تگ فرم و ویژگی‌های آن آشنا شدید. اکنون قصد داریم تا چند تگ دیگر را که در فرم‌ها نیز مورد استفاده قرار می‌گیرد را بررسی کنیم. اولین مورد، تگ <select> می‌باشد. در بررسی ویژگی‌های تگ <input> در یک مورد، ما می‌توانستیم یک لیست را به کاربر نمایش دهیم و کاربر امکان انتخاب یکی از موارد لیست را داشت.

موردی که گفته شد، فقط در داخل یک تگ <input> قرار داشت، اکنون اگر قصد داشته باشیم تا یک لیست داشته باشیم که به صورت کشویی باز شود و کاربرد امکان انتخاب یکی از آن یا چند مورد را داشته باشید به چه صورت باید عمل کرد؟ در اینجا از تگ <select> باید استفاده کنیم. نحوه نوشتن یک لیست با این تگ به صورت زیر می‌باشد: ( همانطور که مشاهده می‌کنید، برای این تگ نیز می‌توان از تگ <label> استفاده نمود.)

 

 

در این مثال ما یک لیست خواهیم داشت که در آن، اسامی ماشین‌های مختلف نمایش داده شده است و کاربر یکی از این موارد را می‌تواند انتخاب کند. قبل از بررسی ویژگی‌های این تگ جالب است بدانید که ویژگی‌های این تگ بسیار شبیه به ویژگی‌های تگ <input> می‌باشد. این تگ ویژگی‌های زیر را دارد:

  • autofocus (در مرورگر موزیلا پشتیبانی نمی‌شود)
  • disabled
  • form
  • multiple
  • name
  • required
  • size

حالت multiple

تمامی موارد همچون تگ <input> می‌باشد. حالت multiple در اینجا برای انتخاب چند مورد از لیست مورد استفاده قرار می‌گیرد و size نیز، تعداد گزینه‌های قابل نمایش برای کاربر می‌باشد. بدین معنا که اگر یک لیستی 100 مقدار داشت، اگر محدودیتی برای نمایش تعریف نشود، تمامی 100 لیست را با هم نمایش می‌دهد که نمای بدی برای کاربر به وجود می‌آورد.

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

” در حالت استفاده از ویژگی multiple توجه کنید که برای انتخاب چند مورد از لیست در ویندوز باید کلید crtl و در مک کلید کامند را همزمان نگه دارید. “

نمونه multiple

نمونه size:

نمونه disabled:

نمونه name و استفاده در form

 

استفاده از name برای ارسال اطلاعات به سمت سرور و دریافت آن در سمت سرور و همچنین برای دسترسی به تگ مقدار تگ <select> با استفاده از جاوا اسکریپت می‌باشد.

مقداری (value) در آموزش HTML رایگان

” مقداری (value) که هر یک از گزینه‌ها در این تگ دارند، جهت ارسال به سمت سرور مورد استفاده قرار می‌گیرد. به همین خاطر این امکان وجود دارد تا مقدار value با عبارت نمایش داده شده برای کاربر جهت انتخاب متفاوت باشد و این مساله کاملا طبیعی می‌باشد. “

 

تگ <textarea>

تگ بعدی مورد بررسی تگ <textarea> می‌باشد. این تگ مشابه تگ <input> در نوع text می‌باشد، اما تفاوت‌هایی نیز با یکدیگر دارند. استفاده از این تگ به صورت زیر می‌باشد: همانطور که مشاهده می‌کنید، این تگ نیز تگ <label> می‌تواند دریافت کند.

 

 

از جمله ویژگی‌های این تگ، امکان تغییر سایز آن توسط کاربر در صفحه می‌باشد. ویژگی‌هایی که این تگ می‌تواند داشته باشد، موارد زیر می‌باشد:

تعریف ویژگی
همانند ویژگی autofocus در تگ‌های قبلی که گفته شده عمل می‌کند. autofocus
برای تعیین کردن تعداد ستون‌های تگ می‌باشد. (مشابه دادن عرض به تگ) cols
عملکرد آن مشابه عملکرد این ویژگی در تگ <input> می‌باشد. dirname
همانند سری‌های قبل، تگ مورد نظر را از جهت نوشتن غیر فعال می‌کند. disabled
همانند تعریف آن در تگ‌های قبلی که صحبت شد. form
برای تعیین حداکثر تعداد کاراکتر قابل نوشتن در تگ maxlength
همانند تگ‌های قبلی گفته شده name
برای نمایش عبارتی بر روی تگ به عنوان نوعی راهنما placeholder
تنها امکان خواندن عبارت می‌باشد و نمی‌توان در آن چیزی نوشت. تفاوت آن با حالت disabled نوع نمایش آن در صفحه می‌باشد. readonly
پر کردن آن ضروری می‌باشد. required
برای مشخص کردن تعداد سطر‌های آن. (مشابه دادن ارتفاع به تگ) rows

ویژگی rows و cols

در موارد گفته شده تنها دو ویژگی rows و cols جدید می‌باشند که در مثال زیر کاربرد این دو ویژگی را نیز خواهید دید:

 

 

در اینجا برای تگ <textarea> به اندازه 4 خط در صفحه نمایش داده می‌شود. ویژگی cols نیز، یک عدد می باشد و با مقداری که عرض دریافت می‌کند متفاوت است و بر اساس میانگینی از میزان عرض کاراکترها می‌باشد. در حالت پیش‌فرض این عدد 20 می‌باشد. برای تعداد خطوط یعنی rows نیز در حالت پیش‌فرض 2 می‌باشد. چند نمونه از استفاده از ویژگی‌های مختلف در این تگ را با هم مشاهده می‌کنیم:

استفاده از ویژگی maxlenght

استفاده از ویژگی placeholder

استفاده از ویژگی readonly

استفاده از ویژگی disabled:

” از این تگ در فرم‌ها نیز می‌توانید استفاده کنید. “

استفاده از این تگ در فرم

 

 

” شما می‌توانید چندین ویژگی را با یکدیگر استفاده کنید، به شرط اینکه ویژگی‌ها با یکدیگر تضاد نداشته باشند.”

تگ <fieldset>

ویژگی بعدی در داخل فرم استفاده می‌شود و به نوعی یک مجموعه از تمامی ورودی‌های یک فرم می‌توانید ایجاد کنید. این تگ <fieldset> نام دارد. نحوه استفاده از این تگ به صورت زیر می‌باشد:

 

تگ <legend>

این تگ یک فضای مشخص برای فیلدهای فرم در صفحه ایجاد می‌کند. همانطور که در کد مشاهده می‌کنید، تگ <legend> در داخل این تگ تعریف شده است. این تگ در واقع به عنوان تیتری برای فضای فرم مورد نظر استفاده می‌شود.

تگ <fieldset> دارای 3 ویژگی می‌باشد:

  • disabled
  • form
  • name

ویژگی اول موجب می‌شود تا تمامی تگ‌های داخل این تگ، غیر فعال شوند.

ویژگی دوم که form می‌باشد، عملکردی مشابه با عملکرد این ویژگی در تگ <input> و <button> دارد.

ویژگی سوم نیز که یک name به این تگ می‌دهد و با استفاده از آن می‌توان اطلاعات آن را در سمت سرور دریافت کرد و همچنین به عنوان یک روشی برای گرفتن اطلاعات آن با استفاده از جاوا اسکریپت نیز می‌باشد. نمونة استفاده از این سه ویژگی را در نمونه‌های زیر می‌توانید مشاهده کنید:

استفاده از ویژگی disabled در آموزش HTML رایگان

 

استفاده از ویژگی form 

 

همانطور که مشاهده می‌کنید، در کنار تگ‌های داخ فرم، می‌توان یک تگ <fieldset> با تگ‌های آن را به فرم اضافه کرد. “دقت کنید که برای هر یک از تگ‌های داخل تگ <fieldset> در این حالت، نیاز است که به صورت جداگانه، ویژگی form را تعریف کنید. “

استفاده از ویژگی name در آموزش HTML رایگان

 

تگ <optgroup>

تگ بعدی مورد بررسی، تگ <optgroup> می‌باشد. این تگ برای دسته بندی، لیست‌ها در یک تگ <select> کاربرد دارد. به نمونه زیر توجه کنید:

 

در اینجا شما دو دسته ماشین‌های آلمانی و ماشین‌های سوئدی دارید. با استفاده از این تگ، این دو بخش از یکدیگر مجزا شدند ولی کماکان در داخل لیست می‌باشند. این تگ نیز می‌تواند تگ <label> داشته باشد و تنها ویژگی آن نیز، disabled می‌باشد. با استفاده از این ویژگی می‌توانید تمامی مقادیر لیست داخل این تگ را غیر فعال کنید.

تگ <output>

تگ بعدی، تگ <output> می‌باشد. این تگ همانطور که اسمش پیداست، خروجی یک عملیات را به ما می‌دهد. مثال زیر را توجه کنید:

 

 

در اینجا یک ویژگی جدید به تگ فرم اضافه شده است که در واقع ویژگی خود فرم نمی‌باشد و ناشی از تگ <output> می‌باشد. در این ویژگی یک عملیات تعریف شده است و آن این می‌باشد که مقادیر تگ با آی دی a و تگ با آی دی b را دریافت می‌کند و آن را تبدیل به عدد می‌کند (مقادیر در ابتدا به صورت رشته می‌باشند) سپس دو مقدار مورد نظر را با یکدیگر جمع می‌کند.

ویژگی for در آموزش HTML رایگان

در تگ <output> دو مقدار مورد نظر در داخل ویژگی for مشخص شده است و در هر بار که مقادیر a و b تغییر می‌کنند، حاصل جمع آن‌ها در تگ <output> نمایش داده می‌شود. در واقع این ویژگی برای به وجود آوردن نوعی ارتباط بین تگ‌های داخل فرم می‌باشد. این تگ نیز دارای ویژگی name می‌باشد که هنگام ارسال به سمت سرور، با استفاده از name آن، می‌توان مقدارش را دریافت کرد.

 

 

این تگ سه ویژگی زیر را دارد:

  • for
  • form
  • name

که هر سه ویژگی تماما مشابه تگ <input> می‌باشد با این تفاوت که ویژگی for به جای اختصاص پیدا کردن به یک تگ <label> مخصوص، تگ‌هایی که به عنوان ورودی مقادیر تگ <output> می‌باشند، اختصاص پیدا می‌کنند.

تگ <meter>

این مقاله را بررسی دو تگ دیگر به پایان می‌رسانیم. تگ اول، تگ <meter> می‌باشد. این تگ در واقع برای نمایش، درصد پیشرفت و یا نمایش مقداری به صورت یک progress bar می‌باشد. این تگ نیز می‌تواند تگ <label> دریافت کند.

 

 

در این مثال شما میزان فضای پر شده از هر دیسک را به صورت یک نمای گرافیکی و تصویری مشاهده می‌کنید. این تگ دارای 7 ویژگی می‌باشد که در نمونه بالا 3 ویژگی آن را مشاهده می‌کنید. این ویژگی شامل موارد زیر می‌باشند:

تعریف ویژگی
 همانند تگ‌های قبلی، برای اختصاص دادن به یک فرم خاص مورد استفاده قرار می‌گیرد. form
بالاترین مقدار در تگ مورد نظر high
پایین ترین مقدار در تگ مورد نظر low
برای تعیین حداکثر مقداری که می‌تواند بگیرد. با استفاده از این ویژگی می‌توان به نوعی بازه خاصی برای نمایش تعیین کرد. در حالت پیش‌فرض 100 می‌باشد. max
برای تعیین حداکثر مقداری که می‌تواند بگیرد. با استفاده از این ویژگی می‌توان به نوعی بازه خاصی برای نمایش تعیین کرد. در حالت پیش‌فرض 0 می‌باشد. min
بازه‌ای برای تگ مشخص می‌کند که مقدار تگ به عنوان مقدار بهینه می‌باشد. optimum
مقدار برای تگ مورد نظر

value

” با استفاده از جاوا اسکریپت و تغییر مقدار value این تگ می‌توان شکل داینامیک به نحوة نمایش این تگ داد.”

انواع مختلف ویژگی‌ها را در مثال‌های زیر می‌توانید مشاهده کنید:

 

برای ویژگی optimum

برای ویژگی form

تگ <progress>

تگ بعدی مورد بررسی که آخرین تگ این بخش می‌باشد. تگ <progress> می‌باشد. این تگ نیز مشابه تگ قبلی می‌باشد، اما نوع نمایش آن متفاوت است.

این تگ تنها دو ویژگی max و value را دریافت می‌کند. ویژگی value که مقدار را در آن نشان می‌دهد و ویژگی max نیز حداکثر مقدار آن را تعیین می‌کند. در حالت پیش‌فرض این مقدار 1 می‌باشد. این تگ نیز می‌تواند تگ <label> دریافت کند. از این تگ برای نشان دادن درصد پیشرفت عمدتا استفاده می‌شود.

” با استفاده از جاوا اسکریپت و تغییر مقدار value این تگ می‌توان شکل داینامیک به نحوه نمایش این تگ داد.”

در این مقاله نیز با تگ‌های دیگری همچون فرم آشنا شدیم. در مقالة بعد با کلاس و آی دی و طریقه نمایش یک ویدئو در داخل صفحه آشنا می‌شویم.