صفحة البيت | מס טלפון 04 – 6046227 | מס' פקס 04 – 8303539 | ת.ד 2213

بايثون – פיתון – python

موقع كتابة الكود repl.it | بيئة الرسم بالسلحفاة | codingGround

عنصر الــ form (النموذج) في html

تمهيد

حتى الآن تعاملنا مع صفحات ثابتة (static) التي تعرض معلومات بدون امكانية اجراء أي معالجة من قبل الزائرين.

سوف نقوم في الدروس القادمة بإنشاء صفحة ويب تفاعلية (dynamic) التي تستطيع من خلالها إدخال بيانتك الشخصية وذلك من خلال إنشاء نموذج (form) كما بالشكل المقابل.

بدل كلمة نموذج سوف نستعمل أحيانا كلمة فورم (form)

النموذج - form

· النموذج (form) هو كائن يتم إنشائه ووضعه على صفحة الويب.

هو يأخذ قسماً (جزءً) من مساحة صفحة الويب.

· من خلال النموذج يمكن إضافة مجموعة عناصر (ادوات) لصفحة الويب، مثل أزرار أو حقول تُتيح للمُستخدم إدخال البيانات بهدف إرسالها لموقع ويب ليتم تخزينها.

· هذه الأدوات تعتبر أنواع من مدخلات المستخدم.

· في حقول الـنموذج (form) نضع بيانات النموذج، مثلاً معلومات عن المستخدم.

الـنموذج (form) يمكننا من إنشاء صفحة ويب تفاعلية (dynamic) لإدخال البيانات الشخصية والتفاعل معها.

(يتم كتابة الأكواد في أحد برامج تحرير النصوص مثل ++NOTEPAD)

انشاء نموذج – form

يحدد عنصر الــ <form> كائن من نوع "نموذج" الذي يُمكن من خلاله الحصول على أنواع مختلفة من المُدخلات من قِبل المستخدم.

<form> … </form>

· قمنا بإنشاء نموذج باسم form1

· تم الإعلان عن اسم النموذج باستخدام الخاصية name

· عند تشغيل هذا الكود فإنك لن ترى شيء، سترى صفحة بيضاء، لأننا لم نضع أي أداة حتى الآن.

<body>

<form name="form1">

هنا نضع عناصر النموذج

</form>

</body>

سنتطرق فيما يلي إلى أدوات النموذج.

أدوات النموذج - حقول وأزرار

إضافة أداة إدخال

إنشاء أو بناء أداة إدخال على الفورم

<form>

<input type="نوع الاداة">

</form>

· الأمر <form> </form> يُستخدم لإنشاء وتحديد، النموذج.

· الأمر <input type="...">

هو الكود الأساسي لعمل حقل إدخال لصفحة الويب وله عدة انواع.

o الكود input هو المسؤول عن إضافة الأدوات على صفحة الويب.

من خلاله يمكن إضافة أنواع مختلفة من الأدوات.

o يتم تحديد نوع الأداة من خلال الخاصية type (نوع).

وهي تأخذ قيم مختلفة بحسب نوع الأداة.

إضافة حقل نص – text box

حقل إدخال بيانات (قيم) نصية - صندوق نص

(من لوحة المفاتيح)

<form>

<input type="text">

</form>

مثال:

يتيح لزائر الصفحة ادخال بيانات نصية، عن طريق الكتابة من خلال لوحة المفاتيح.

<form>

type your name:

<input type="text">

</form>

بواسطة placeholder ممكن وضع نص توضيحي في الحقل

<form>

type your name:

<input type="text" placeholder="ادخل اسمك" >

</form>

سنحصل على:

تمرين

صمم نموذج به حقلان:

حقل لإدخال الاسم وحقل لإدخال العمر (عدد بالسنوات الصحيحة، مثلا 15)

الحل:

المخرج الناتج بعد حفظ الصفحة بامتداد html

وعرضها في المتصفح:

· لاحظ نوع حقل الإدخال input

<html>

<head>

<title> نموذج </title>

<meta charset="utf-8">

</head>

<body dir="rtl">

<form>

الاسم

<input type="text">

<br/> <br/>

العمر بالأرقام

<input type="text">

<br/> <br/>

</form>

</body>

إضافة حقل كلمة المرور – password box

مخصص لإدخال كلمة المرور

