عناصر HTML الأساسية للنماذج والبيانات الوصفية
عنصر النموذج <form>
يستخدم عنصر النموذج <form> لإنشاء نماذج تفاعلية على صفحات الويب. يحتوي النموذج على عدة عناصر مثل <label>، <input>، <textarea>، وغيرها.
سمة action
تعتبر سمة action في النموذج مهمة جدًا. تشير إلى جانب الخادم أو صفحة الجهة الخارجية لمعالجة المعلومات. للمعالجة، تحتاج إلى تحديد طريقة أولاً باستخدام سمة method.
طرق الإرسال
- GET: يرسل جميع المعلومات في تنسيق عنوان URL.
- POST: يرسل المعلومات في نص الرسالة.
أنواع الإدخال
هناك أنواع عديدة من المدخلات للنماذج، مثل:
<input type="text">: لإدخال النصوص.<input type="radio">: لاختيار خيار واحد من عدة خيارات.<input type="checkbox">: لاختيار عدة خيارات.<input type="email">: لإدخال البريد الإلكتروني.<input type="submit">: لإنشاء زر إرسال.
العلامة <label>
تُستخدم العلامة <label> لإنشاء تصنيفات وربطها بالمدخلات. قاعدة الربط هي أن يكون للعلامة نفس القيمة في سمة for وسمة id للإدخال.
مثال كود:
<form action="/submit" method="post">
<label for="firstname">الاسم الأول:</label>
<input type="text" id="firstname" name="firstname"><br>
<label for="lastname">اسم العائلة:</label>
<input type="text" id="lastname" name="lastname"><br>
<label for="message">الرسالة:</label>
<textarea id="message" name="message"></textarea><br>
<label>الجنس:</label><br>
<label for="male">ذكر</label>
<input type="radio" id="male" name="gender" value="male"><br>
<label for="female">أنثى</label>
<input type="radio" id="female" name="gender" value="female"><br>
<input type="submit" value="إرسال">
</form>
العلامة <meta>
العلامة <meta> هي علامة ذاتية الإغلاق توفر معلومات تعريفية لملف HTML. تستخدم محركات البحث وخدمات الويب الأخرى هذه المعلومات. تعد العلامات الوصفية ضرورية لتحسين صفحتك لمحركات البحث (SEO).
مثال كود:
<meta name="description" content="هذا هو الوصف المختصر الذي تظهره محركات البحث"> العلامة <script>
تُستخدم علامة <script> لتضمين برنامج نصي من جانب الخادم أو إنشاء ارتباط إلى ملف نصي خارجي. يمكن أن تحتوي على سمتين رئيسيتين:
type: يحدد نوع البرنامج النصي.src: يحدد مصدر الملف النصي.
مثال كود:
<script type="text/javascript" src="scripts.js"></script> العلامة <noscript>
تعمل علامة <noscript> عند تعطيل البرامج النصية في متصفح الويب. تجعل الصفحة متوافقة مع المستخدمين الذين لا يسمحون بالبرامج النصية في متصفحاتهم.
مثال كود:
<noscript>
<p>وللأسف! البرامج النصية معطلة.</p>
</noscript>السمات في HTML
السمات هي نوع من المعدلات لعلامات HTML. تضيف تكوينات جديدة لعلامات HTML. تظهر السمة كـ attributename="value" وتجلس في علامة HTML الافتتاحية.
أمثلة على السمات:
idوclass: تُستخدم لتحديد العناصر. يمكن استخدامclassلعناصر متعددة، بينماidيجب أن يكون فريدًا.href: تُستخدم للإشارة إلى الروابط.src: تُستخدم لتحديد مصدر الوسائط أو الملفات.
مثال كود:
<h1 class="heading">هذا هو العنوان الرئيسي</h1>
<a href="https://www.google.com/">Google</a>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />نصائح عامة
- استخدم العلامات الوصفية
<meta>لتحسين SEO. - تأكد من استخدام
<noscript>لتوفير تجربة أفضل للمستخدمين الذين يعطلون البرامج النصية. - استخدم السمات مثل
idوclassلتحديد العناصر بشكل صحيح.
هذا المقال يقدم شرحًا شاملًا لعناصر HTML الأساسية المتعلقة بالنماذج والبيانات الوصفية. يمكنك استخدام هذه العناصر لإنشاء صفحات ويب تفاعلية ومُحسّنة لمحركات البحث.
