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

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

لذلك وضعتها للنظر فيها.

جوهر المشكلة

بعد تنفيذه بنفسي، ما زلت أجد العديد من الحلول التي تعتمد على استخدام الأزرار العادية التي تم ربط JS بها.

لقد قمت بتنفيذ خطتي بنفس الطريقة تقريبًا، ولكنني استخدمت نوع الإرسال القياسي. يبدو أن كل شيء يعمل وفي رأيي أن الحل الذي أقترحه هو الأصح من الناحية المنطقية.

سيعمل هذا الحل بشكل جيد على حد سواء استضافة مجانيةوحتى لو اخترت استضافة احترافية. يتم تنفيذ هذه الطريقة بالكامل من جانب العميل ويجب ألا تؤدي إلى إبطاء الخادم.

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

تحتوي السمة على DOMString الذي يتم عرضه كتسمية للزر. وبخلاف ذلك، لا تحتوي الأزرار على قيمة حقيقية.

إذا لم تحدد قيمة، فسيكون للزر تسمية افتراضية، يختارها وكيل المستخدم. ومن المحتمل أن تكون هذه التسمية على غرار "إرسال" أو "إرسال استعلام". وإليك مثال على زر الإرسال ذو التسمية الافتراضية في متصفحك:

سمات إضافية للنوع

سلسلة تحدد طريقة التشفير التي سيتم استخدامها عند إرسال بيانات النموذج إلى الخادم. هناك ثلاث قيم مسموح بها:

Application/x-www-form-urlencoded هذه، القيمة الافتراضية، ترسل بيانات النموذج كسلسلة بعد عنوان URL الذي يقوم بتشفير النص باستخدام خوارزمية مثل . multipart/form-data يستخدم FormData API لإدارة البيانات، مما يسمح بإرسال الملفات إلى الخادم. أنتاستخدم نوع الترميز هذا إذا كان النموذج الخاص بك يتضمن أي عناصر من النوع file(). نص/عادي نص عادي؛ مفيدة في الغالب فقط لتصحيح الأخطاء، لذلكأنت تستطيع

رؤية البيانات التي سيتم تقديمها بسهولة.

إذا تم تحديدها، فستتجاوز قيمة سمة formenctype سمة الإجراء الخاصة بالنموذج المالك.

com.formmethod

سلسلة تشير إلى طريقة HTTP التي سيتم استخدامها عند إرسال بيانات النموذج؛ تتجاوز هذه القيمة أي سمة طريقة مقدمة في النموذج المالك. القيم المسموح بها هي:

يتم إنشاء الحصول على عنوان URL من خلال البدء بعنوان URL الذي توفره سمة الإجراء أو الإجراء، وإلحاق حرف علامة الاستفهام ("؟")، ثم إلحاق بيانات النموذج، المشفرة كما هو موضح بواسطة formenctype أو سمة enctype للنموذج. يتم بعد ذلك إرسال عنوان URL هذا إلى الخادم باستخدام طلب HTTP. تعمل هذه الطريقة بشكل جيد مع النماذج البسيطة التي تحتوي على أحرف ASCII فقط وليس لها أي آثار جانبية. هذه هي القيمة الافتراضية.

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

com.formnovalidate

سمة منطقية، إذا كانت موجودة، تحدد أنه لا ينبغي التحقق من صحة النموذج قبل إرساله إلى الخادم. يؤدي هذا إلى تجاوز قيمة سمة novalidate في النموذج الخاص بالعنصر.

com.formtarget

تحميل ذاتي للاستجابة في نفس سياق التصفح الذي يحتوي على النموذج. سيؤدي هذا إلى استبدال المستند الحالي بالبيانات المستلمة. هذه هي القيمة الافتراضية المستخدمة إذا لم يتم تحديد أي منها.

_blank يقوم بتحميل الاستجابة في سياق تصفح جديد غير مسمى. عادةً ما تكون هذه علامة تبويب جديدة في نفس نافذة المستند الحالي، ولكنها قد تختلف وفقًا لتكوين وكيل المستخدم.

_parent يقوم بتحميل الاستجابة في سياق التصفح الأصلي للسياق الحالي. إذا لم يكن هناك سياق أصلي، فسيتصرف هذا بنفس سلوك _self .

