روش بهینه سازی و سئو جوملا
13/02/2018
آشنایی با میدانی GLBP – Gateway Load Balancing Protocol
14/02/2018آشنایی با عنصر 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
عنصر input و کاربرد آن در HTML
نکته: از عنصر label برای تعریف لیبل هایی برای عناصر input بهره گیری می شود .
تفاوت میـان HTML و HTML5 4.01
عنصر input و کاربرد آن در HTML
ویژگی align در HTML5 حمایت نخواهد شد.
در HTML5، تگ input حاوی چندین خصوصیت جدید بوده و به خصوصیت type چند مقدار تازه اضافه شده می باشد.
تفاوت میـان HTML و XHTML
عنصر input و کاربرد آن در HTML
در 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 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 را بصورت کامل برای شما توضیح داده شود. در صورتی که نیاز به اطلاعاتی در مورد سرور مجازی کانادا و سرور اختصاصی دارید کلیک کنید.
