الفرق بين المراجعتين ل"HTML/output"
< HTML
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - ':(Content sectioning|Edits|Embedded content|Forms|Inline text semantics|Input Types|Interactive elements|Main Root|Metadata|Multimedia|Scripting|Table|Text Content)' ب':HTML $1') |
(إضافة قسمين وثلاثة أمثلة) |
||
| سطر 3: | سطر 3: | ||
مثال تفاعلي (باستخدام شيفرة JavaScript) يُستخدَم فيه العنصر <code><output></code> لإظهار ناتج عملية حسابية يجريها المستخدم:<syntaxhighlight lang="html"> | مثال تفاعلي (باستخدام شيفرة JavaScript) يُستخدَم فيه العنصر <code><output></code> لإظهار ناتج عملية حسابية يجريها المستخدم:<syntaxhighlight lang="html"> | ||
| − | <form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> | + | <form oninput="result.value = parseInt(a.value) + parseInt(b.value)"> |
| − | + | <input type="range" name="b" value="50"> + | |
| − | + | <input type="number" name="a" value="10"> = | |
| − | + | <output name="result">60</output> | |
</form> | </form> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | == بطاقة العنصر == | ||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 49: | سطر 50: | ||
قائمة بمُعرِّفات ID للعناصر الأخرى، وتُشير إلى أنَّ تلك العناصر قد ساهمت بالنتيجة الظاهرة في هذا العنصر. | قائمة بمُعرِّفات ID للعناصر الأخرى، وتُشير إلى أنَّ تلك العناصر قد ساهمت بالنتيجة الظاهرة في هذا العنصر. | ||
| − | |||
استخدمنا في هذا المثال الخاصية <code>for</code> للإشارة إلى أنَّ الحقلين <code>a</code> و <code>b</code> قد ساهما في النتيجة المعروضة في العنصر <code><output></code>:<syntaxhighlight lang="html"> | استخدمنا في هذا المثال الخاصية <code>for</code> للإشارة إلى أنَّ الحقلين <code>a</code> و <code>b</code> قد ساهما في النتيجة المعروضة في العنصر <code><output></code>:<syntaxhighlight lang="html"> | ||
| − | <form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> | + | <form oninput="result.value = parseInt(a.value) + parseInt(b.value)"> |
| − | + | <input type="range" name="b" value="50"> + | |
| − | + | <input type="number" name="a" value="10"> = | |
| − | + | <output name="result" for="a b">60</output> | |
</form> | </form> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| سطر 63: | سطر 63: | ||
هذه الخاصية تسمح لنا بوضع العنصر <code><output></code> في أي مكان في المستند، وليس بالضرورة أن يكون ابنًا للعنصر <code>[[HTML/form|<form>]]</code>. | هذه الخاصية تسمح لنا بوضع العنصر <code><output></code> في أي مكان في المستند، وليس بالضرورة أن يكون ابنًا للعنصر <code>[[HTML/form|<form>]]</code>. | ||
| − | |||
استخدمنا في هذا المثال الخاصية <code>form</code> للإشارة إلى أنَّ هذا العنصر تابعٌ للنموذج <code>form1</code>:<syntaxhighlight lang="html"> | استخدمنا في هذا المثال الخاصية <code>form</code> للإشارة إلى أنَّ هذا العنصر تابعٌ للنموذج <code>form1</code>:<syntaxhighlight lang="html"> | ||
| − | <form oninput="result.value=parseInt(a.value)+parseInt(b.value)" id="form1"> | + | <form oninput="result.value = parseInt(a.value) + parseInt(b.value)" id="form1"> |
| − | + | <input type="range" name="b" value="50"> + | |
| − | + | <input type="number" name="a" value="10"> = | |
</form> | </form> | ||
<output name="result" form="form1">60</output> | <output name="result" form="form1">60</output> | ||
| سطر 74: | سطر 73: | ||
=== <code>name</code> === | === <code>name</code> === | ||
اسم هذا العنصر. | اسم هذا العنصر. | ||
| + | |||
| + | == التنسيق الافتراضي == | ||
| + | تعرض أغلبية المتصفحات العنصر <code><output></code> مع ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>inline</code>:<syntaxhighlight lang="css"> | ||
| + | output { | ||
| + | display: inline; | ||
| + | } | ||
| + | </syntaxhighlight> | ||
==مصادر ومواصفات== | ==مصادر ومواصفات== | ||
المراجعة الحالية بتاريخ 04:08، 25 فبراير 2018
يُمثِّل العنصر <output> ناتج عملية حسابية أو أحد أفعال المستخدم.
مثال تفاعلي (باستخدام شيفرة JavaScript) يُستخدَم فيه العنصر <output> لإظهار ناتج عملية حسابية يجريها المستخدم:
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
<input type="range" name="b" value="50"> +
<input type="number" name="a" value="10"> =
<output name="result">60</output>
</form>
بطاقة العنصر
| تصنيفات المحتوى | عنصر تنظيمي، وعنصر عادي، وعنصر مرتبط بالنماذج. |
|---|---|
| المحتوى المسموح | المحتوى العادي. |
| الوسم المختصر | لا يمكن حذف أيّ من وسمَي البداية أو النهاية. |
| العناصر الأب | أي عنصر يقبل المحتوى العادي. |
| واجهة DOM | HTMLOutputElement
|
دعم المتصفحات
| Chrome | Firefox | Edge | Safari | Opera |
|---|---|---|---|---|
| 10 | 4.0 | مدعوم | 11 | 7 |
أضيف هذا العنصر أوّل مرة إلى HTML5، ولم يكن موجودًا من قبل في HTML 4.
الخاصيات
يمكن استخدام الخاصيات العامة في هذا العنصر.
for
قائمة بمُعرِّفات ID للعناصر الأخرى، وتُشير إلى أنَّ تلك العناصر قد ساهمت بالنتيجة الظاهرة في هذا العنصر.
استخدمنا في هذا المثال الخاصية for للإشارة إلى أنَّ الحقلين a و b قد ساهما في النتيجة المعروضة في العنصر <output>:
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
<input type="range" name="b" value="50"> +
<input type="number" name="a" value="10"> =
<output name="result" for="a b">60</output>
</form>
form
هذه الخاصية هي قيمة الخاصية id للعنصر <form> الذي يتعلق هذا العنصر به، القيمة الافتراضية هي قيمة الخاصية id لأقرب عنصر <form> أب لهذا العنصر.
هذه الخاصية تسمح لنا بوضع العنصر <output> في أي مكان في المستند، وليس بالضرورة أن يكون ابنًا للعنصر <form>.
استخدمنا في هذا المثال الخاصية form للإشارة إلى أنَّ هذا العنصر تابعٌ للنموذج form1:
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)" id="form1">
<input type="range" name="b" value="50"> +
<input type="number" name="a" value="10"> =
</form>
<output name="result" form="form1">60</output>
name
اسم هذا العنصر.
التنسيق الافتراضي
تعرض أغلبية المتصفحات العنصر <output> مع ضبط الخاصية display إلى inline:
output {
display: inline;
}
مصادر ومواصفات
- معيار HTML Living Standard.
- مواصفة HTML5.