ما هي النماذج في HTML؟
النماذج (Forms) تُستخدم لجمع البيانات من المستخدم، مثل: تسجيل الدخول، إرسال رسالة، ملء استبيان…
وتتكون من مجموعة من حقول الإدخال (Input Fields) مثل النصوص، الأزرار، الخيارات… إلخ.
الوسم الأساسي: <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>، وأساس تقسيم الهيكل العام لصفحات الويب.
