<زر> مقابل.<نوع الإدخال = "زر" />.أي استخدام؟

Question

عند النظر إلى معظم المواقع (بما في ذلك SO)، فإن معظمها يستخدم:

<input type="button" />

بدلاً من:

<button></button>

• وما هي الاختلافات الرئيسية بين الاثنين، إن وجدت؟
• هل هناك أسباب وجيهة لاستخدام أحدهما بدلاً من الآخر؟
• هل هناك أسباب وجيهة لاستخدام الجمع بينهما؟
• هل يستخدم <button> تأتي مع مشاكل التوافق، ورؤيتها لا تستخدم على نطاق واسع جدا؟

Answer 1

• ها هي صفحة وصف الاختلافات (في الأساس يمكنك وضع HTML في <button></button>)
• وصفحة أخرى وصف لماذا يتجنب الناس <button></button> (تلميح: IE6)

مشكلة أخرى IE عند الاستخدام <button />:

وبينما نتحدث عن IE ، فإنه يحتوي على زوجين من الأخطاء المتعلقة بعرض الأزرار. ستضيف بشكل غامض حشوة إضافية عندما تحاول إضافة أنماط ، مما يعني أنه يجب عليك إضافة اختراق صغير لتحكم الأمور.

Answer 2

مثل ملاحظة جانبية ، <button> سيقوم ضمنيًا بإرساله ، والذي يمكن أن يسبب مشاكل إذا كنت ترغب في استخدام زر في نموذج دون إرساله. وبالتالي ، سبب آخر للاستخدام <input type="button"> (أو <button type="button">)

يحرر - المزيد من التفاصيل

بدون نوع ، button يتلقى ضمنيًا نوعًا من submit. لا يهم عدد الأزرار أو المدخلات الموجودة في النموذج ، أي واحد منهم يتم كتابته بشكل صريح أو ضمني كما هو الحال ، عند النقر ، سيقوم بإرسال النموذج.

هناك 3 أنواع مدعومة لزر واحد

submit ||  "submits the form when clicked (default)"
reset  ||  "resets the fields in the form when clicked"
button ||  "clickable, but without any event handler until one is assigned"

Answer 3

هذه المقالة يبدو أنه يقدم نظرة عامة جيدة على الفرق.

من الصفحة:

الأزرار التي تم إنشاؤها باستخدام وظيفة عنصر الزر تمامًا مثل الأزرار التي تم إنشاؤها باستخدام عنصر الإدخال ، لكنها توفر إمكانيات تقديم أكثر ثراءً: قد يكون لعنصر الزر محتوى. على سبيل المثال ، عنصر زر يحتوي على وظائف صورة مثل وقد يشبه عنصر الإدخال الذي يتم تعيين نوعه على "الصورة" ، ولكن نوع عنصر الزر يسمح للمحتوى.

عنصر الزر - W3C

Answer 4

داخل <button> العنصر يمكنك وضع المحتوى ، مثل النص أو الصور.

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

هذا هو الفرق بين هذا العنصر والأزرار التي تم إنشاؤها مع <input> عنصر.

Answer 5

يقتبس

هام: إذا كنت تستخدم عنصر الزر في نموذج HTML ، فستقوم متصفحات مختلفة بتقديم قيم مختلفة. سيقوم Internet Explorer بإرسال النص بين <button> و </button> العلامات ، في حين أن المتصفحات الأخرى ستقدم محتوى سمة القيمة. استخدم عنصر الإدخال لإنشاء أزرار في نموذج HTML.

من : http://www.w3schools.com/tags/tag_button.asp

إذا فهمت بشكل صحيح ، فإن الإجابة هي التوافق واتساق الإدخال من المتصفح إلى المتصفح

Answer 6

نقلا عن صفحة النماذج في دليل HTML:

الأزرار التي تم إنشاؤها باستخدام وظيفة عنصر الزر تمامًا مثل الأزرار التي تم إنشاؤها باستخدام عنصر الإدخال ، لكنها توفر إمكانيات تقديم أكثر ثراءً: قد يكون لعنصر الزر محتوى. على سبيل المثال ، عنصر زر يحتوي على وظائف صورة مثل وقد يشبه عنصر الإدخال الذي يتم تعيين نوعه على "الصورة" ، ولكن نوع عنصر الزر يسمح للمحتوى.

Answer 7

استخدم الزر من عنصر الإدخال إذا كنت ترغب في إنشاء زر في نموذج. واستخدم علامة الزر إذا كنت ترغب في إنشاء زر لإجراء ما.

Answer 8

سوف أقتبس المقال الفرق بين المراسي والمدخلات والأزرار:

المراسي (ال <a> العنصر) تمثل الارتباطات التشعبية ، والموارد التي يمكن للشخص التنقل إليها أو تنزيلها في متصفح. إذا كنت ترغب في السماح للمستخدم بالانتقال إلى صفحة جديدة أو تنزيل ملف ، فاستخدم مرساة.

و الإدخال (<input>) يمثل حقل بيانات: لذلك بعض بيانات المستخدم التي تعني إرسالها إلى الخادم. هناك العديد من أنواع المدخلات المتعلقة بالأزرار: <input type="submit">, <input type="image">, <input type="file">, <input type="reset">, <input type="button">.
كل واحد منهم له معنى ، على سبيل المثال "ملف"يستخدم لتحميل ملف ،"إعادة تعيين"مسح النموذج ، و"إرسال"يرسل البيانات إلى الخادم. تحقق من مرجع W3 على MDN أو على W3Schools.

ال زر (<button>) العنصر متعدد الاستخدامات تمامًا:

