نواتج التعلّم
- التعرّف على مفهوم النماذج (Forms) في HTML.
- معرفة وسم
<form> وخصائصه.
- استخدام حقول الإدخال
<input> بأنواعها المختلفة.
- شرح خصائص label و for.
- معرفة وسم fieldset و legend.
- إنشاء نموذج شامل.
ما هو النموذج (Form)؟
النموذج هو وسيلة تتيح للمستخدم إدخال بيانات ليتم إرسالها إلى الخادم.
ما الموضوع الرئيس في هذا الجزء؟
أي خيار يرتبط مباشرة بمحور «ما هو النموذج (Form)؟»؟
أي عبارة صحيحة وفق شرح هذا المحور؟
الهدف من دراسة «ما هو النموذج (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>
ما الموضوع الرئيس في هذا الجزء؟
أي خيار يرتبط مباشرة بمحور «وسم النموذج <form>»؟
أي عبارة صحيحة وفق شرح هذا المحور؟
الهدف من دراسة «وسم النموذج <form>» هو:
أنواع حقول الإدخال <input>
Text
يستخدم لإدخال نصوص قصيرة مثل الاسم أو اسم المستخدم. يسمح بكتابة أي نص.
<input type="text">
Password
يُستخدم لإدخال كلمات المرور. يخفي المدخلات بنقاط حماية.
<input type="password">
Email
لإدخال بريد إلكتروني بصيغة صحيحة، ويتحقق المتصفح من صحة الشكل.
<input type="email">
Number
لإدخال أرقام فقط ويمكن تحديد حدود دنيا وعليا.
<input type="number">
Checkbox
<input type="checkbox">
Radio
<input type="radio" name="g">
Submit
<input type="submit" value="إرسال">
وسم label وخاصية for
<label for="email">البريد</label>
<input id="email" type="email">
ما الموضوع الرئيس في هذا الجزء؟
أي خيار يرتبط مباشرة بمحور «أنواع حقول الإدخال <input>»؟
أي عبارة صحيحة وفق شرح هذا المحور؟
الهدف من دراسة «أنواع حقول الإدخال <input>» هو:
حقل نص طويل <textarea>
<textarea rows="5"></textarea>
ما الموضوع الرئيس في هذا الجزء؟
أي خيار يرتبط مباشرة بمحور «حقل نص طويل <textarea>»؟
أي عبارة صحيحة وفق شرح هذا المحور؟
الهدف من دراسة «حقل نص طويل <textarea>» هو:
قائمة منسدلة <select>
<select>
<option>الرياض</option>
<option>جدة</option>
</select>
ما الموضوع الرئيس في هذا الجزء؟
أي خيار يرتبط مباشرة بمحور «قائمة منسدلة <select>»؟
أي عبارة صحيحة وفق شرح هذا المحور؟
الهدف من دراسة «قائمة منسدلة <select>» هو:
وسوم fieldset و legend
fieldset يجمع الحقول في إطار واضح والـ legend يضيف عنواناً لهذا القسم ليساعد المستخدم على الفهم.
<fieldset>
<legend>المعلومات الشخصية</legend>
<label>الاسم:</label>
<input type="text">
</fieldset>
ما الموضوع الرئيس في هذا الجزء؟
أي خيار يرتبط مباشرة بمحور «وسوم fieldset و legend fieldset يجمع الحقول في إطار واضح والـ legend يضيف عنواناً لهذا القسم ليساعد المستخدم على الفهم.»؟
أي عبارة صحيحة وفق شرح هذا المحور؟
الهدف من دراسة «وسوم fieldset و legend fieldset يجمع الحقول في إطار واضح والـ legend يضيف عنواناً لهذا القسم ليساعد المستخدم على الفهم.» هو:
نموذج متكامل
<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>
ما الموضوع الرئيس في هذا الجزء؟
أي خيار يرتبط مباشرة بمحور «مثال شامل»؟
أي عبارة صحيحة وفق شرح هذا المحور؟
الهدف من دراسة «مثال شامل» هو: