‎‎دكمه قابل كليكHTML <button> Tag -‎

Previous >    <Next  

‎‎مثال ـ يك دكمه قابل كليك بصورت زير مشخص ميشود

‎ 
<button type="button">Click Me!

--(go to editor for change code and run)

‎‎تعريف وكاربردDefinition and Usage -‎

‎‎تگ‎<button>‎ يك دكمه قابل كليك را تعريف ميكند .

‎در داخل عنصر‎<button>‎ ميتوانيد متن، وتگ هاي ‎<i>,<b>,<strong>,<br>,<img>‎‎وغيره را قرار دهيد ، در صورتيكه براي ‎عنصر‎<input>‎ امكان پذير نيست .

‎

‎نكته ـ هميشه براي عنصر‎<input>‎ ويژگي ‎type‎ را تنظيم كنيد ‎تا مرورگر تشخيص دهد آن چه نوع دكمه ايست.

‎‎نكته ـ ميتوانيد راحت باCSS عنصر button را استايل نمائيد .

‎‎پشتيباني مرورگرBrowser Support -‎

‎
‎Element‎ Chorome Edge Firefox Safari Opera
‎‎<button>‎‎ ‎Yes‎ ‎Yes‎ ‎Yes‎ ‎Yes‎ ‎Yes‎

‎‎ويژگي هاAttributes -‎

‎
‎‎ويژگي ‎‎مقدار ‎‎شـــرح
‎autofocs‎ ‎autofocus‎‎ ‎‎مشخص ميكند كه هنگام بارگذاري صفحه دكمه بطور خودكارفوكوس شود.
‎disabled‎ ‎disabled‎‎ ‎‎مشخص ميكند كه بايد دكمه غيرفعال باشد.
‎form‎ ‎form_id‎‎ ‎‎مشخص ميكند كه دكمه با كدام فرم درارتباط است.
‎formaction‎ ‎URL‎‎ ‎‎مشخص ميكند هنگامsubmit فرم، داده ها بكجا ارسال شود.

‎‎فقط برايtype=‎"submit‎"‎

‎formencype‎ ‎application/x-‎www.form-‎urlencode‎‎

‎multipart/form-‎data‎‎

‎text/plain‎‎

‎‎مشخص ميكند كه چگونه بايد داده ها فرم قبل از ارسال به سرور رمزگذاري شود.

‎‎فقط برايtype=‎"submit‎"‎

‎formmethod‎ ‎get‎‎

‎post‎‎

‎‎مشخص ميكند كه چه گونه بايد داده هاي فرم ارسال شود.

‎‎فقط برايtype=‎"submit‎"‎

‎formvalidate‎ ‎formvalidate‎‎ ‎‎مشخص ميكند كه داده هاي فرم هنگام ارسال اعتبار سنجي نشود.

‎‎فقط برايtype=‎"submit‎"‎

‎formtarget‎ ‎_blank‎‎

‎_self‎‎

‎_parent‎‎

‎_top‎‎

‎framename‎‎

‎‎مشخص ميكند كه كجا بايدواكنش بعد ازsubmit كردن نمايش داده شود .

‎‎فقط برايtype=‎"submit‎"‎

‎name‎ ‎name‎‎ ‎‎نامي براي دكمه مشخص ميكند.
‎type‎ ‎button‎‎

‎reset‎‎

‎submit‎‎

‎‎نوع عمل دكمه را مشخص ميكند
‎value‎ ‎text‎‎ ‎‎مقدار اوليه براي دكمه مشخص ميكند

‎‎ويژگي هاي جهانيGlobal Attributess -‎

‎‎تگ‎<button>‎ از ويژگي هاي جهاني HTML پيروي ميكند .

‎‎ويژگي هاي رويداديEvent attribute -‎

‎‎همچنين تگ فوق از ويژگي هاي رويدادي پيروي ميكند.

‎‎مثال هاي بيشتر

‎‎مثال ـ استفاده ازCSS براي استايل كردن دكمه

‎ 
 <!DOCTYPE html>
<html>
<head>
<style>.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
</style></head>
<body>

<button class="button button1">Green
<button class="button button2">Blue

</body>
</html>

--(go to editor for change code and run)

‎‎مثال ـ براي استايل دادن به دكمه باCSS براي اثرشناور

‎ 
<!DOCTYPE html>
<html>
<head>
<style>.button {
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

.button2 {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}

</style></head>
<body>

<button class="button button1">Green
<button class="button button2">Blue

</body>
</html>

--(go to editor for change code and run)

‎

‎در اين مثال سه استايل يا كلاسbutton,button1,button2 تعريف شده است .اولين دكمه در بدنه از ‎دو كلاسbuttonو button1 با تنظيم ‎calss‎=‎"button button1‎"‎استفاده كرده است. ‎همچنين در دكمه دوم بدنه از دو كلاسbutton و button2 استفاده شده است .

‎‎تنظيمات پيش فرضDefault CSS Settings -‎

‎‎نـــدارد

مرجع كامل تگهاي HTML
مرجع كامل ويژگيهاي HTML

Previous >    <Next