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

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

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

 

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

 

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

مثال :

First name:
Last name:

Click the “Submit” button and the form-data will be sent to a page on the server called “demo_form.asp”.

First name:

Last name:

Click the “Submit” button and the form-data will be sent to a page on the server called “demo_form.asp”.

1 2 3 4 5 6 7 8 9 10 11

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

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

تفاوت میـان HTML و HTML5 4.01

ویژگی align در HTML5 حمایت نخواهد شد.

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

تفاوت میـان HTML و XHTML

در HTML، تگ input  برچسب پایانی ندارد ولی در XHTML، تگ های input  باید قطعا بسته شود،

ویژگی ها:

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

۳ نوع خصوصیت وجود دارد که شما خواهید توانست به تگ های 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”

ویژگی های عمومی تگ های HTML

برچسب 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	ontimeبروزرسانی
ondrop	onmouseout	onvolumechange
ondurationchange	onmouseover	onwaiting
onemptied	onmouseup

حمایت از مرورگر ها

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

خب دوستان به انتهای مقاله آموزشی آشنایی با عنصر input و کاربرد آن در HTML رسیدیم . در پست های بعدی نیز سعی وی شود سایر عناصر HTML را بصورت کامل برای شما توضیح داده شود. در صورتی که نیاز به اطلاعاتی در مورد سرور مجازی کانادا و سرور اختصاصی دارید کلیک کنید.