في هذا الدرس 3تصفّح المواضيع
HTML forms
النماذج في لغة HTML
HTML forms النماذج في لغة HTML
النموذج [HTML form] هو عنصر يُستخدم في صفحات الويب لجمع البيانات من المستخدمين وإرسالها إلى الخادم [server] لمعالجتها أو حفظها في قواعد البيانات.
يحتوي النموذج على عناصر إدخال خاصة [input وغيرها]، والتي تتيح للمستخدمين إدخال المعلومات المطلوبة.
- لا يسمح معيار HTML بتداخل عناصر form؛ وقد يتجاهل محلل المتصفح وسم النموذج الداخلي بدل إنشاء النموذج المتوقع.
يمكن أيضًا أن يقرأ JavaScript بيانات النموذج ويعالجها داخل الصفحة؛ وجود form وحده لا ينشئ خادم معالجة ولا يحفظ البيانات في قاعدة بيانات.
HTML form syntax
المثال يوضح طريقة كتابة عنصر النموذج [form] في لغة HTML.
<form>
</form>
HTML form Elements
العناصر داخل form في لغة HTML
HTML form Elements العناصر داخل form في لغة HTML
- <input>: يُستخدم لإنشاء حقل يسمح للمستخدم بإدخال بيانات من أنواع مختلفة، مثل النصوص أو الأرقام أو البريد الإلكتروني أو الملفات.
- <label>: عنصر يُستخدم لإضافة تسمية توضيحية مرتبطة بحقل إدخال، مما يساعد المستخدم على فهم الغرض من الحقل.
- <datalist>: يُستخدم لتوفير قائمة خيارات مقترحة يمكن للمستخدم الاختيار منها أثناء إدخال البيانات في حقل <input>.
- <select>: يُستخدم لإنشاء قائمة منسدلة تحتوي على مجموعة من الخيارات التي يمكن للمستخدم اختيار أحدها أو أكثر [عند تفعيل خاصية التحديد المتعدد].
- <option>: يُستخدم لتعريف خيار فردي ضمن قائمة الخيارات في <select> أو <datalist>.
- <textarea>: يُستخدم لإنشاء حقل لإدخال نص طويل متعدد الأسطر.
- <button>: يُستخدم لإنشاء زر يمكن للمستخدم النقر عليه لتنفيذ إجراء معيّن، مثل إرسال النموذج أو تشغيل أمر برمجي.
- <fieldset>: يُستخدم لتجميع مجموعة من الحقول المرتبطة ضمن النموذج، لتسهيل تنظيمها وعرضها بشكل واضح.
- <legend>: يُستخدم لإضافة عنوان أو تسمية توضيحية لمجموعة الحقول داخل عنصر <fieldset>.
- <output>: يُستخدم لعرض نتيجة عملية حسابية أو ناتج ما داخل النموذج.
- <optgroup>: يُستخدم لتجميع مجموعة من الخيارات تحت عنوان واحد داخل عنصر <select>.
HTML forms
عنصر form في لغة HTML
HTML forms عنصر form في لغة HTML
يُستخدم عنصر <form> في HTML لإنشاء مجموعة من حقول الإدخال [inputs] لجمع البيانات من المستخدمين وإرسالها إلى الخادم لمعالجتها أو تخزينها.
في المثال يرتبط label بالحقل حين تساوي قيمة for معرّف id، أما name فيحدد اسم القيمة المرسلة. داخل محرر التجربة يمكن تعديل الحقول وفحصها، لكن الإطار المعزول يمنع إرسال النموذج عبر الشبكة؛ الضغط على Submit هنا لا يعني أن خادمًا حفظ البيانات.
الإرسال في هذه المعاينة تجربة محلية؛ لا تُرسل البيانات إلى خادم.
جرّب بنفسكHTML form
مثال على استخدام حقول الإدخال [inputs] داخل نموذج [form] في HTML.
<!DOCTYPE html>
<html>
<body>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Mohamed"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Magdy"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات13
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 HTML Forms نماذج HTML
- للمراجعة
- 02 Forms نماذج
- للمراجعة
- 03 Login تسجيل دخول
- للمراجعة
- 04 Sign up اشتراك
- للمراجعة
- 05 User مستخدم
- للمراجعة
- 06 Server خادم
- <p><a href="https://www.closetag.com/tutorial/internet/servers">المزيد عن Server</a></p>
- للمراجعة
- 07 Element عنصر
- للمراجعة
- 08 Input حقل إدخال
- للمراجعة
- 09 Checkboxes مربع إختيار
- للمراجعة
- 10 Radio مربع إختيار دائري
- للمراجعة
- 11 Dropdown List قائمة منسدلة
- للمراجعة
- 12 Attribute سمة
- للمراجعة
- 13 Server-side جانب الخادم
- <p><a href="https://www.closetag.com/tutorial/internet/servers">المزيد عن Server-side</a></p>
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 HTML HTML
- Hypertext Markup Language
- لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
- للمراجعة
- 02 PHP PHP
- PHP, Hypertext Preprocesso
- لغة برمجة مفتوحة المصدر مستخدمة على نطاق واسع<p><a href="https://www.closetag.com/tutorial/php/php-introduction">المزيد عن PHP</a></p>
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.