عناصر قابل استفاده در تگ Form در HTML

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

عناصر قابل استفاده در تگ Form در HTML

Free-Learn

عناصر قابل استفاده در تگ Form در HTML

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

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

حال در ادامه با من همراه باشید تا با تمامی تگ هایی که ما میتوانیم در تگ Form استفاده نماییم آشنا شوید.

Free-Learn

عنصر <input> در فرم ها در HTML

یکی از مهمترین و پراستفاده ترین عناصر یا تگ های موجود در Form ها ، عناصر ورودی یا همون <input> ها می باشند، که نوع های مختلفی دارند و هر یک از این نوع ها میتواند برای ما کاره مشخصی را انجام دهند.

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

عناصر ورودی در فرم ها بیش از ۱۰ نوع می باشند که همه ی آنها را در بخش بعدی میتوانید مشاهده نمایید.

در مثال زیر یک Input یا ورودی از نوع متنی ساده را نشان میدهد :

امتحان کنید

برای مثال دستور بالا یک عنصر ورودی از نوع متنی را ایجاد میکند، همانطور که گفتم عناصر ورودی (input) میتوانند نوع های مختلفی داشته باشند، مثلا از نوع پسورد یا نوع دکمه یا نوع رادیویی و.. که در بخش بعدی با انواع حالت ها یا نوع های عناصر ورودی در HTML آشنا خواهید شد.

Free-Learn

عنصر <select> در فرم ها در HTML

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

امتحان کنید

در صورتی که بخواهیم یک گزینه را به دلخواه خودمان از لیست بصورت پیش فرض انتخاب نماییم باید از مقدار selected درون گزینه ی مورد نظرمان استفاده نماییم.

امتحان کنید

ما نیز با استفاده از صفت size و مقداری که دریافت میکند میتوانیم مشخص نماییم که چه تعداد از مقادیر موجود در لیست نمایش داده شوند، که بصورت پیش فرض این مقدار ۱ می باشد، ولی ما میتوانیم به دلخواه نیز این گزینه را مشخص نماییم.

امتحان کنید

همچنین ما میتوانیم با قرار دادن دستور multiple درون تگ select به کاربر این امکان رو بدهیم که بتواند از بین گزینه های موجود در لیست چندین گزینه (بیش از یک گزینه) را انتخاب نماید.

برای انتخاب چندین گزینه از لیست بازشو دکمه Ctrl را از روی صفحه کلید نگه دارید و سپس با ماوس گزینه های مورد نظرتان را انتخاب نمایید.


امتحان کنید

Free-Learn

عنصر <textarea> در فرم ها در HTML

تکست اِریا یا ناحیه متنی یا textarea یکی دیگر از عناصر یا تگ های مورد استفاده در فرم ها و بطور کلی در HTML می باشد که با استفاده از این عنصر میتوانیم یک باکس متنی با قابلیت دریافت چندین خط متن را ایجاد نماییم.

از طریق صفت های rows و cols میتوانیم اندازه ناحیه متن مان را مشخص نماییم.


امتحان کنید

Free-Learn

عنصر <button> در فرم ها در HTML

بطور کلی میشه گفت ما دو نمونه دکمه میتونیم داشته باشیم، یک نمونه دکمه هست که از نوع عناصر ورودی (Input) است و در درون فرم ها قرار میگیرند و با کلیک بروی آنها اطلاعات وارد شده در فرم به سرور ارسال می شود.

یک نمونه ی دیگر از دکمه ها هستند که از نوع عناصر button هستند و ما میتوانیم در این نوع دکمه ها یک محتوا (تصویر،متن و..) را قرار دهیم و در واقع تفاوت اصلی این نوع دکمه با دکمه های از نوع عناصر ورودی در همین است.

امتحان کنید

Free-Learn

عنصر <fieldset> در فرم ها در HTML

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

ما با استفاده از تگ legend درون عنصر fieldset میتوانیم یک کپشن یا یک عنوان را برای گروه مون مشخص نماییم.

امتحان کنید

Free-Learn

عناصر جدید فرم ها در HTML5

در HTML5 دو عنصر جدید در فرم ها اضافه شده است که در ادامه میتوانید نحوه ی استفاده از این ۲ عنصر را مشاهده نمایید.

عنصر <datalist> در HTML5

با استفاده از عنصر datalist در HTML5 ما میتوانیم یک لیست با گزینه های از پیش تعریف شده را ایجاد نماییم که کاربر بتواند از بین گزینه های موجود در لیست به دلخواه یک گزینه را انتخاب نماید.

در مرحله اول باید با استفاده از عنصر ورودی (Input) و صفت list یک لیست را تعریف نماییم و سپس در مرحله ی دوم باید از عنصر datalist و صفت id استفاده کرد و سپس نامی که در صفت list در مرحله ی اول ایجاد کردیم را در صفت id عنصر datalist قرار دهیم.

امتحان کنید

عنصر <output> در HTML5

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

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

امتحان کنید

Free-Learn