ورود ثبت نام
ساختن دکمه ها با استفاده از تگ input
» طراحی سایت » آموزش HTML » ساختن دکمه ها با استفاده از تگ input
13802 بازدید

ساختن دکمه ها با استفاده از تگ input

دکمه ارسال فرم ( Submit )

برای ساختن دکمه ارسال فرم باید از تگ <input> استفاده کنیم . برای این کار باید از submit به عنوان مقدار شناسه type استفاده کنیم . در اینجا یک نمونه از کدی که برای ساختن دکمه ارسال فرم لازم است آورده ام :

<input name="ButtonName" type="submit" >

اینم نتیجه کد بالا :

حالا می تونید دکمه ارسال فرم رو مشاهده بفرمایید البته چون این دکمه در داخل تگ <form> نیست با کلیک کردن بر روی آن هیچ اتفاقی نمی افتد اما اگر این دکمه در داخل تگ فرم قرار داشته باشد ، با کلیک بر روی آن اطلاعات وارد شده در فرم به صفحه action ارسال می شوند . از این دکمه می تونید برای  دکمه ارسال نظرات و … استفاده کنید .

دکمه پاک کردن فرم (Reset)

برای ساختن این دکمه هم از تگ <input> استفاده می شود به این صورت که برای شناسه type از مقدار reset استفاده می کنیم . در اینجا می تونید یک نمونه از کدی که برای ساختن این دکمه استفاده می شود را ببینید :

<input name="ButtonName" type="reset" >

اینم نتیجه این کد :

دکمه ایی که با استفاده از تگ بالا ساخته شده را ملاحضه می کنید . این دکمه هم مانند دکمه ارسال فرم  باید در تگ فرم قرار گرفته باشد تا با کلیک بر روی اون اطلاعاتی که کاربر وارد کرده است حذف شوند و فرم به حالت اولیه بازگردد .

ساختن دکمه (Button)

به جز دکمه های بالا دکمه هایی هم وجود دارد که بیش تر برای استفاده در جاوا اسکریپت به کار می روند . این دکمه ها به صورت پیش فرض وظیفه خاصی رو انجام نمی دهند و وظیفه آن ها بستگی به موقعیت مورد استفاده آن ها از نظر برنامه نویسی دارد . از کد زیر برای ساختن این دکمه ها استفاده می شود :

<input name="button" type="button" value="دکمه">

در اینجا به معرفی برخی از شناسه هایی که برای دکمه ها در تگ  <input> استفاده می شوند می پردازیم :

type

همان طور که گفتم برای دکمه ارسال فرم باید از submit برای مقدار این شناسه و برای دکمه پاک کردن فرم باید از reset برای مقدار این شناسه استفاده کرد . برای سایر دکمه ها باید از button  برای مقدار این شناسه استفاده کرد .

value

این شناسه در مورد دکمه ها مشخص کننده متنی است که روی دکمه نشان داده می شود . مثلاً حتماً دیده اید که بر روی دکمه ارسال دیدگاه ها نوشته ارسال یا ثبت نظر پس از این شناسه برای این کار استفاده کرده اند .

“disabled=”disabled

از این شناسه برای غیر فعال دکمه استفاده می شود . به صورتی که کاربر نمی تواند دکمه مربوطه را کلیک نمایید .

به کدهای زیر نگاه کنید ، سعی کردم آن چیزهایی رو که گفتم رو با یه مثال کلی بیان کنم ، اگه این کدهارو اجرا کنید یه فرمی رو خواهید دید که همه اون چیزهایی رو که گفتم داخلش هست :

<form action="#" method="get" name="formName" target="_blank">

	     از خدمات این سایت رضایت دارید ؟
	     <input type="checkbox"  value="yas"> بله
     	<input type="checkbox"  value="no"> خیر
      	<br>
     	<input type="textbox" maxlength="50" size="25" value="نام">
      	<br>
	     <input type="textbox" maxlength="50" size="25" value=" خانوادگی نام">
      	<br>
     	<input type="textbox" maxlength="50" size="25" value=" ایمیل">
      	<br>
     	<input type="textbox" maxlength="50" size="25" value=" وب سایت ">
	      <br>
     	<input name="ButtonName" type="submit" >
     	 <br>
     	<input name="ButtonName" type="reset" >
     	<input name="ButtonName" type="button" value="دکمه" >

</form>

رضا طوماری

دیدگاه



جواب سوال چیه ؟ *

  1. Timecode گفت:

    بهترین وبسایتی که تاحالا دیدم.ازتون متشکرم

  2. قیمت کاغذ دیواری گفت:

    سلام میشه لینک داخل مطلبو چک کنید.برای من مشکل داشت.ممنون

  3. ناشناس گفت:

    سلام میشه لینک داخل مطلبو چک کنید.برای من مشکل داشت.ممنون