حقل إدخال كلمة المرور (كلمة السر) – password

محتواه يكون مخفي - تظهر نجمات

<form>

<input type="password">

</form>

مثال:

يتيح لزائر الصفحة ادخال كلمة المرور، عن طريق الكتابة من خلال لوحة المفاتيح.
تظهر نجمات بهدف إخفاء كلمة المرور الحقيقية.

<form>

type your password:

<input type="password">

</form>

مثال:

<form id="myForm" name="myForm">

name:

<input type="text" id="myname" size="8" value="text">

<br>

pass:

<input type="password" id="mypass" value="pass">

<br>

</form>

الشكل الناتج:

(ب)

زر الاختيار الأحادي – radio

כפתורי רדיו – radio

تم تصميم أزرار الاختيار radio لتحديد زر واحد فقط من المجموعة.

إضافة زر إختيار بديل واحد – radio

<form>

<input type="radio">

</form>

مثال:

زر اختيار بديل واحد فقط – لتحديد النوع ذكر أو أنثى

يتيح لزائر الصفحة تحديد واختيار شيء واحد من بين عدة إمكانيات.

لإجبار المستخدم على اختيار بديل ولحد فقط نستخدم الخاصية name

<form>

:النوع

ذكر:

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

أنثى:

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

</form>

بما اننا سوف نختار واحد من الاختيارات المسجلة، لذلك يجب إعطاء جميع أدوات الــ radio اسم موحد (نفس الاسم)

مثال:

<form>

Mail: <input type="radio" name="rd">

Female: <input type="radio" name="rd">

</form>

الخاصية checked تحدد وتفعل الأداة (تكون عليها علامة ü)

<input type="radio" name="rd" checked>

مثال:

name: لإعطاء اسم لمجموعة

value: القيمة التي سيتم إرسالها (نقلها، submitted) إذا تم اختيارها (if checked)

align: لمحاذاة الحقل

tabindex=checked: ترتيب الــ Tap للحقل.

<form name="myForm">

gender: <br>

female <input type="radio" name="gh" id="gF"

checked="checked"> <br>

Male <input type="radio" name="gh" id="gM"> <br>

Other <input type="radio" name="gh" id="gO"> <br>

</form>

نذكر مرة أخرى:

إذا أعطينا لجميع الأزرار نفس الاسم، مثلاً name="gh"، عندها يمكن اختيار واحد منهم فقط.

تمرين:

(أ) أكمل الأماكن الناقصة

صمم نموذج به الأدوات:

· حقل كلمة السر

· زران من نوع radio

لتحديد النوع: ذكر أو أنثى.

تمعن في الشكل المعطى:

<body>

<form>

ادخل كلمة السر

<input type="password">

<br/><br/>

النوع <br/>

ذكر

<input type="radio">

<br/><br/>

انثى

<input type="radio">

</form>

</body>

(ب)

في هذا الكود من المفترض ان يكون فعالاً ومنشطا فقط زر radio واحد (اختيار بديل واحد)

ولكن تم تنشيط الاختيارين (ذكر وأنثي).

كيف ستقوم بإصلاح هذا ؟ استخدام الخاصية name

الحل:

أكمل الأماكن الناقصة:

نعدل الكود الأخير (المتعلق بزر radio) بإضافة الخاصية name

واعطائهم نفس الاسم (سميناهم gen).

ذكر

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

<br/><br/>

انثى

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

إضافة أزرار إختيار من متعدد – checkbox

תיבות סימון

زر لاختيار أكثر من بديل – checkbox

مثال:

<form>

<input type="checkbox">

</form>

مثال:

يستخدم مثلا لتحديد اللغات التي تجيدها.

يتيح لزائر الصفحة تحديد أكثر من اختيار.

<form>

اللغات التي تجيدها: <br><br>

العربية:

<input type="checkbox">

الانجليزية:

<input type="checkbox">

العبرية:

<input type="checkbox">

</form>

بما اننا قد نختار أكثر من إمكانية، من الاختيارات المسجلة، لذلك نضع لها أسماء مختلفة (وليس اسم موحد كما في أداة الــ radio)

مثال:

Arabic: <input type="checkbox" name="chk1">

English: <input type="checkbox" name="chk2">

مثال:

<form id="myForm" name="myForm">

gender: <br>

female <input type="checkbox" id="gndr_f"< <br>

