الفرق بين المراجعتين لصفحة: «HTML/input/submit»

المراجعة الحالية بتاريخ 07:59، 6 أغسطس 2023

عناصر <input> ذات النوع submit تُعرَض كأزرار لإرسال النموذج، فالضغط على أحد تلك الأزرار سيؤدي إلى إرسال بيانات جميع عناصر النموذج إلى الخادوم.

الخاصية `value`

تحتوي الخاصية value في الحقل submit على سلسلة نصية (DOMString) التي ستستعمل كلافتة للزر.

<input type="submit" value="أرسل">

أما إذ لم تُحدَّد قيمة للخاصية value فستستعمل اللافتة الافتراضية Submit:

<input type="submit">

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

تستخدم أزرار إعادة الإرسال لإرسال بيانات جميع حقول النموذج. فإذا أردتَ إنشاء زر خاص ثم تُخصِّص سلوكه عبر JavaScript، فاستخدم الحقل button أو العنصر <button> (وهو أفضل).

أبقِ في ذهنك أنَّك إذا وضعت عنصر <button> وحيد ضمن النموذج (مثلًا: <button>My button</button>) فسيعدّه المتصفح على أنَّه زر إرسال، لذا عليك أن تُعرِّف زر إرسال خصيصًا إضافةً إلى غيره من الأزرار العادية.

زر إرسال بسيط

هذا مثال بسيط عن زر إرسال:

<form> 
  <div>
    <label for="example">اكتب نصًا لترسله</label>
    <input id="example" type="text" name="text">
  </div>
  <div>
    <input type="submit" value="أرسل">
  </div>
</form>

جرِّب كتابة بعض النص داخل المربع النصي، ثم الضغط على زر الإرسال.

لاحظ أنَّ بيانات حقول النموذج (name و value) ستُرسَل إلى الخادوم.

إضافة اختصار إلى الزر عبر لوحة المفاتيح

اختصارات لوحة المفاتيح -والتي تعرف أيضًا باسم مفاتيح الوصول (access keys)- تسمح لمستخدم بتفعيل زر باستخدام تجمعية من الأزرار على لوحة المفاتيح.

لإضافة اختصار لوحة مفاتيح إلى زرٍ ما فاستعمل الخاصية العامة accesskey.

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

<form> 
  <div>
    <label for="example">اكتب نصًا لترسله</label>
    <input id="example" type="text" name="text">
  </div>
  <div>
    <input type="submit" value="أرسل" accesskey="s">
  </div>
</form>

المشكلة مع المثال السابق هي أنَّ المستخدم لن يعرف ما هو اختصار لوحة المفاتيح للزر السابق! وبالتالي عليك أن توفِّر هذه المعلومات في موقعك بشكلٍ لا يتداخل مع تصميم الموقع (مثل توفير رابط يشرح ما هي اختصارات لوحة المفاتيح المستعملة في الموقع).

تفعيل وتعطيل أزرار الإرسال

لتعطيل أحد أزرار الإرسال فاستخدم الخاصية disabled عليه، كما في المثال الآتي:

<input type="submit" value="معطل" disabled>

يمكننا تفعيل وتعطيل الأزرار في وقت التنفيذ عبر ضبط قيمة الخاصية disabled إلى true أو false.

راجع صفحة الحقل button لمزيدٍ من المعلومات عن تفعيل وتعطيل الأزرار.

التحقق من الحقل

ليس هنالك فائدة من التحقق من قيمة الحقل submit.

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

@@ سطر 44: / سطر 44: @@
    </div>
 </form>
-</syntaxhighlight>المشكلة مع المثال السابق هي أنَّ المستخدم لن يعرف ما هو اختصار لوحة المفاتيح للزر السابق! وبالتالي عليك أن توفِّر هذه المعلومات في موقعك بشكلٍ لا يتداخل مع تصميم الموقع (مثل توفير رابط يشرح ما هي اختصارات لوحة المفاتيح المستعملة في الموقع).
+</syntaxhighlight>المشكلة مع المثال السابق هي أنَّ المستخدم لن يعرف ما هو اختصار لوحة المفاتيح للزر السابق! وبالتالي عليك أن توفِّر هذه المعلومات في موقعك بشكلٍ لا يتداخل مع [https://academy.hsoub.com/programming/general/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D9%85%D9%88%D8%AC%D8%B2-%D8%A5%D9%84%D9%89-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%85%D9%88%D9%82%D8%B9-%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A-r1883/ تصميم الموقع] (مثل توفير رابط يشرح ما هي اختصارات لوحة المفاتيح المستعملة في الموقع).
 === تفعيل وتعطيل أزرار الإرسال ===