_top يقوم بتحميل الاستجابة في سياق التصفح ذي المستوى الأعلى؛ هذا هو سياق التصفح الذي يعد السلف الأعلى للسياق الحالي. إذا كان السياق الحالي هو السياق الأعلى، فسيتصرف بنفس سلوك _self .

استخدام أزرار الإرسال

يتم استخدام الأزرار لإرسال النماذج. إذا كنت تريد إنشاء زر مخصص ثم تخصيص السلوك باستخدام JavaScript، فستحتاج إلى استخدام عنصر، أو الأفضل من ذلك.

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

زر إرسال بسيط

سنبدأ بإنشاء نموذج باستخدام زر إرسال بسيط:

دعونا نقدم بعض النص وهذا يُظهر هكذا:حاول إدخال بعض النص في حقل النص، ثم قم بإرسال النموذج.

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

نص المستخدم

، حيث "نص المستخدم" هو النص الذي أدخله المستخدم، والذي تم ترميزه للحفاظ على الأحرف الخاصة. يعتمد مكان وكيفية إرسال البيانات على تكوين الملف؛ راجع إرسال بيانات النموذج لمزيد من التفاصيل.

إضافة اختصار لوحة المفاتيح إرسال

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

على سبيل المثال، في Firefox لنظام التشغيل Mac، يؤدي الضغط على Control - Option - S إلى تشغيل الزر إرسال، بينما يستخدم Chrome على نظام التشغيل Windows Alt + S .

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

تعطيل وتمكين زر الإرسال

لتعطيل زر إرسال، ما عليك سوى تحديد السمة العامة المعطلة عليه، كما يلي:

يمكنك تمكين الأزرار وتعطيلها في وقت التشغيل ببساطة عن طريق تعيين "تعطيل" على "صواب" أو "خطأ". في جافا سكريبت يبدو هذا مثل btn.disabled = true أو btn.disabled = false .

تصديق

لا تشارك أزرار الإرسال في التحقق من صحة القيد؛ فليس لها قيمة حقيقية لتقييدها.

أمثلة

لقد قمنا بتضمين أمثلة بسيطة أعلاه. ليس هناك أي شيء آخر يمكن قوله عن أزرار الإرسال. هناك سبب وراء تسمية هذا النوع من التحكم أحيانًا بـ "الزر البسيط".

تحديد تعليقات حالة المواصفات

HTML المعيشة القياسية تعريف "" في تلك المواصفات.	مستوى المعيشة
HTML5 تعريف "" في تلك المواصفات.	توصية

توافق المتصفح

يتم إنشاء جدول التوافق الموجود في هذه الصفحة من البيانات المنظمة. إذا كنت ترغب في المساهمة في البيانات، يرجى مراجعة https://github.com/mdn/browser-compat-data وإرسال طلب سحب إلينا.

تحديث بيانات التوافق على GitHub

سطح المكتب المحمول Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome لنظام Android Firefox لنظام Android Opera لنظام Android Safari على iOS Samsung Internetاكتب = "إرسال"

دعم كروم الكامل 1	حافة الدعم الكامل نعم	فايرفوكس الدعم الكامل 1

هل هناك طريقة لتحديد مجموعة من الخيارات؟

علامة الطفل علامة الطفل

7 54

كيفون

7 إجابات:

وإلى أن يتم دعم ذلك في معيار html، كانت جميع الإجابات تمثل مشكلة، بما في ذلك:

تختلف سمات الفصل التي يمكن للأطفال اختيارها، وكيفية تطبيق النمط على عنصر ما، اعتمادًا على المتصفح وإصداره.

البادئة c ستؤدي إلى أنه إذا قمت بتحديد عنصر أضيق من الخيار المحدد، تأثير بصريلن يكون الأمر لطيفًا، مع إخفاء النص المقروء على اليمين (انظر المثال أدناه).

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

لن يكون مفهوم تسمية مجموعة الاختيارات المحددة بالضرورة هو ما يتوقعه المستخدم.

هذا قادني إلى الاستنتاج طريقة أفضلللتغلب على هذه المشكلة، استخدم إما مكتبة مثل UI-Selectable لجميع التحديدات على موقعك (للاتساق)، أو استخدم الخيار الأول في optgroup لتمثيل اختيار جميع الأطفال مع وصف واضح (على سبيل المثال، "جميع السيارات السويدية" ):

جميع الأطفال علامة الطفل 1 علامة الطفل 2 .my-select ( width: 60px; ) الوالدين والطفل

حل مختلف قليلا ..

OptionGroup ( وزن الخط: غامق؛ ) علامة الأصل الطفل Tag1 الطفل Tag2

الإجابة@grifos غير مدعومة في متصفحات WebKit ولا تعمل عند اختبارها في IE 11.

قد يكون أحد الاقتراحات هو استخدام قائمة غير مرتبة/مرتبة وتصميمها باستخدام CSS ثم إضافة وظائف باستخدام JavaScript/jQuery.

لقد رأيت تنفيذًا جيدًا لهذا في الماضي، ويمكن أن يبدو رائعًا جدًا!

سيعطي هذا المظهر المجرد للقائمة المنسدلة مع القدرة على تحديد مجموعات الاختيار. اجعل الأمر بسيطًا جدًا، ولكن يمكنك تصميمه ليناسب محتوى قلبك.

إخفاء ( العرض: لا شيء؛ ) .show ( العرض: كتلة؛ ) .selected.button ( العرض: كتلة؛ وزن الخط: غامق؛ ) زر (محاذاة النص: اليسار؛ الحد الأدنى للعرض: 200 بكسل؛ الهامش الأيسر: 10 بكسل الحدود: 0 بكسل؛ الخلفية: #eee؛ العرض: كتلة؛) #value_display (العرض: 210 بكسل؛ الحدود: 1 بكسل صلب #ddd؛ نصف قطر الحدود: 4 بكسل؛ الحشو على اليسار: 8 بكسل؛) opt 0 opt 0-1 ؛ opt 0-2 opt 0-3 opt 0-4 opt 1 opt 1-1 opt 1-2 opt 1-3 opt 1-4 var showOptions = false; var showID = document.getElementById("value_display").innerHTML; دالة showOptions() ( if(showingOptions) ( document.getElementById("select_div").className = "hide"; showOptions = false; ) else ( document.getElementById("select_div").className = "show"; showOptions = true ; ) ) وظيفة تحديد(id)( document.getElementById(id).className = "الزر المحدد"; document.getElementById(showingID).className = "show"; showID = id; document.getElementById("value_display").innerHTML = معرف document.getElementById("select_div").className = "hide";

هدف:
مهمتنا اليوم هي استبدال زر "الإرسال" القياسي بآخر جميل. يقوم الزر بإرسال النموذج وهو من النوع "إرسال". يمكنك بالطبع تغيير النوع من "إرسال" إلى "صورة" وإضافة المعلمة "src"، لكن مهمتنا لهذا اليوم هي ترك نوع "إرسال" في مكانه ورسم زر جميل برمجيًا.

طلب:
لماذا قد يكون هذا مطلوبا؟ كل شيء بسيط، لإضفاء مظهر جمالي على نفس الزر.
هنا للمقارنة. يمكنك أن ترى بوضوح أن الزر الثاني يبدو أفضل.

حل:
لتحقيق هذا الهدف، كما ذكرنا، سوف نستخدم "الإدخال" مع النوع "إرسال". سنحتاج أيضًا إلى وصف الفئة الجديدة في ورقة الأنماط "*.css"
وهذا هو الكود الخاص بملف html:

و هنا هو CSS:

الزر الفائق (
العرض: 150 بكسل؛
الارتفاع: 40 بكسل؛
نصف قطر الحدود: 20 بكسل؛
الخلفية:#459DE5;
اللون: #ففف؛
حجم الخط: 18 بكسل؛
المؤشر:المؤشر؛
}

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

الزر الفائق: التحويم (
الخلفية:#358DE5;
}

الآن الزر على قيد الحياة. في الصورة الثابتة، لا يكون الاختلاف في الألوان ملحوظًا عند تحريك الماوس ويتغير اللون في تلك الثانية بالذات، مما يفرض ظلًا أغمق.

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

الزر الفائق: التركيز(
الخطوط العريضة: لا شيء؛

من المحتمل أن يكون هذا السؤال أحد أهم 10 أسئلة في المنتديات :) على الأرجح أن هذا أحد متطلبات المصمم أو العميل.

لذا فإن الحل للوهلة الأولى بسيط:

يرسل

ولكن بعد ذلك يطرح السؤال التالي (بشكل غريب): ماذا لو تم تعطيل JS للزائر؟

دعونا نغير الكود الخاص بنا إلى:

ودعونا نضيف بعض JS:

addEvent(window, "load" , windowLoad) ;

/* إضافة معالج الأحداث عبر المتصفحات */
وظيفة addEvent(obj, evType, fn) (
إذا (obj.addEventListener) (
obj.addEventListener(evType, fn, false);
) وإلا إذا (obj.attachEvent) (
obj.attachEvent("on" + evType, fn);
}
}

/* الحصول على النموذج الأصلي للعنصر */
الدالة getParentForm(obj) (
بينما ((obj = obj.parentNode)) (
إذا (obj.nodeName == "FORM") (
استراحة ؛
}
}
كائن الإرجاع؛
}

/* نبحث عن جميع أزرار الإرسال التي تحتوي على فئة الارتباط ونستبدلها بالروابط */
وظيفة تحميل النافذة () (
أزرار var = document.getElementsByTagName("input" ) ;
ل(فار ط = 0؛ ط< buttons.length ; i++ ) {


link.appendChild(document.createTextNode(buttons[ i].getAttribute("value") ));
link.setAttribute ("href" , "#" ) ;
addEvent(link, "click" , linkClick) ;

varparent = Buttons[i].parentNode ;
parent.removeChild (buttons[i]) ;
Parent.appendChild(رابط) ؛
}
}
}

