عنصر 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 خود اضافه کنید:

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

خاصیت عمومی

خاصیت رویداد

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

خاصیت مقدار شرح
accept file_extension
audio/*
video/*
image/*
media_type
نوع فایل هایی که سرور می پذیرد را تعیین می کند . فقط برای :”type=”file
align left
right
top
middle
bottom
در HTML5 پشتیبانی نمی شود.چیدمان یک ورودی تصویر را مشخص میکند . فقط برای :type=”image”
alt text متن جایگزین برای تصاویر مشخص میکند . فقط برای :type=”image”
autocompleteجدید on
off
مشخص میکند که تکمیل خودکار عنصر input  باید فعال باشد یا خیر.
autofocusجدید autofocus فوکوس خودکار یک عنصر input  را در هنگام لود شدن صفحه مشخص می کند
checked checked مشخص می کند که عنصر input در هنگام لود شدن صفحه باید از قبل انتخاب شده باشد . فقط برای :”type=”checkbox”type=”radio
disabled disabled مشخص می کند که عنصر input  باید غیر فعال باشد
formجدید form_id یک یا چند فرم متعلق به عنصر input مشخص میکند.
formactionجدید URL URL فایلی که کنترل ورودی را در هنگام ارسال فرم پردازش میکند مشخص میکند. فقط برای “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 تعیین میکند
maxlength number حداکثر تعداد کاراکتر مجاز را در عنصر input مشخص می کند
minجدید number
date
حداقل مقدار را برای عنصر input تعیین میکند
multiple

جدید

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


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

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

accesskey hidden itemtype
class id lang
contenteditable inert spellcheck
contextmenu itemid style
dir itemprop tabindex
draggable itemref title
dropzone itemscope translate

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

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

onabort onended onmousewheel
oncancel onerror onpause
onblur onfocus onplay
oncanplay onformchange onplaying
oncanplaythrough onforminput onprogress
onchange oninput onratechange
onclick oninvalid onreadystatechange
oncontextmenu onkeydown onscroll
ondblclick onkeypress onseeked
ondrag onkeyup onseeking
ondragend onload onselect
ondragenter onloadeddata onshow
ondragexit onloadedmetadata onstalled
ondragleave onloadstart onsubmit
ondragover onmousedown onsuspend
ondragstart onmousemove ontimeupdate
ondrop onmouseout onvolumechange
ondurationchange onmouseover onwaiting
onemptied onmouseup

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

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

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

پاسخ دهید

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