آموزش HTML – فصل بیست و چهارم: خاصیت های Input

خاصیت value

خاصیت value یک مقدار تعیین شده اولیه را برای یک زمینه ورودی مشخص می کند.

مثال :

چاپ مثال بالا:

خاصیت readonly

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

مثال:

چاپ مثال بالا:

خاصیت disabled

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

مثال :

چاپ مثال بالا:

خاصیت size

خاصیت size اندازه را برای یک زمینه ورودی به مقدار تعداد کاراکتر ها مشخص می کند.

مثال :

چاپ مثال بالا:

خاصیت maxlength

خاصیت maxlength حداکثر طول اجازه داده شده برای یک زمینه ورودی را تعریف می کند.

مثال:

خودتان امتحان کنید، در زمینه زیر نمی توانید بیشتر از 10 حرف را تایپ کنید:

با خاصیت maxlength زمینه ورودی بیشتر از تعداد کاراکتر اجازه داده شده برای وارد کردن قبول نمی کند.

خاصیت maxlength هیچ گونه بازخوردی را ارائه نمی دهد پس اگر می خواهید به کاربر هشدار دهید شما باید یک کد javascript بنویسید.

نکته : محدودیت های ورودی محوظ از خطا نیستند و جاوا اسکریپت راه های زیادی برای اضافه کردن ورودی های غیر مجاز دارد. برای محدودیت گذاشتن امن بر روی ورودی باید به وسیله سرور هم چک شود. (منظور این است که تعداد کاراکتر ها را بر روی سرور، در هنگام دریافت مقادیر، بررسی کنید.)

خاصیت های اچ تی ام ال 5

اچ تی ام ال نسخه پنج، خاصیت های زیر را به تگ <input> اضافه کرده است:

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step
• and

خاصیت های زیر برای <form> هستند :

• autocomplete
• novalidate
• خاصیت autocomplete

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

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

خاصیت autocomplete با <form> و type های زیر از تگ <input> کار میکند:

text, search, url, tel, email, password, datepickers, range, and color

در مثال زیر، قابلیت پر کردن خودکار برای کل فرم روشن است، اما در زمینه ورودی email خاموش است:

در برخی از مرورگر ها شما باید عملکرد پرکردن خودکار را برای کارکردنش روشن کنید.

خاصیت nonvalidate

خاصیت nonvalidate یکی از خاصیت های تگ form است.

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

مثال زیر اشاره میکند فرم نیاز به معتبر سازی یا همان Validate ندارد:

خاصیت autofocus

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

با این مثال بگذارید زمینه ورودی “first name” به صورت خودکار در هنگام بارگیری صفحه در کانون توجه قرار گیرد:

خاصیت form

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

نکته :برای رجوع دادن به تعداد بیشتر از یک فرم از یک لیست id فرم که با فاصله از هم جدا شدند استفاده کنید.

مثال از یک زمینه ورودی قرار گرفته در خارج از فرم که هنوز یک بخش از فرم است:

خاصیت formaction

خاصیت formaction در اصل url یک فایل که کنترل ورودی را وقتی که فرم ثبت شد پردازش می کند را مشخص می کند. خاصیت formaction خاصیت action از المان <form> را باطل می کند. خاصیت formaction با type های submit و image استفاده می شود.

مثال از یک فرم اچ تی ام ال با دو دکمه ثبت با action های متفاوت:

خاصیت formenctype

خاصیت formenctype این را مشخص می کند که داده وقتی که ثبت شد چگونه باید رمزگذاری شود ( فقط برای فرم های با method=”post” ) .

خاصیت formenctype خاصیت enctype از المان <form> را باطل می کند. خاصیت formenctype با type های submit و image استفاده می شود.

مثال از ارسال داده form که به صورت معمول کدگذاری شده (اولین دکمه ثبت) و با کد گذاری به روش “multipart/form-data” (دومین دکمه ثبت):

خاصیت formmethod

خاصیت formmethod متود اچ تی تی پی را برای ارسال form-data به action url تعریف می کند .

خاصیت formmethod خاصیت method در المان form را باطل می کند. خاصیت formmethod با type های submit و image استفاده می شود.