• يمكنك عش العناصر داخل زر ، مثل الصور أو الفقرات أو الرؤوس ؛
• يمكن أن تحتوي الأزرار أيضًا ::before و ::after عناصر زائفة ؛
• الأزرار تدعم disabled ينسب. هذا يجعل من السهل تشغيلها وإيقافها.

مرة أخرى ، تحقق من مرجع W3 ل <button> بطاقة شعار على MDN أو على W3Schools.

Answer 9

هناك فرق كبير إذا كنت تستخدم jQuery. يدرك jQuery المزيد من الأحداث على المدخلات أكثر من الأزرار. على الأزرار ، jQuery على دراية فقط بأحداث "النقر". على المدخلات ، يدرك JQuery أحداث "Click" و "Focus" و "Blur".

يمكنك دائمًا ربط الأحداث بأزرارك حسب الحاجة ، ولكن فقط كن على دراية بأن الأحداث التي تدركها JQuery تلقائيًا تختلف. على سبيل المثال ، إذا قمت بإنشاء وظيفة تم تنفيذها كلما كان هناك حدث "Focusin" على صفحتك ، فإن الإدخال سيؤدي إلى تشغيل الوظيفة ولكن الزر لن يفعل ذلك.

Answer 10

<button>

• بشكل افتراضي يتصرف مثل إذا كان لديه سمة "type =" إرسال "
• يمكن استخدامها بدون نموذج وكذلك في الأشكال.
• النص أو محتوى HTML المسموح به
• CSS العناصر الزائفة المسموح بها (مثل: من قبل)
• اسم العلامة عادة ما يكون فريدًا لنموذج واحد

ضد.

<input type='button'>

• يجب تعيين النوع على "إرسال" للتصرف كعنصر إرسال
• لا يمكن استخدامها إلا في الأشكال.
• محتوى نص فقط مسموح به
• لا العناصر الزائفة CSS
• نفس اسم العلامة مثل معظم عناصر النماذج (المدخلات)

--
في المتصفحات الحديثة ، يمكن تصوير كلا العنصرين بسهولة مع CSS ولكن في معظم الحالات ، button يفضل العنصر حيث يمكنك التصميم أكثر مع العناصر الداخلية HTML و Pseudo

Answer 11

بقدر ما يتعلق الأمر بتصميم CSS <button type="submit" class="Btn">Example</button> أفضل لأنه يمنحك القدرة على استخدام CSS :before و :after دروس زائفة والتي يمكن أن تساعد.

بسبب <input type="button"> جعل بصريًا مختلفًا عن <a> أو <span> عندما تم تصميمها مع فصول في بعض المواقف ، أتجنبها.

تجدر الإشارة إلى الجواب الأعلى الحالي تم كتابته في عام 2009. IE6 ليس مصدر قلق الآن <button type="submit">Wins</button> تناسق التصميم في عيني يخرج في الأعلى.

Answer 12

<button> مرن من حيث أنه يمكن أن يحتوي على HTML. علاوة على ذلك ، من الأسهل بكثير الأناقة باستخدام CSS ، ويتم تطبيق التصميم فعليًا عبر جميع المتصفحات. ومع ذلك ، هناك بعض العيوب بخصوص Internet Explorer (EWW! IE!). لا يكتشف Internet Explorer سمة القيمة بشكل صحيح ، باستخدام محتوى العلامة كقيمة. يتم إرسال جميع القيم في النموذج إلى جانب الخادم ، بغض النظر عما إذا كان يتم النقر على الزر أم لا. هذا يجعل استخدامه ك <button type="submit"> صعب وألم.

<input type="submit"> من ناحية أخرى ، لا يوجد لدى أي مشاكل أو مشاكل في الكشف ، لكن لا يمكنك إضافة HTML كما تستطيع <button>. من الصعب أيضًا الأناقة ، ولا يستجيب التصميم جيدًا دائمًا عبر جميع المتصفحات. أتمنى أن يكون هذا ساعد.

Answer 13

أريد فقط إضافة شيء ما إلى بقية الإجابات هنا. تعتبر عناصر الإدخال عناصر فارغة أو باطلة (العناصر الفارغة الأخرى هي المساحة ، القاعدة ، BR ، COL ، HR ، IMG ، IMG ، الإدخال ، الرابط ، التعريف ، والبرام. يمكنك أيضًا التحقق هنا) ، وهذا يعني أنه لا يمكن أن يكون لديهم أي محتوى. بالإضافة إلى عدم وجود أي محتوى ، عناصر فارغة لا يمكن أن يكون لديك أي عناصر زائفة مثل :: بعد و :: قبل, التي أعتبرها عيبًا كبيرًا.

Answer 14

بالإضافة إلى ذلك، يمكن أن يأتي أحد الاختلافات من مزود المكتبة وما يتم ترميزه.على سبيل المثال، أنا هنا أستخدم منصة كوردوفا مع واجهة المستخدم الزاويّة المتنقلة، وبينما تعمل علامات الإدخال/div/etc بشكل جيد مع النقر على ng، يمكن أن يتسبب الزر في تعطل مصحح أخطاء Visual Studio، بالتأكيد بسبب الاختلافات التي سببها المبرمج؛لاحظ أن إجابة MattC تشير إلى نفس المشكلة، وأن jQuery مجرد lib، ولم يفكر الموفر في بعض الوظائف على عنصر واحد، والتي يقدمها/يوفرها في عنصر آخر.لذلك عندما تستخدم مكتبة، قد تواجه مشكلة مع عنصر واحد، والتي لن تواجهها مع عنصر آخر.وببساطة واحدة شعبية مثل input, ، سيكون في الغالب هو الثابت، فقط لأنه أكثر شيوعًا.