HTML button Tag

HTML button Tag – ينشئ الوسم <button> زرًا قابلاً للنقر.

HTML button Tag

هل تعلم أنه يمكنك استخدام عنصر input ايضًا للقيام بنفس عمل عنصر button لإنشاء الأزرار القابلة للنقر!

لكن ما يميز عنصر الــ button بأنك تستطيع وضع محتوى (صور – نصوص) أو وسوم (<strong> – <b> – <img>) بداخلة، على عكس عنصر الـ input لا تسطيع وضع اى وسوم او محتوى بداخلة.

مثال

 <button type="button">Click</button>

حدد دائمًا سمة type لعنصر <button> ، لإخبار المتصفحات بنوع الزر.

مثال أخر

<form action="#" method="post">
     <label for="mail">Your Email: </label>
     <input type="email" name="mail" id="mail">
     <button type="submit" value="submit">Submit</button>
     <button type="reset" value="reset">Reset</button>
</form>

يمكنك بسهولة تصميم الأزرار باستخدام CSS، او بإستخدام اطار الـ Bootstrap.

السمات المحددة – Specific Attributes

يدعم الوسم <button> هذه السمات:

السمة	القيمة	الوصف
autofocus	autofocus	تحدد أن الزر يجب أن يركز تلقائيًا عند تحميل الصفحة او المستند.
disabled	disabled	تحدد وجوب تعطيل الزر.
form	form-id	تحدد الشكل الذي ينتمي إليه الزر.
formaction	URL	تحدد مكان إرسال بيانات النموذج عند إرسال النموذج. 💡 فقط مع “type = “submit
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	تحدد كيفية تشفير بيانات النموذج قبل إرسالها إلى الخادم. 💡 فقط مع “type = “submit
formmethod	get post	تحدد طريقة HTTP التي سيستخدمها المستعرض لإرسال النموذج. 💡 فقط مع “type = “submit
formtarget	blank_ self_ parent_ top_ framename	يحدد مكان عرض الاستجابة بعد إرسال النموذج. 💡 فقط مع “type = “submit
name	name	يحدد اسم للزر.
type	button reset submit	يحدد نوع الزر.
value	text	يحدد قيمة أولية للزر.