male <input type="checkbox" id="gndr_m"> <br>

other <input type="checkbox" id="gndr_o"> <br>

</form>

سؤال:

حدد نواع الأداة لكل مما يلي:

(أ) تعيين نوع المولود: ذكر أو أنثى.

(ب) تحديد اللغة التي تعرفها: عربي / انجليزي/ عبري / فرنسي

الحل: (أ) radio (ب) checkbox

(ج)

صندوق النص الطويل - textarea

صندوق النص من نوع textarea

<form>

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

</form>

إضافة قائمة منسدلة (Drop-down menu)

בחירה - תיבה נפתחת (תיבה נגללת)

مخصصة لاختيار أكثر من إمكانية من قائمة منسدلة.

إمكانيات الوسم select (قائمة منسدلة)

· Name (أو id): إعطاء اسم للحقل،

· Size: عناصر مكشوفة في القائمة.

· Multiple: يسمح باختيار عدة إمكانيات إذا yes – نعم.

· ويوجد أيضاً: disabled, onFocus, onChange, onBlur

إمكانيات الوسم option (عناصر مستقلة من القائمة)

· value: القيمة التي ستُنقل (submitted) إذا تم اختياره (checkedif )

· label: النص التابع للعنصر الذي يُعرض في القائمة.

· selected: الوضع الافتراضي لاختيار عنصر من القائمة.

· Align: لمحاذاة الحقل

· title, onClick, onChange وأخرى ...

<form id="myForm" name="myForm">

Days of the week: <br/>

<select name="hall" id="hall">

<option disabled selected>Choose here</option>

<option value="1"> One </option>

<option value="2"> Two </option>

<option value="3" disabled > Three </option>

<option value="4"> Four </option>

<option value="5"> Five </option>

</select>

</form>

· يمكن أن نكتب: selected="selected" أو فقط selected

(د)

إنشاء وتكوين الأزرار:

إضافة زر لتشغيل دالة – button

<form>

<input type="button" value="النص الظاهر على الزر">

</form>

مثال:

سيظهر الزر

<form>

<input type="button" value="go">

</form>

مثال:

الزر يقوم بالعديد من الوظائف التي نقوم بتحديدها من خلال كتابة الكود لدالة معينة.

<form>

<input type="button" value="go" onclick="mycountry()">

</form>

مثال:

<form id="myForm" name="myForm">

<input type="button" id="check" value="submit"

onClick="checkGuess()">

בועת דיבור: מלבן עם פינות מעוגלות: النص الظاهر على الزر </form>

· يمكن إضافة خصائص onClick على عناصر كثيرة، مثل الصور img، الفقرة، الجدول.

صفة مشابهة هي onMouseOver

زر ارسال بيانات النموذج - submit

إضافة زر إرسال بيانات - submit

<form>

<input type="submit">

</form>

يقوم بإرسال بيانات النموذج لصفحة أخرى بإضافة الخاصية action الخاصة بالــ form

<form action="data.php">

<input type="submit" value="go">

</form>

عند النقر عليه يتم الانتقال للصفحة data.php حيث يتم استقبال البيانات ومعالجتها. بواسطة كود هذه الصفحة.

زر حذف (مسح) بيانات النموذج - reset

إضافة زر مسح البيانات – reset

يقوم بمسح (حذف) البيانات المُدخلة في حقول النموذج وإرجاع الأدوات إلى الوضع الافتراضي لها والعودة من البداية.

<form>

<input type="reset">

<form>

النص الظاهر على الزر هو "reset" (أو نص آخر، وهو يتحدد حسب برنامج التشغيل)

يمكن تغيير هذا النص بواسطة الخاصية value:

<form>

<input type="reset" value="النص الظاهر على الزر">

</form>

الاختلاق بين الأزرار

الزر: <input type="button">

مقابل الزر: </button> ... <button>

كلا الزران متشابهان كثيراً ولكن يوجد اختلاف بينهما

· كلاهما تم تخصيصهم للاتصال والتعامل مع لغة JS.

· كلاهما وسوم html، لا يسمح بكتابتهما بين اكواد <script> </script>

زر button مع أداة الادخال input:

المبنى: <input type="button" value=" ">

· الأمر يقوم بأنشاء زر ينتمي للنموذج (form).

· لا يوجد له وسوم إغلاق.

· الخاصية value هي التي تبني النص الظاهر على الزر.

· الزر يختلف في الوظيفة عن زر submit، فهو لا يرسل أو ينقل بيانات النموذج.

خصائص مستعملة:

value, name, onClick, disabled, hidden, checked, title...

وسم الزر <button>

المبنى: </button> نص الزر <button>

· الزر ليس له علاقة بالنموذج.

· يوجد له وسم إغلاق.

· النص الظاهر على الزر يقع بين الوسوم.

بسبب مبناه الخاص، يمكن أن يُستعمل في الصورة، والرابط والفقرات.

خصائص مستعملة… id, name, onClick, disabled, hidden, title,

كلا الزران التاليان متكافئان في الوظيفة:

א.

<form>

<input type="button" value="Click me"

onclick="myFunction">

</form>

ב.

<button onclick="myFunction"> Click me </button>

(ه)

تمرين:

مشروع أخير

نريد بناء نموذج بالشكل التالي:

الحل:

<html>

<head>

<title> أدوات النموذج </title>

</head>

<body dir=rtl>

بيانات تسجيل الطالب <br><br><br>

<form>

الأسم: <input type="text" > <br><br><br>

تاريخ الميلاد: <input type="text" > <br><br><br>

كلمة السر: <input type="password"> <br><br><br>

النوع: ذكر: <input type="radio" name="r1">

أنثى : <input type="radio" name="r1"><br><br>

اللغات التي تجيدها: <br><br>

العربية: <input type="checkbox">

الانجليزية: <input type="checkbox">

العبرية: <input type="checkbox">

</form>

</body>

</html>

تذكر أن

النموذج form:

من خلاله يمكنك إضافة مجموعة عناصر لصفحة الويب منها أزرار أو حقول بغرض إرسالها إلى موقع الويب بغرض لموقع الويب لتخزينها.

صندوق النص text:

يتيح لزائر الصفحة إدخال بيانات نصية عن طريق الكتابة داخل الصندوق من خلال لوحة المفاتيح.

dont-forget-smiley-free-images-at-clker-com-vector-clip-art-online-Bn9uwW-clipart.png

حقل كلمة المرور password:

يظهر الرمز * عند الكتابة بداخله وذلك لإخفاء كلمة السر الحقيقية

زر اختيار بديل واحد radiobutton:

يسمح لك باختيار بديل واحد فقط من عدة بدائل.

من امتحانات المفتش العام (المفمار)

سؤال 3 (مثال لـ امتحان مفمار، سؤال 3، 2014)

أمامكم مقطع كود:

<html> <body dir="rtl">

<form >

AA: <input type="text" id="b0" name="b0"

value=" כתוב כאן "/> <br />

BB: <input type="checkbox" id="b1" name="b1"

checked="checked"/> <br />

CC: <input type="checkbox" id="b2" name="b2"/> <br/>

DD: <input type="checkbox" id="b3" name="b3"/> <br/>

</form>

</body> </html>

كيف ستعرض صفحة الانترنت. اختاروا الإجابة الصحيحة:

الحل: (ج)

سؤال 2 (امتحان مفمار، سؤال4، 2015)

الملفاتsecret.html, doSomthing.html, ma.html

والصورة 10.jpg موجودة بنفس المُجلد.

أمامكم كود الاصل للصفحة ma.html :

<table border=1>

<form>

<input type="radio" id ="Java" value ="Java"/>

Java <br/>

<input type="text" id ="Python" value ="Python"

size="4"/> Python <br/>

</form>

</td></tr>

<img src="10.jpg" alt="secret.html" />

</a>

</td></tr>

<a href="secret.html">doSomthing.html</a></br>

</td></tr>

</table>

أ. كيف ستُعرض الصفحة في المُتصفح؟ اختاروا الإجابة الصحيحة:

أ)

ج)

ب)

د)

الحل: ( أ )

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ب. هل من الممكن الوصول من الصفحة ma.html للصفحة doSomthing.html ؟

أ)	نعم، عند النقر على النص doSomthing.html
ب)	نعم، عند النقر على الصورة.
ج)	نعم، عند النقر على الكلمات secret.html
د)	لا يمكن الوصول للصفحة المطلوبة من الصفحة ma.html

الحل: (ب )

مدرسة قفطان حلبي الإعدادية – دالية الكرمل - Copywrite – 2021