این آموزش در تاریخ ۱۴۰۲/۰۶/۱۹ آپدیت شده است.
عناصر قابل استفاده در تگ Form در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش عناصر قابل استفاده در تگ Form در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید : [مخفی کن]
عناصر قابل استفاده در تگ Form در HTML
در این بخش از مجموعه آموزش های قدم به قدم زبان HTML میخواهیم با تگ های قابل استفاده در تگ Form آشنا و با اونها کار کنیم.
ما در جلسه قبلی با آموزش ایجاد و نحوه استفاده از تگ فرم در یک صفحه ی وب آشنا شدیم، که پیشنهاد میکنم حتما این بخش رو از اینجا مشاهده نمایید.
حال در ادامه با من همراه باشید تا با تمامی تگ هایی که ما میتوانیم در تگ Form استفاده نماییم آشنا شوید :
Free-Learn
تگ <input> در فرم ها
یکی از مهمترین و پراستفاده ترین تگ های موجود در Form ها ، عناصر ورودی یا همون <input>
ها می باشند، که نوع های مختلفی دارند و هر یک از این نوع ها میتواند برای ما کاره مشخصی را انجام دهند.
برای مثال یک نوع عنصر Input هست، برای ایجاد یک فیلد متنی ساده و یکی دیگه هست برای ایجاد یک فیلد پسورد ( که کاربر بتواند در آن رمز یا پسورد وارد نماید ) و یا مثلا از نوع چک باکس و.. که ان شاالله در جلسه بعدی بطور کامل با تمامی نوع های اینپوت ها آشنا خواهید شد.
مثال : استفاده از نوع text ( یعنی متن ) ( مثلا برای دریافت نام یا یه متن کوتاه یا همچین چیزی )
برای مثال دستور بالا یک تگ اینپوت از نوع متنی رو ایجاد میکنه، همانطور که گفتم عناصر ورودی ( Input ها ) میتوانند نوع های مختلفی داشته باشند، مثلا از نوع پسورد یا مثلا نوع دکمه رادیویی و… که در جلسه بعدی با همه آنها آشنا خواهید شد.
Free-Learn
تگ <label> در فرم ها
تگ <label>
همونطور که از اسمش هم مشخصه، با استفاده از اون میتونیم برای اینپوت هامون یک برچسب یا لیبل ( یا یه متن برای عنوان یا شناسایی ) مشخص نماییم.
وقتی برای یک Input میخوایم Label تعریف کنیم، باید اول یه id برای Input مون مشخص کنیم بعدش همون id رو داخل تگ Label قرار بدیم تا بهمدیگه وصل بشن.
Free-Learn
تگ <select> در فرم ها
با استفاده از این تگ در فرم ها ما میتونیم یک لیست بازشو رو ایجاد نماییم، و وقتی صفحه میاد بالا بصورت پیش فرض اولین گزینه موجود در لیست، خودش بصورت خودکار انتخاب میشه.
در صورتی که بخواهیم یک گزینه را به دلخواه خودمان از لیست بصورت پیش فرض انتخاب نماییم باید از مقدار selected
درون گزینه ی مورد نظرمان استفاده نماییم.
Free-Learn
تگ <textarea> در فرم ها
تکست اِریا یا ناحیه متنی یا textarea
یکی دیگر از تگ های مورد استفاده در فرم ها و بطور کلی در HTML می باشد که با استفاده از اون میتونیم یک باکس متنی با قابلیت دریافت چندین خط متن را ایجاد نماییم.
بیشترین استفاده از این تگ، معمولا در باکس نظرات یا باکس دریافت متن پیغام در فرم تماس با ما می باشد.
Free-Learn
بطور کلی میشه گفت ما دو نمونه دکمه میتونیم داشته باشیم، یک نمونه دکمه هست که از نوع عناصر ورودی ( Input ) است و در درون فرم ها قرار میگیرند و با کلیک بروی آنها اطلاعات وارد شده در فرم به سرور ارسال می شود.
یک نمونه ی دیگر از دکمه ها هستند که از نوع عناصر button
هستند و میتونن خارج از فرم ها مورد استفاده قرار بگیرند، مثلا میتونیم کاری کنیم که وقتی روی یه دکمه کلیک شد یه پیغام نشون بده یا …
مثال شماره ۱ : دکمه button از نوع ارسال فرم ( یعنی از نوع submit )
مثال شماره ۲ : دکمه button از نوع قابل کلیک بودن ( یعنی از نوع button )
Free-Learn
تگ <fieldset> و <legend> در فرم ها
فیلدسِت تگی است که ما با استفاده از اون میتونیم عناصر موجود در فرم هارو گروه بندی کنیم، بفرض مثال میخوایم یکسری اطلاعات شخصی و یکسری اطلاعات تحصیلی و .. رو از کاربر دریافت کنیم، پس میتونیم از این تگ استفاده کنیم.
ما با استفاده از تگ legend
درون عنصر fieldset
میتوانیم یک کپشن یا یک عنوان را برای گروه مون مشخص نماییم.
Free-Learn
تگ <datalist> در فرم ها
با استفاده از تگ datalist
میتوانیم یک لیست با گزینه های از پیش تعریف شده را ایجاد نماییم که کاربر بتواند از بین گزینه های موجود در لیست به دلخواه یک گزینه را انتخاب نماید.
در مرحله اول باید با استفاده از تگ Input و صفت list
یک لیست را تعریف نماییم و سپس در مرحله ی دوم باید از تگ datalist
و صفت id
استفاده کرد و سپس نامی که در صفت list در مرحله ی اول ایجاد کردیم را در صفت id تگ datalist قرار دهیم.
وقتی دوبار بروی لیست کلیک بشه، موارد لیست شده نمایش داده میشوند
Free-Learn
تگ <output> در فرم ها
این تگ یکی از تگ های محاسبه گر در فرم ها می باشد، یعنی همانطورم که از اسمش پیداست این عنصر میتواند نتیجه ی یک یا چند عمل را در خروجی به نمایش در بیاورد، و بطور کلی ما برای ایجاد خروجی مان از این عنصر استفاده مینماییم.
لطفا برای مشاهده خروجی مثال زیر بروی دکمه امتحان کنید کلیک نمایید و سپس در خروجی، ۲ عدد را به دلخواه انتخاب نمایید تا حاصل جمع آن به شما نمایش داده شود.