أمثلة على وسوم إضافية

في هذا القسم ستجد وسوماً جديدة تمت إضافتها:

🔹 وسم السطر الجديد <br>

<p>سطر أول<br>سطر ثاني</p>

🔹 قائمة مرتبة <ol>

<ol>
  <li>العنصر الأول</li>
  <li>العنصر الثاني</li>
</ol>

🔹 قائمة غير مرتبة <ul>

<ul>
  <li>نقطة 1</li>
  <li>نقطة 2</li>
</ul>

🔹 نموذج <form> يحتوي على عناصر مختلفة

<form action="#" method="post">
  <fieldset>
    <legend>معلومات المستخدم</legend>

    <label for="name">الاسم:</label>
    <input type="text" id="name" name="name">
    <br><br>

    <label for="msg">الرسالة:</label>
    <textarea id="msg" name="msg" rows="4"></textarea>
  </fieldset>
  <br>
  <input type="submit" value="إرسال">
</form>

شرح الوسوم الإضافية

🔸 وسم <br>

يستخدم لكسر السطر داخل النص دون بدء فقرة جديدة. مفيد عندما تريد الانتقال لسطر جديد بسرعة.

<p>سطر أول<br>سطر ثاني</p>

🔸 وسم <ol> – قائمة مرتبة

يعرض عناصر مرقمة تلقائياً، مفيد للخطوات أو التسلسل.

<ol>
  <li>العنصر الأول</li>
  <li>العنصر الثاني</li>
</ol>

🔸 وسم <ul> – قائمة غير مرتبة

يعرض نقاط بدون أرقام، ويستخدم عادة لعرض معلومات أو عناصر بدون ترتيب.

<ul>
  <li>نقطة 1</li>
  <li>نقطة 2</li>
</ul>

🔸 وسم <li> – عنصر قائمة

يمثل كل عنصر داخل <ul> أو <ol>.

<ul>
  <li>عنصر قائمة</li>
</ul>

🔸 وسم <form> – نموذج إدخال

يستخدم لإنشاء نماذج مثل تسجيل الدخول، إرسال البيانات، إلخ.

<form action="#" method="post">
  ... عناصر النموذج ...
</form>

🔸 وسم <input>

يُستخدم لإنشاء حقول إدخال مختلفة مثل نص، بريد، أزرار، إلخ.

<input type="text" placeholder="اكتب هنا">

🔸 وسم <label>

يستخدم لوصف حقل إدخال ويسهل النقر عليه لربطه بالحقل.

<label for="name">الاسم:</label>
<input id="name" type="text">

🔸 وسم <fieldset>

يستخدم لتجميع عناصر مرتبطة داخل النموذج داخل إطار واحد.

<fieldset>
  <legend>معلومات شخصية</legend>
  ...
</fieldset>

🔸 وسم <legend>

عنوان لمجموعة العناصر داخل <fieldset>.

<fieldset>
  <legend>العنوان</legend>
</fieldset>

🔸 وسم <textarea>

حقل كتابة متعدد الأسطر، يستخدم للرسائل أو النصوص الطويلة.

<textarea rows="4" cols="40">اكتب رسالتك هنا</textarea>