مثالی که در آن دکمه ثبت دوم متود اچ تی تی پی را برای form باطل می کند:

خاصیت formnovalidate

خاصیت formnovalidate خاصیت novalidate را برای المان <form> باطل می کند. خاصیت formnovalidate را می توان برای type=”submit” استفاده کرد.

مثال از یک فرم با دو دکمه ثبت (همراه با معتبر سازی و بدون معتبر سازی):

خاصیت formtarget

خاصیت formtarget یک نام یا کلمه کلیدی را که اشاره می کند به اینکه کجا جوابی که بعد از ثبت فرم دریافت می شود نمایش داده شود را مشخص می کند.

خاصیت formtarget خاصیت target در المان <form> را باطل می کند. خاصیت formtarget با type های submit و image استفاده می شود.

مثال از یک فرم با دو دکمه ثبت با پنجره های target مختلف:

خاصیت های height و width

خاصیت های height و width ارتفاع و عرض یک المان <input type=”image”> را مشخص می کند. همیشه اندازه تصاویر را مشخص کنید. اگر مرورگر اندازه تصویر را نداند در هنگام بارگیری عکس صفحه دچار لرزش می شود.

مثال از یک عکس به عنوان دکمه ثبت با خاصیت های ارتفاع و عرض:

خاصیت list

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

مثال از یک المان <input> با مقادیر از پیش تعیین شده در یک <datalist>:

چاپ مثال بالا:

خاصیت های min و max

خاصیت های min و max حداقل و حداکثز مقادیر برای یک المان <input> را مشخص می کند. خاصیت های min و max با type های ورودی زیر کار میکنند :

number, range, date, datetime-local, month, time and week

مثال از المان های <input> با مقادیر حداقل و حداکثر:

این زمینه ورودی را امنتحان کنید، از نوع عدد است و کمتر از 1 و بیشتر از 5 قبول نمی کند:

خاصیت multiple

خاصیت multiple مشخص می کند که کاربر می تواند بیشتر از یک مقدار را در المان <input>  وارد کند. خاصیت multiple با المان های زیر کار می کند :

email, and file

مثال یک زمینه بارگزاری فایل که چندین فایل را قبول می کند:

خاصیت pattern

این خاصیت یک کد RegEx را مشخص می کند تا مقدار المان <input> در مقابلش چک شود. خاصیت pattern با type های ورودی زیر کار میکند:

text, search, url, tel, email, and password

نکته : از خاصیت title برای توضیح بیشتر راجع به این خاصیت و کمک به کاربر استفاده کنید.

مثال از یک زمینه ورودی که تنها می تواند حاوی سه حرف باشد (نه عدد و نه کاراکتر های مخصوص):

چاپ مثال بالا:

خاصیت placeholder

خاصیت placeholder یک اشاره به مقدار مورد توقع در زمینه ورودی را توضیح می دهد (یک مقدار نمونه یا یک توضیح مختصر از ورودی) . این اشاره در زمینه ورودی قبل از این که کاربر مقداری را وارد کند نمایش داده می شود. خاصیت placeholder با type های ورودی زیر کار می کند :

text, search, url, tel, email, password

مثال از یک زمینه ورودی با متن placeholder:

چاپ مثال بالا:

خاصیت required

خاصیت required مشخص می کند که یک زمینه ورودی باید حتما پر شود تا فرم بتواند ثبت شود. خاصیت required با type های ورودی زیر کار می کند :

text, search, url, tel, email, password, date pickers, number, checkbox, radio, file

مثال از یک زمینه ورودی لازم:

خاصیت step

خاصیت step توالی مجاز اعداد را برای وارد کردن در المان <input> مشخص می کند.

مثال : اگر step=”3” را تعریف کنیم اعداد مجاز از این دسته هستند :

-3, 0, 3, 6 و ….

نکته : خاصیت step را می توان با خاصیت های min و max ترکیب کرد تا بتوان یک محدوده از اعداد مجاز را برای انتخاب کردن تعریف کرد. خاصیت step با type های زیر کار می کند:

number, range, date, datetime-local, month, time week

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

چاپ مثال بالا: