الفرق بين المراجعتين ل"HTML/input/submit"
Wael-aldaghma (نقاش | مساهمات) ط |
|||
| (4 مراجعات متوسطة بواسطة مستخدم واحد آخر غير معروضة) | |||
| سطر 3: | سطر 3: | ||
== الخاصية <code>value</code> == | == الخاصية <code>value</code> == | ||
تحتوي الخاصية <code>value</code> في الحقل <code>submit</code> على سلسلة نصية (<code>DOMString</code>) التي ستستعمل كلافتة للزر.<syntaxhighlight lang="html"> | تحتوي الخاصية <code>value</code> في الحقل <code>submit</code> على سلسلة نصية (<code>DOMString</code>) التي ستستعمل كلافتة للزر.<syntaxhighlight lang="html"> | ||
| − | <input type="submit" value=" | + | <input type="submit" value="أرسل"> |
</syntaxhighlight>أما إذ لم تُحدَّد قيمة للخاصية <code>value</code> فستستعمل اللافتة الافتراضية ''Submit'':<syntaxhighlight lang="html"> | </syntaxhighlight>أما إذ لم تُحدَّد قيمة للخاصية <code>value</code> فستستعمل اللافتة الافتراضية ''Submit'':<syntaxhighlight lang="html"> | ||
| سطر 19: | سطر 19: | ||
<form> | <form> | ||
<div> | <div> | ||
| − | <label for="example"> | + | <label for="example">اكتب نصًا لترسله</label> |
<input id="example" type="text" name="text"> | <input id="example" type="text" name="text"> | ||
</div> | </div> | ||
<div> | <div> | ||
| − | <input type="submit" value=" | + | <input type="submit" value="أرسل"> |
</div> | </div> | ||
</form> | </form> | ||
| سطر 35: | سطر 35: | ||
على سبيل المثال، جعلنا القيمة <code>s</code> قيمةً للخاصية <code>accesskey</code>، أي عليك أن تضغط على زر <code>s</code> إضافةً إلى الزر الذي يستخدم لاختصارات لوحة المفاتيح على نظام تشغيلك (الزر <code>alt</code> على نظامَي ويندوز ولينكس).<syntaxhighlight lang="html"> | على سبيل المثال، جعلنا القيمة <code>s</code> قيمةً للخاصية <code>accesskey</code>، أي عليك أن تضغط على زر <code>s</code> إضافةً إلى الزر الذي يستخدم لاختصارات لوحة المفاتيح على نظام تشغيلك (الزر <code>alt</code> على نظامَي ويندوز ولينكس).<syntaxhighlight lang="html"> | ||
| − | <form> | + | <form> |
<div> | <div> | ||
| − | <label for="example"> | + | <label for="example">اكتب نصًا لترسله</label> |
<input id="example" type="text" name="text"> | <input id="example" type="text" name="text"> | ||
</div> | </div> | ||
<div> | <div> | ||
| − | <input type="submit" value=" | + | <input type="submit" value="أرسل" accesskey="s"> |
| − | |||
</div> | </div> | ||
</form> | </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/ تصميم الموقع] (مثل توفير رابط يشرح ما هي اختصارات لوحة المفاتيح المستعملة في الموقع). |
=== تفعيل وتعطيل أزرار الإرسال === | === تفعيل وتعطيل أزرار الإرسال === | ||
لتعطيل أحد أزرار الإرسال فاستخدم الخاصية <code>disabled</code> عليه، كما في المثال الآتي:<syntaxhighlight lang="html"> | لتعطيل أحد أزرار الإرسال فاستخدم الخاصية <code>disabled</code> عليه، كما في المثال الآتي:<syntaxhighlight lang="html"> | ||
| − | <input type=" | + | <input type="submit" value="معطل" disabled> |
| − | |||
</syntaxhighlight>يمكننا تفعيل وتعطيل الأزرار في وقت التنفيذ عبر ضبط قيمة الخاصية <code>disabled</code> إلى <code>true</code> أو <code>false</code>. | </syntaxhighlight>يمكننا تفعيل وتعطيل الأزرار في وقت التنفيذ عبر ضبط قيمة الخاصية <code>disabled</code> إلى <code>true</code> أو <code>false</code>. | ||
| سطر 70: | سطر 68: | ||
|مدعوم | |مدعوم | ||
|} | |} | ||
| − | + | [[تصنيف:HTML|{{SUBPAGENAME}}]] | |
| − | [[تصنيف: | + | [[تصنيف:HTML Forms|{{SUBPAGENAME}}]] |
| − | [[تصنيف:HTML]] | + | [[تصنيف:HTML Input Types|{{SUBPAGENAME}}]] |
| − | [[تصنيف:Input Types]] | ||
المراجعة الحالية بتاريخ 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 |
|---|---|---|---|---|
| مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |