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

من موسوعة حسوب
< HTML‏ | input
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}'
ط استبدال النص - ':(Content sectioning|Edits|Embedded content|Forms|Inline text semantics|Input Types|Interactive elements|Main Root|Metadata|Multimedia|Scripting|Table|Text Content)' ب':HTML $1'
سطر 69: سطر 69:
|}
|}
[[تصنيف:HTML|{{SUBPAGENAME}}]]
[[تصنيف:HTML|{{SUBPAGENAME}}]]
[[تصنيف:Forms|{{SUBPAGENAME}}]]
[[تصنيف:HTML Forms|{{SUBPAGENAME}}]]
[[تصنيف:Input Types|{{SUBPAGENAME}}]]
[[تصنيف:HTML Input Types|{{SUBPAGENAME}}]]

مراجعة 15:40، 28 يناير 2018

عناصر <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
مدعوم مدعوم مدعوم مدعوم مدعوم