HTML - Form Elements عناصر الفورم
عناصر النموذج (Form Elements) في HTML
عناصر النموذج (Form Elements) في HTML هي العناصر اللي بتستخدمها داخل <form> لجمع مدخلات المستخدم، زي الحقول النصية، الأزرار، مربعات التحديد، وغيرها.
✅ العناصر الشائعة داخل <form>:
| العنصر | الوصف |
|---|---|
<input> |
أكثر العناصر استخدامًا – يُستخدم لعدة أنواع من الحقول مثل النص، الإيميل، كلمة السر، وغيره. |
<label> |
يُستخدم لتعريف حقل ما – يُحسن من سهولة الوصول والوضوح للمستخدم. |
<select> و <option> |
قائمة منسدلة تحتوي على اختيارات. |
<textarea> |
حقل لإدخال نص متعدد الأسطر. |
<button> |
زر قابل للتخصيص أكثر من <input type="submit"> |
<fieldset> و <legend> |
تُستخدم لتجميع الحقول المرتبطة ببعضها داخل نموذج، مع عنوان (legend). |
🧪 مثال عملي متكامل لنموذج:
<form action="/submit" method="post">
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="egypt">Egypt</option>
<option value="ksa">Saudi Arabia</option>
<option value="uae">UAE</option>
</select><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="30"></textarea><br><br>
<input type="submit" value="Send">
</form>
📌 ملاحظات إضافية:
- استخدم
<label>معforوربطها بـidالحقل لتحسين الوصول. - يمكنك تخصيص
<button>بشكل أكبر باستخدام CSS أو JavaScript. - عنصر
<fieldset>يعطي تنظيم بصري ومجموعة منطقية للحقول المتشابهة.
تعليقات
إرسال تعليق