النماذج في HTML

يا هلا والله! اليوم بنتكلم عن النماذج (Forms) في HTML. النماذج هي أساس أي موقع تفاعلي، سواء كان تسجيل دخول، إنشاء حساب، أو حتى إرسال رسالة.

الأساس: وسم <form>

كل نموذج يبدأ وينتهي بوسم <form>. هو الحاوية لكل عناصر النموذج.

مثال:

<form action="/submit-data" method="POST">
    <!-- هنا بتجي عناصر النموذج -->
</form>

الـ action يحدد وين ترسل البيانات لما تسوي إرسال (submit)، والـ method يحدد طريقة الإرسال (عادة GET أو POST).

أشهر عنصر: <input>

الـ <input> هو ملك النماذج! فيه أنواع كثيرة تحدد وش نوع البيانات اللي المستخدم بيدخلها.

أنواع مهمة للـ <input>:

• type="text": لإدخال نصوص قصيرة (الاسم، العنوان).

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

• type="password": لإدخال كلمات المرور (النص يكون مخفي).

  <label for="password">كلمة المرور:</label>
          <input type="password" id="password" name="password">

• type="email": لإدخال البريد الإلكتروني (المتصفح ممكن يسوي تحقق بسيط).

  <label for="email">البريد الإلكتروني:</label>
          <input type="email" id="email" name="email">

• type="number": لإدخال أرقام فقط.

  <label for="age">العمر:</label>
          <input type="number" id="age" name="age" min="18" max="99">

• type="date": لاختيار تاريخ.

  <label for="birthdate">تاريخ الميلاد:</label>
          <input type="date" id="birthdate" name="birthdate">

• type="checkbox": لاختيار خيار أو أكثر من قائمة.

  <input type="checkbox" id="agree" name="terms" value="agreed">
          <label for="agree">أوافق على الشروط والأحكام</label>

• type="radio": لاختيار خيار واحد فقط من مجموعة (نفس الـ name يربطهم).

  <input type="radio" id="male" name="gender" value="male">
          <label for="male">ذكر</label><br>
          <input type="radio" id="female" name="gender" value="female">
          <label for="female">أنثى</label>

• type="submit": زر لإرسال النموذج.

  <input type="submit" value="إرسال البيانات">

النصوص الطويلة: <textarea>

إذا عندك نص طويل زي رسالة أو وصف، استخدم <textarea>.

<label for="message">رسالتك:</label>
<textarea id="message" name="user_message" rows="5" cols="30"></textarea>

القوائم المنسدلة: <select> و <option>

لاختيار خيار واحد من قائمة منسدلة، استخدم <select> مع <option> لكل خيار.

<label for="country">الدولة:</label>
<select id="country" name="user_country">
    <option value="sa">السعودية</option>
    <option value="eg">مصر</option>
    <option value="ae">الإمارات</option>
</select>

ملاحظة مهمة: <label>

لا تنسى تستخدم وسم <label> لكل عنصر إدخال! هذا يحسن تجربة المستخدمين ويسهل الوصول (Accessibility)، خاصة للي يستخدمون قارئات الشاشة. اربط الـ label بالـ input عن طريق مطابقة الـ for في الـ label مع الـ id في الـ input.

مثال نموذج كامل

هنا نموذج بسيط يجمع كل اللي تعلمناه:

<form action="/profile" method="POST">
    <h3 style="color: #0056b3;">إنشاء حساب جديد</h3>

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

    <p>
        <label for="new_email">البريد الإلكتروني:</label><br>
        <input type="email" id="new_email" name="email" required>
    </p>

    <p>
        <label for="new_password">كلمة المرور:</label><br>
        <input type="password" id="new_password" name="password" minlength="8" required>
    </p>

    <p>
        <label for="country_select">الدولة:</label><br>
        <select id="country_select" name="country">
            <option value="sa">السعودية</option>
            <option value="eg">مصر</option>
            <option value="ae">الإمارات</option>
            <option value="other">أخرى</option>
        </select>
    </p>

    <p>
        <input type="checkbox" id="newsletter" name="newsletter" value="yes">
        <label for="newsletter">أرغب في استلام النشرة الإخبارية</label>
    </p>

    <p>
        <input type="submit" value="تسجيل">
    </p>
</form>

وبكذا نكون غطينا أساسيات النماذج في HTML. طبقها وجربها بنفسك عشان تثبت المعلومة!

← السابقالفهرسالتالي →