آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

آموزش HTML 5  >  کنترل های جدید در HTML 5  >  کنترل range

کنترل number :

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

در صورت وارد کردن مقادیر غیر عددی و همچنین مقادیر بیشتر و یا کمتر از محدوده تعیین شده ، برنامه این مقادیر را نادیده گرفته و ارسال نمی کند .
شکل کلی استفاده از این کنترل به صورت زیر است :

syntax <input type="range" name="name"   min="value"   max="value"   step="value"   value="value" >

syntax توضیح موارد
توضیح خاصبت
این پارامتر تعیین کننده حداکثر مقدار عددی است که کاربر می تواند در کنترل وارد نماید . max
این پارامتر تعیین کننده حداقل مقدار عددی است که کاربر می تواند در کنترل وارد نماید . min
گام افزایش یا کاهش مقدار عددی کنترل را تعیین می کند . step
این خاصیت مقدار پیش فرض کنترل را تعیین می کند . value

پشتیانی در مرورگر های مختلف :

این کنترل فقط در مرورگرهای کروم و اپرا پشتیانی می شود .

مثال عملی :

مثال : در مثال زیر یک کنترل <input> از نوع "type="range،  را بر روی صفحه قرار داده ایم . به وسیله این کنترل باید عددی بین 1 و 10 را انتخاب نمایید . مقادیر بزرگتر و یا کوچکتر را کنترل error داده و قبول نمی کند ..سپس با کلیک بر روی دکمه فرمان show number ، می توانید عدد انتخاب شده را بر روی صفحه نمایش دهید ( مقدار پیش فرض کنترل  5 است ) :

Example
<input type="range"   id="inputRange" min="1"   max="1"   value="5">    : عدد مورد نظر خود را انتخاب نمایید 
 <br />
<input type="button" id="btn1" value="show number" onclick="showNumber()" />
 <br />
<div id="MyDiv"> </div>

<script type="text/javascript">
    function showNumber() {
         document.getElementById("MyDiv").innerHTML = "Number is : " +  document.getElementById("inputRange").value;
      }
</script>
کد
    : عدد مورد نظر خود را انتخاب نمایید

خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید  :

آیا مطالب این صفحه برای شما مناسب و مفید بود ه است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : جمع سه + پنج چنده ؟