الحقل reset

من موسوعة حسوب
< HTML‏ | input
مراجعة 13:40، 19 سبتمبر 2017 بواسطة عبد اللطيف ايمش (نقاش | مساهمات)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)
اذهب إلى التنقل اذهب إلى البحث

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

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

الخاصية value

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

<input type="reset" value="Reset the form">

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

<input type="reset">

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

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

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

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

<form> 
  <div>
    <label for="example">Type in some sample text</label>
    <input id="example" type="text">
  </div>
  <div>
    <input type="reset" value="Reset the form">
  </div>
</form>

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

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

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

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

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

<form>
  <div>
    <label for="example">Type in some sample text</label>
    <input id="example" type="text">
  </div>
  <div>
    <input type="reset" value="Reset the form"
     accesskey="r">
  </div>
</form>

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

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

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

<input type="reset" value="Disabled" disabled>

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

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

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

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

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

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