أساسيات إنشاء النماذج في HTML
في هذا الدرس سنتعرف على كيفية إنشاء النماذج (Forms) في لغة HTML، وهي من أهم العناصر التي تُستخدم لجمع البيانات من المستخدمين مثل الاسم، البريد الإلكتروني، أو كلمة المرور.
ما هو النموذج (Form)؟
النموذج هو عنصر يُستخدم لتجميع البيانات من المستخدمين وإرسالها إلى الخادم
(Server). يُكتب باستخدام الوسم <form> ويوضع بداخله جميع
عناصر الإدخال.
وسم <form>
نبدأ بكتابة الوسم كالتالي:
<form action="" method="post">
</form>
خاصية action تحدد العنوان الذي سترسل إليه البيانات، وسنشرحها
بالتفصيل لاحقًا.
إضافة حقل إدخال (Input)
نستخدم الوسم <input> لإدخال البيانات. هو وسم ذاتي الإغلاق
(لا يحتاج إلى وسم إغلاق). يمكن تخصيص نوع البيانات باستخدام الخاصية
type (مثل النص، الرقم، كلمة المرور...).
<input type="text">إضافة تسمية باستخدام <label>
لجعل النموذج أوضح، يمكن استخدام <label> لإظهار نص بجوار حقل
الإدخال، مثل:
<label>اسم المستخدم</label>يمكن وضع التسمية قبل أو بعد الحقل حسب التصميم المطلوب.
ربط <label> مع <input>
لجعل التسمية مرتبطة بالحقل وتقوم بتركيز المؤشر داخله عند النقر، نستخدم خاصيتي
id داخل <input>، وfor داخل
<label> بنفس القيمة.
<label for="username">اسم المستخدم:</label>
<input type="text" id="username" name="username">عند النقر على "اسم المستخدم"، سيدخل المؤشر مباشرة في مربع الإدخال.
مثال كامل
<form>
<label for="username">اسم المستخدم:</label>
<input type="text" id="username" name="username">
</form>ملاحظات مهمة
- احرص على استخدام معرف فريد لكل
input. - استخدم
labelلجعل النموذج واضحًا وسهل الاستخدام. - النماذج ضرورية في صفحات تسجيل الدخول، الاشتراك، رفع الملفات وغيرها.
الخاتمة
في هذا الدرس، تعلمنا العناصر الأساسية لإنشاء نموذج في HTML باستخدام
form وinput وlabel، وتعرفنا على كيفية
الربط بين الحقول والتسميات لتحسين تجربة المستخدم.
تابعنا في الدرس التالي حيث سنتعرف على أنواع مختلفة من الحقول باستخدام الخاصية
type مثل البريد الإلكتروني، كلمة المرور، التاريخ، وغير ذلك.