عنصر input و کاربرد آن در HTML

عنصر input و کاربرد آن در HTML

تگ input یک فیلد ورودی ایجاد کرده که کاربر می تواند در آن اطلاعات وارد کند. این تگ برای ایجاد کنترل های تعاملی برای فرم های مبتنی بر وب به منظور پذیرفتن داده های کاربر استفاده میشود. فیلد ورودی می تواند با توجه به خاصیت type از بسیاری جهات متفاوت باشد.

توجه : input  یک عنصر خالی است و فقط حاوی خاصیت میباشد.

مثال :

 

عنصر input و کاربرد آن در HTML

عنصر input و کاربرد آن در HTML

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

عنصر input و کاربرد آن در HTML

تفاوت بین HTML و HTML5 4.01

خاصیت align در HTML5 پشتیبانی نمی شود.

در HTML5، تگ input دارای چندین خاصیت جدید بوده و به خاصیت type چند مقدار جدید اضافه شده است.

تفاوت بین HTML و XHTML

در HTML، تگ input  برچسب پایانی ندارد اما در XHTML، تگ های input  باید حتما بسته شود، </ input>

خاصیت ها:

تگ HTML می تواند شامل یک یا چند خاصیت باشد که چگونگی ارائه در مرورگر را تعیین میکنند. خاصیت ها دارای یک نام و یک مقدار هستند که با علامت (=) از هم جدا شده اند. مقدار خاصیت با علامت نقل قول احاطه میشود .

۳ نوع خاصیت وجود دارد که شما می توانید به تگ های HTML خود اضافه کنید:

خاصیت ویژه عنصر

خاصیت عمومی

خاصیت رویداد

خاصیت ویژه عنصر

خاصیتمقدارشرح
acceptfile_extension
audio/*
video/*
image/*
media_type
نوع فایل هایی که سرور می پذیرد را تعیین می کند . فقط برای :”type=”file
alignleft
right
top
middle
bottom
در HTML5 پشتیبانی نمی شود.چیدمان یک ورودی تصویر را مشخص میکند . فقط برای :type=”image”
alttextمتن جایگزین برای تصاویر مشخص میکند . فقط برای :type=”image”
autocompleteجدیدon
off
مشخص میکند که تکمیل خودکار عنصر input  باید فعال باشد یا خیر.
autofocusجدیدautofocusفوکوس خودکار یک عنصر input  را در هنگام لود شدن صفحه مشخص می کند
checkedcheckedمشخص می کند که عنصر input در هنگام لود شدن صفحه باید از قبل انتخاب شده باشد . فقط برای :”type=”checkbox”type=”radio
disableddisabledمشخص می کند که عنصر input  باید غیر فعال باشد
formجدیدform_idیک یا چند فرم متعلق به عنصر input مشخص میکند.
formactionجدیدURLURL فایلی که کنترل ورودی را در هنگام ارسال فرم پردازش میکند مشخص میکند. فقط برای “type=”submit”type=”image
formenctypeجدیدapplication/x-www-form-urlencoded
multipart/form-data
text/plain
نحوه کد گذاری form-data در هنگام ارسال به سرور را  مشخص می کند . فقط برای :”type=”submit 

“type=”image

formmethodجدیدget
post
متد HTTP برای ارسال داده ها به action URL  را تعریف میکند . فقط برای:”type=”submit”type=”image
formnovalidateجدیدformnovalidateتعریف میکند که عناصر فرم در هنگام ارسال نباید تائید اعتبار شوند
formtargetجدید_blank
_self
_parent
_top
framename
جایی که نتیجه حاصل از ارسال فرم نمایش داده میشود، مشخص میکند. فقط برای :”type=”submit”type=”image
heightجدیدpixelsارتفاع عنصر input را تعیین میکند. فقط برای :type=”image”
listجدیدdatalist_idبه یک عنصر  datalist که شامل گزینه های از پیش تعریف شده برای یک عنصر input می باشد، اشاره دارد.
maxجدیدnumber
date
حداکثر مقدار را برای عنصر input تعیین میکند
maxlengthnumberحداکثر تعداد کاراکتر مجاز را در عنصر input مشخص می کند
minجدیدnumber
date
حداقل مقدار را برای عنصر input تعیین میکند
multiple

جدید

multipleمشخص میکند که کاربر می تواند بیش از یک مقدار در عنصر input وارد کند
nametextنام عنصر input را تعیین می کند
patternجدیدregexpبرای مقدار عنصر input یک عبارت منظم مشخص میکند
placeholderجدیدtextیک اشاره کوتاه توصیف کننده مقدار مورد انتظار یک عنصر input  را  مشخص میکند
readonlyreadonlyیک فیلد ورودی read-only مشخص میکند
requiredجدیدrequiredمشخص میکند که یک فیلد ورودی باید پیش از ارسال فرم پر شود
sizenumberعرض را در کاراکترهای عنصر input تعیین میکند.
srcURLURL یک تصویر را به عنوان یک دکمه submit مشخص میکند . فقط برای :type=”image”
stepجدیدnumberتعداد فواصل قانونی یک فیلد ورودی را تعیین می کند
typebutton
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
نوع عنصر input را تعیین میکند
valuetextمقدار یک عنصر input را مشخص میکند.
widthجدیدpixelsعرض عنصر input را تعیین میکند. فقط برای :type=”image”


خاصیت های عمومی

برچسب input از خاصیت های عمومی HTML پشتیبانی میکند

accesskeyhiddenitemtype
classidlang
contenteditableinertspellcheck
contextmenuitemidstyle
diritemproptabindex
draggableitemreftitle
dropzoneitemscopetranslate

خاصیت های رویداد

برچسب input از خاصیت های رویداد در HTML نیز پشتیبانی میکند.

onabortonendedonmousewheel
oncancelonerroronpause
onbluronfocusonplay
oncanplayonformchangeonplaying
oncanplaythroughonforminputonprogress
onchangeoninputonratechange
onclickoninvalidonreadystatechange
oncontextmenuonkeydownonscroll
ondblclickonkeypressonseeked
ondragonkeyuponseeking
ondragendonloadonselect
ondragenteronloadeddataonshow
ondragexitonloadedmetadataonstalled
ondragleaveonloadstartonsubmit
ondragoveronmousedownonsuspend
ondragstartonmousemoveontimeupdate
ondroponmouseoutonvolumechange
ondurationchangeonmouseoveronwaiting
onemptiedonmouseup

پشتیبانی از مرورگر ها

برچسب input در همه مرورگرهای اصلی نظیر اینترنت اکسپلورر، فایرفاکس ، اپرا ، گوگل کروم و سافاری پشتیبانی می شود.

پاسخ به کلیه سوالات شما در زمینه وب هاستینگ و مدیریت سرور در انجمن کامپایلر

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *