عرض مصدر HTML/input/submit

<noinclude>{{DISPLAYTITLE:الحقل <code>submit</code>}}</noinclude>
عناصر <code>[[HTML/input|<input>]]</code> ذات النوع <code>submit</code> تُعرَض كأزرار لإرسال النموذج، فالضغط على أحد تلك الأزرار سيؤدي إلى إرسال بيانات جميع عناصر النموذج إلى الخادوم.
== الخاصية <code>value</code> ==
تحتوي الخاصية <code>value</code> في الحقل <code>submit</code> على سلسلة نصية (<code>DOMString</code>) التي ستستعمل كلافتة للزر.<syntaxhighlight lang="html">
<input type="submit" value="Submit to me">

</syntaxhighlight>أما إذ لم تُحدَّد قيمة للخاصية <code>value</code> فستستعمل اللافتة الافتراضية ''Submit'':<syntaxhighlight lang="html">
<input type="submit">

</syntaxhighlight>

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

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

=== زر إرسال بسيط ===
هذا مثال بسيط عن زر إرسال:<syntaxhighlight lang="html">
<form> 
  <div>
    <label for="example">Let's submit some text</label>
    <input id="example" type="text" name="text">
  </div>
  <div>
    <input type="submit" value="Submit to me">
  </div>
</form>
</syntaxhighlight>جرِّب كتابة بعض النص داخل المربع النصي، ثم الضغط على زر الإرسال.

لاحظ أنَّ بيانات حقول النموذج (<code>name</code> و <code>value</code>) ستُرسَل إلى الخادوم.
=== إضافة اختصار إلى الزر عبر لوحة المفاتيح ===
اختصارات لوحة المفاتيح -والتي تعرف أيضًا باسم مفاتيح الوصول (access keys)- تسمح لمستخدم بتفعيل زر باستخدام تجمعية من الأزرار على لوحة المفاتيح.

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

على سبيل المثال، جعلنا القيمة <code>s</code> قيمةً للخاصية <code>accesskey</code>، أي عليك أن تضغط على زر <code>s</code> إضافةً إلى الزر الذي يستخدم لاختصارات لوحة المفاتيح على نظام تشغيلك (الزر <code>alt</code> على نظامَي ويندوز ولينكس).<syntaxhighlight lang="html">
<form>
  <div>
    <label for="example">Let's submit some text</label>
    <input id="example" type="text" name="text">
  </div>
  <div>
    <input type="submit" value="Submit to me"
     accesskey="s">
  </div>
</form>
</syntaxhighlight>المشكلة مع المثال السابق هي أنَّ المستخدم لن يعرف ما هو اختصار لوحة المفاتيح للزر السابق! وبالتالي عليك أن توفِّر هذه المعلومات في موقعك بشكلٍ لا يتداخل مع تصميم الموقع (مثل توفير رابط يشرح ما هي اختصارات لوحة المفاتيح المستعملة في الموقع).

=== تفعيل وتعطيل أزرار الإرسال ===
لتعطيل أحد أزرار الإرسال فاستخدم الخاصية <code>disabled</code> عليه، كما في المثال الآتي:<syntaxhighlight lang="html">
<input type="reset" value="Disabled" disabled>

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

راجع صفحة الحقل <code>[[HTML/input/button|button]]</code> لمزيدٍ من المعلومات عن تفعيل وتعطيل الأزرار.
== التحقق من الحقل ==
ليس هنالك فائدة من التحقق من قيمة الحقل <code>submit</code>.
== دعم المتصفحات ==
{| class="wikitable" style="width: 50%;"
 !| Chrome
 ! Firefox
 ! Edge
 ! Safari
 ! Opera
|-
|مدعوم
|مدعوم
|مدعوم
|مدعوم
|مدعوم
|}
[[تصنيف:HTML]]
[[تصنيف:HTML Forms]]
[[تصنيف:HTML Input Types]]