يصف هذا الفصل جميع عناصر النموذج المختلفة في HTML.
عنصر النموذج <form>
يمكن أن يحتوي عنصر النموذج <form> على واحد أو أكثر من عناصر النموذج التالية:
- <input>: يُستخدم لإنشاء حقول إدخال مختلفة، مثل حقول النص، وأزرار الراديو، ومربعات الاختيار، وأزرار الإرسال.
- <label>: يُستخدم لإنشاء تسمية توضيحية لحقل إدخال، مما يسهل على المستخدمين فهم الغرض من الحقل.
- <select>: يُستخدم لإنشاء قائمة منسدلة تسمح للمستخدم بتحديد خيار واحد من مجموعة من الخيارات.
- <textarea>: يُستخدم لإنشاء منطقة نصية متعددة الأسطر، مما يسمح للمستخدم بإدخال نص طويل.
- <button>: يُستخدم لإنشاء زر يمكن النقر عليه لتشغيل إجراء ما، مثل إرسال النموذج أو إعادة تعيين الحقول.
- <fieldset>: يُستخدم لتجميع مجموعة من عناصر النموذج ذات الصلة معًا، وغالبًا ما يتم استخدامه لإنشاء حدود مرئية حول المجموعة.
- <legend>: يُستخدم لتوفير تسمية توضيحية لعنصر <fieldset>، مما يوضح للمستخدم الغرض من المجموعة.
- <datalist>: يُستخدم لتوفير قائمة بالاقتراحات المسبقة للمستخدم عند إدخال النص في حقل الإدخال، مما يساعد في تقليل الأخطاء الإملائية.
- <output>: يُستخدم لعرض النتيجة المحسوبة أو القيمة المُعادَة من البرنامج النصي.
- <option>: يُستخدم لتحديد خيار فردي داخل قائمة منسدلة <select>.
- <optgroup>: يُستخدم لتجميع الخيارات ذات الصلة داخل قائمة منسدلة <select>، مما يحسن من قابلية الاستخدام والتنقل.
عنصر الإدخال <input>
أحد أكثر عناصر النموذج استخدامًا هو عنصر الإدخال <input>.
يمكن عرض عنصر الإدخال بطرق مختلفة، اعتمادًا على السمة type.
مثال:
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
عنصر التسمية <label>
يُعرّف عنصر التسمية <label> تسمية توضيحية لحقل إدخال أو أكثر في النموذج.
يُعد عنصر التسمية مفيدًا لمستخدمي قارئ الشاشة، حيث يقوم القارئ بقراءة التسمية بصوت عالٍ عندما يركز المستخدم على حقل الإدخال المقابل.
كما يساعد عنصر التسمية المستخدمين الذين يجدون صعوبة في النقر على مناطق صغيرة جدًا (مثل أزرار الراديو أو مربعات الاختيار) – لأنه عند النقر على نص التسمية، يتم تحديد أو إلغاء تحديد زر الراديو أو مربع الاختيار المقابل.
لربط التسمية بحقل الإدخال، يجب أن تكون قيمة السمة for في عنصر <label> مساوية لقيمة السمة id في عنصر <input> المقابل.
عنصر القائمة المنسدلة <select>
يُعرّف عنصر <select> قائمة منسدلة تسمح للمستخدم بتحديد خيار واحد من مجموعة من الخيارات.
مثال:
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
عنصر الخيار <option>
يُعرّف عنصر <option> خيارًا فرديًا يمكن تحديده داخل قائمة منسدلة <select>.
بشكل افتراضي، يتم تحديد العنصر الأول في القائمة المنسدلة.
لتحديد خيار مسبق التحديد، أضف السمة selected إلى الخيار:
مثال:
<option value="fiat" selected>Fiat</option>
تحديد عدد القيم المرئية:
استخدم السمة size لتحديد عدد القيم المرئية في القائمة المنسدلة:
مثال:
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
السماح بتحديدات متعددة:
استخدم السمة multiple للسماح للمستخدم بتحديد أكثر من قيمة واحدة في القائمة المنسدلة:
مثال:
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
عنصر المنطقة النصية <textarea>
يُعرّف عنصر <textarea> حقل إدخال متعدد الأسطر (منطقة نصية) يسمح للمستخدم بإدخال نص طويل.
مثال:
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
السمة rows: تحدد عدد الأسطر المرئية في منطقة النصية. القيمة الأكبر تعني إمكانية عرض المزيد من السطر في نفس الوقت، لكنها ستقلل من المساحة المتاحة لكل سطر.
السمة cols: تحدد العرض المرئي لمنطقة النصية بوحدات الحروف العريضة. القيمة الأكبر تعني إمكانية عرض المزيد من الأحرف في نفس الوقت، لكنها قد تتسبب في خروج النص عن إطار منطقة النصية على الشاشات الصغيرة.
شكل عرضها
يمكنك أيضًا تحديد حجم منطقة النصية باستخدام CSS:
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
عنصر الزر <button>
يُعرّف عنصر <button> زرًا قابلًا للنقر في صفحات الويب.
مثال:
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
ملاحظة مهمة: احرص دائمًا على تحديد السمة type لعنصر الزر <button>، وذلك لأن المتصفحات المختلفة قد تستخدم أنواعًا افتراضية مختلفة لهذا العنصر، مما قد يؤدي إلى اختلاف في السلوك أو المظهر.
عنصر تجميع البيانات <fieldset> وعنصر التسمية التوضيحية <legend>
يُستخدم عنصر <fieldset> لتجميع البيانات ذات الصلة في نموذج، وغالبًا ما يتم استخدامه لإنشاء حدود مرئية حول مجموعة من حقول الإدخال.
يُستخدم عنصر <legend> لتوفير تسمية توضيحية لعنصر <fieldset>، مما يوضح للمستخدم الغرض من المجموعة.
مثال:
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
هذه هي الطريقة التي سيتم بها عرض كود HTML أعلاه في المتصفح:
عنصر قائمة البيانات <datalist>
يُستخدم عنصر <datalist> لتوفير قائمة بالاقتراحات المسبقة للمستخدم عند إدخال النص في حقل الإدخال <input>.
يساعد هذا العنصر في تقليل الأخطاء الإملائية وتوجيه المستخدم إلى الخيارات الصحيحة، مما يحسن من تجربة المستخدم.
لربط قائمة البيانات بحقل الإدخال، يجب أن تكون قيمة السمة list في عنصر <input> مساوية لقيمة السمة id في عنصر <datalist>.
مثال:
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
عنصر الإخراج <output>
يُستخدم عنصر <output> لعرض نتيجة عملية حسابية أو قيمة مُعادَة من برنامج نصي.
مثال:
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
