صفات عناصر ورودی Input Attributes در HTML

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

صفات عناصر ورودی Input Attributes در HTML

Free-Learn

صفات عناصر ورودی یا Input Attributes در HTML

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

در ادامه و تا پایان میخواهیم با صفات زیر در عناصر ورودی در فرم ها آشنا شوم :

  • name
  • value
  • readonly
  • disabled
  • size
  • maxlength

و صفاتی که در HTML5 اضافه شده اند برای تگ Form :

  • autocomplete
  • novalidate

و صفاتی که در HTML5 اضافه شده اند برای عناصر ورودی :

  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • min and max
  • multiple
  • pattern
  • placeholder
  • required
  • step

Free-Learn

Name Attribute

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

امتحان کنید

Free-Learn

Value Attribute

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

امتحان کنید

Free-Learn

Readonly Attribute

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

امتحان کنید

Free-Learn

Disabled Attribute

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

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


امتحان کنید

Free-Learn

Size Attribute

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

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


امتحان کنید

Free-Learn

Maxlength Attribute

با استفاده از این صفت میتوان مشخص کرد که چه تعداد کاراکتر میتواند درون یک فیلد متنی وارد شود ، برای مثال در دستورات زیر بیشتر از ۷ کاراکتر نمیتوان درون فیلد مورد نظر وارد کرد.

امتحان کنید

Free-Learn

Autocomplete Attribute

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

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

این صفت را میتوان با عناصر ورودی text, search, url, tel, email, password, datepickers, range, color نیز بکار گرفت.


امتحان کنید

Free-Learn

Novalidate Attribute

با استفاده از این صفت در درون تگ <form> میتوان اعتبار سنجی را برای تمامی فیلدهای درون فرم غیرفعال کرد.

برای مثال لطفا بروی دکمه امتحان کنید کلیک و خروجی دستورات زیر را مشاهده نمایید، در خروجی همانطور که مشاهده مینمایید یک فیلد برای دریافت ایمیل کاربر قرار دارد، اگر صفت novalidate وجود نداشت ما باید حتما یک آدرس ایمیل به این شکل test@test.com وارد میکردیم ولی چون صفت novalidate وجود دارد این یعنی دیگه اعتبار سنجی فیلدها مهم نیست و کاربر هر چیزی که بخواهد میتونه وارد کنه.

امتحان کنید

Free-Learn

Autofocus Attribute

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

امتحان کنید

Free-Learn

Form Attribute

تا به الان در مثال ها حتما مشاهده کرده اید که عناصر ما (عناصر ورودی و..) درون فرم قرار میگیرند و وقتی کاربر بروی دکمه ی ثبت یا ارسال اطلاعات کلیک میکند این اطلاعات به سرور ارسال می شوند.

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

باید ۲ کار را انجام دهیم :

  • تعریف یک آی دی توسط صفت Id درون تگ Form
  • قرار دادن نام id درون صفت Form موجود در عناصر مورد نظر

امتحان کنید

Free-Learn

Formaction Attribute

تا به الان در تمامی فرم هایی که فری لرن ارائه داده است فقط یک اکشِن یا Action اون هم در تگ Form وجود داشت، یعنی محل یا مکان یا صفحه ای در سرور که قرار است داده های وارد شده درون فرم ها را در خودش ذخیره کند.

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

صفت formaction را میتوان با عناصر ورودی از نوع submit و image بکار گرفت.


امتحان کنید

Free-Learn

Formenctype Attribute

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

این صفت فقط بروی فرم هایی که متد یا method آنها برابر است با post کار خواهد کرد.

صفت formenctype را میتوان با عناصر ورودی از نوع submit و image بکار گرفت.



Free-Learn

Formmethod Attribute

با استفاده از این صفت نیز میتوان متد ارسالی داده ها را در فرم مشخص کرد، همانطور که در بخش کار با فرم ها یاد گرفتیم متد یک فرم بصورت پیش فرض Get می باشد ، ولی ما با استفاده از صفت formmethod میتوانیم این متد را در هنگام ارسال داده ها به سرور تغییر دهیم.

صفت formmethod را میتوان با عناصر ورودی از نوع submit و image بکار گرفت.


امتحان کنید

Free-Learn

Formnovalidate Attribute

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

صفت formnovalidate را میتوان با عناصر ورودی از نوع submit بکار گرفت.


امتحان کنید

Free-Learn

Formtarget Attribute

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

صفت formtarget را میتوان با عناصر ورودی از نوع submit و image بکار گرفت.


امتحان کنید

Free-Learn

Min And Max Attributes

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

صفت min و max را میتوان با عناصر ورودی از نوع number, range, date, datetime-local, month, time, week بکار گرفت.


امتحان کنید

Free-Learn

Multiple Attribute

با استفاده از صفت multiple میتوان قابلیت انتخاب چندین فایل / گزینه را به کاربر داد.

صفت multiple را میتوان با عناصر ورودی از نوع Email و File بکار گرفت.

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


امتحان کنید

Free-Learn

Pattern Attribute

ما با استفاده از این صفت میتوانیم یک الگوی مشخص شده ای را برای مقادیر وارد شده در یک فیلد تنظیم نماییم، برای مثال میتوانیم مشخص نماییم که در یک فیلد فقط یک نام با حداکثر ۶ حرف و فقط از حروف کوچک انگلیسی وارد شود و غیره.

صفت pattern را میتوان با عناصر ورودی از نوع text, search, url, tel, email, password بکار گرفت.


امتحان کنید

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

Free-Learn

Placeholder Attribute

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

صفت placeholder را میتوان با عناصر ورودی از نوع text, search, url, tel, email, password بکار گرفت.


امتحان کنید

Free-Learn

Required Attribute

حتما تا الان برای یکبارم که شده برای شما پیش اومده مثلا در حال تکمیل یک فرم هستید و وقتی بروی دکمه ارسال اطلاعات کلیک میکنید یک پیغام میده که مثلا فلان فیلد باید حتما تکمیل شود.

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

صفت required را میتوان با عناصر ورودی از نوع text, search, url, tel, email, password, date pickers, number, checkbox, radio, file بکار گرفت.


امتحان کنید

Free-Learn

Step Attribute

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

صفت step را میتوان با عناصر ورودی از نوع number, range, date, datetime-local, month, time, week بکار گرفت.


امتحان کنید

خب دوستان به پایان این بخش (صفات عناصر ورودی Input Attributes در HTML) رسیدیم امیدوارم که مشکلی در این بخش نداشته باشید.

Free-Learn