HTML/input/reset

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

ملاحظة: ليس من المستحسن عمومًا تضمين أزرار لإعادة التعيين في النماذج، ففائدتها قليلة، وتسبب إزعاجًا للمستخدم إن ضغطها خطأً بدلًا من زر الإرسال.

الخاصية value

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

<input type="reset" value="إعادة تعيين النموذج">

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

<input type="reset">

استخدام أزرار إعادة التعيين

تستخدم أزرار إعادة التعيين لإعادة تعيين جميع حقول النموذج.

زر إعادة تعيين بسيط

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

<form> 
  <div>
    <label for="example">اكتب بعض النص للتجربة:</label>
    <input id="example" type="text">
  </div>
  <div>
    <input type="reset" value="إعادة تعيين النموذج">
  </div>
</form>

جرِّب كتابة بعض النص داخل المربع النصي، ثم الضغط على زر إعادة التعيين. لاحظ أنَّ إعادة التعيين تعني إرجاع النموذج إلى حالته الأصلية، ولا تعني تفريغ الحقول، فلو كان لدينا حقل نصي text فيه نص، وصندوق تأشير checkbox مفعّل، ثم غيرنا قيمة الحقلين ثم ضغطنا على زر إعادة التعيين، فسنجد أنَّ القيم الأصلية قد عادت:

<form> 
  <div>
    <label for="example-text">اكتب بعض النص للتجربة:</label>
    <input id="example-text" type="text" value="تجربة">

    <label for="example-checkbox">عطل صندوق التأشير:</label>
    <input id="example-checkbox" type="checkbox" checked>
  </div>
  <div>
    <input type="reset" value="إعادة تعيين النموذج">
  </div>
</form>

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

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

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

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

<form> 
  <div>
    <label for="example">اكتب بعض النص للتجربة:</label>
    <input id="example" type="text">
  </div>
  <div>
    <input type="reset" value="إعادة تعيين النموذج" accesskey="r">
  </div>
</form>

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

تفعيل وتعطيل أزرار إعادة التعيين

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

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

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

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

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

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

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

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