/* أرسل النموذج بالضغط على الرابط */
رابط الوظيفة انقر (هـ) (
var e = window.event ||
ه؛
فار الهدف = e.target ||
e.srcElement ;

varparentForm = getParentForm(target) ;
}

parentForm.submit();

يرسل

إذا (window.event) (e.returnValue = false;) else (e.preventDefault();)

الآن، إذا تم تعطيل JS، سيرى الزائر زرًا بدلاً من الرابط وسيظل قادرًا على إرسال النموذج. لكننا لن نتوقف عند هذا الحد. لنجعل الزر يبدو كرابط حتى لو تم تعطيل JS. من أجل تصميم الزر، سنقوم بتغيير العلامة إلى زر، وستكون هناك حاجة إلى الامتداد حتى نتمكن من إضافة نص تحته خط في Firefox.
ل(فار ط = 0؛ ط< buttons.length ; i++ ) {
سنقوم أيضًا بتغيير جزء JS وفقًا لذلك.
أزرار var = document.getElementsByTagName("button");
إذا (أزرار[ i].getAttribute("type" ) == "إرسال" && أزرار[i].className == "رابط" ) (

var link = document.createElement("a");

link.appendChild(document.createTextNode(buttons[ i].firstChild.firstChild.nodeValue));
سيبدو CSS كما يلي:
زر الرابط(
/* الخاصيتان الأوليتان مطلوبتان لإزالة المسافة البادئة في IE */

الفائض: مرئي؛
العرض: تلقائي؛
/* إزالة المسافة البادئة */

الهامش: 0;
الحشو: 0؛
/* إزالة جميع عناصر تصميم الأزرار */

الخلفية: لا شيء؛
الحدود: لا شيء؛
}

/* المؤشر العادي للروابط */
المؤشر: المؤشر؛
/* يتم وضع خط تحت الرابط عادةً */
زر. الرابط يمتد (
}

اللون: #00f؛

زخرفة النص: تسطير؛

بالنسبة إلى Firefox، يمكنك أيضًا إضافة -moz-user-select: text; بحيث يمكن تسليط الضوء على نص الزر، ولكن أشك في أن هذا ضروري.

ستعتمد الأنماط المتبقية على التصميم المحدد.

بعض الملاحظات:

لن يكون من الممكن تطبيق الفئات الزائفة النشطة، والتي تمت زيارتها، ولـ IE6 وقم بالتحويم على الزر

لن تعمل عدة أزرار لنموذج واحد بشكل طبيعي في IE6
يمكنك الاستغناء عن JS. كل هذا يتوقف على مدى أهمية طبيعة الارتباط بالنسبة لك.