تقنيات نور التعليمية تقنيات نور التعليمية
في الوقت الحالي

جاري صيانة و تحديث للمدونة

في الوقت الحالي
جاري التحميل ...

سلسلة دروس HTML | الدرس السابع: النماذج (Forms)
مايو 03, 2025
الصفحة الرئيسية

 ما هي النماذج في HTML؟

النماذج (Forms) تُستخدم لجمع البيانات من المستخدم، مثل: تسجيل الدخول، إرسال رسالة، ملء استبيان…
وتتكون من مجموعة من حقول الإدخال (Input Fields) مثل النصوص، الأزرار، الخيارات… إلخ.

سلسلة دروس HTML | الدرس السابع: النماذج (Forms)

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

كل الحقول توضع داخل هذا الوسم.

الصيغة العامة:

<form action="رابط-المعالجة" method="طريقة-الإرسال">
  <!-- عناصر الإدخال هنا -->
</form>

1. حقل إدخال نص: <input type="text">

<label>الاسم:</label>
<input type="text" name="username">

2. حقل كلمة المرور: <input type="password">

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

3. زر إرسال: <input type="submit">

<input type="submit" value="إرسال">

4. حقل بريد إلكتروني

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

5. حقل رقم

<label>رقم الهاتف:</label>
<input type="tel" name="phone">

6. مربعات التحديد (Checkbox)

<label><input type="checkbox" name="subscribe"> اشترك في النشرة</label>

7. أزرار الاختيار (Radio)

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

8. قائمة منسدلة (Select)

<label>الدولة:</label>
<select name="country">
  <option value="eg">مصر</option>
  <option value="sa">السعودية</option>
  <option value="ma">المغرب</option>
</select>

9. حقل نص متعدد الأسطر: <textarea>

<label>ملاحظات:</label><br>
<textarea name="message" rows="4" cols="30"></textarea>

مثال عملي كامل

<!DOCTYPE html>
<html>
<head>
  <title>نموذج التواصل</title>
</head>
<body>
  <h1>نموذج التواصل معنا</h1>

  <form action="send.php" method="post">
    <label>الاسم:</label><br>
    <input type="text" name="username"><br><br>

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

    <label>الرسالة:</label><br>
    <textarea name="message" rows="4" cols="40"></textarea><br><br>

    <input type="checkbox" name="subscribe"> اشترك في النشرة<br><br>

    <input type="submit" value="إرسال">
  </form>
</body>
</html>

الواجب العملي

  • أنشئ نموذج يحتوي على: الاسم، البريد، كلمة المرور، خيار تحديد الجنس، ومربع رسالة.
  • جرّب استخدام checkbox و select.

ماذا سنتعلّم في الدرس القادم؟

في الدرس الثامن سنتعلم كيفية تنسيق الصفحة باستخدام الوسم <div>، وأساس تقسيم الهيكل العام لصفحات الويب.

عن الكاتب

Tamer Ahmed

شاهد أيضاً

التعليقات


اتصل بنا

إذا أعجبك محتوى مدونتنا نتمنى البقاء على تواصل دائم ، فقط قم بإدخال بريدك الإلكتروني للإشتراك في بريد المدونة السريع ليصلك جديد المدونة أولاً بأول ، كما يمكنك إرسال رساله بالضغط على الزر المجاور ...

جميع الحقوق محفوظة

تقنيات نور التعليمية