الدرس: إنشاء نماذج بلغة HTML

نواتج التعلّم

• التعرّف على مفهوم النماذج (Forms) في HTML.
• معرفة وسم <form> وخصائصه.
• استخدام حقول الإدخال <input> بأنواعها المختلفة.
• شرح خصائص label و for.
• معرفة وسم fieldset و legend.
• إنشاء نموذج شامل.

ما هو النموذج (Form)؟

النموذج هو وسيلة تتيح للمستخدم إدخال بيانات ليتم إرسالها إلى الخادم.

وسم النموذج <form>

يجمع الحقول ويحدد وجهة الإرسال.

خاصية action

تحدد الصفحة التي تستقبل البيانات:

<form action="save.php">

خاصية method

<form method="post">

<form action="save.php" method="post">
  <input type="text" placeholder="اسمك">
  <button type="submit">إرسال</button>
</form>

أنواع حقول الإدخال <input>

<input type="text">

<input type="password">

<input type="email">

<input type="number">

<input type="checkbox">

<input type="radio" name="g">

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

<label for="email">البريد</label>
<input id="email" type="email">

حقل نص طويل <textarea>

<textarea rows="5"></textarea>

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

<select>
  <option>الرياض</option>
  <option>جدة</option>
</select>

وسوم fieldset و legend

fieldset يجمع الحقول في إطار واضح والـ legend يضيف عنواناً لهذا القسم ليساعد المستخدم على الفهم.

<fieldset>
  <legend>المعلومات الشخصية</legend>
  <label>الاسم:</label>
  <input type="text">
</fieldset>

نموذج متكامل

<form>
  <label>الاسم:</label>
  <input type="text">
  <label>الإيميل:</label>
  <input type="email">
  <textarea rows="4"></textarea>
  <button type="submit">إرسال</button>
</form>

مثال شامل

<form action="send.php" method="post">
<fieldset>
  <legend>البيانات الشخصية</legend>
  <label for="nn">الاسم:</label>
  <input id="nn" type="text">
</fieldset>
<input type="submit" value="إرسال النموذج">
</form>

قيّم نفسك

1. ما وسم تجميع الحقول؟
   • <form>
   • <input>
2. أي خاصية تحدد نوع الحقل؟
   • type
   • name