مربع النص
نقوم بوضع مربع النص كما ذكرنا سابقا، باستخدام الوسم input مع تغيير الخاصية type له إلى القيمة text، ويمكننا وضع أي محتويات ابتدائية نريدها فيه عن طريق الخاصية value له، ويمكن أيضا التحكم بحجمه عن طريق الخاصية size، لتحديد طول المربع الذي نريده.
|
||
| <form ACTION="mailto:عنوان البريد الإلكتروني هذا محمي من روبوتات السبام. يجب عليك تفعيل الجافاسكربت لرؤيته." METHOD="get" ENCTYPE="text/plain">
Name:<input type="text" size="10" name="Name"> Email : <input type="text" size="10" name="email">
URL :<input type="text" size="10" name="url" value="http://">
<input type="submit" value="Send"> </form> |
مربع الإختيار
وهو يوضع بالوسم input أيضا بتحديد الخاصية type لها عند القيمة checkbox، ويمكن بالمعلومات التي سيتم إرسالها عن طريق الإسم بالخاصية name والقيمة بالخاصية value فيمكننا مثلا أن نجعل النموذج يرسل المعلومة do=subscribe إذا قام المستخم باختيار أحد مربعات الخيار، وذلك بضبط الخاصية name له عند القيمة do والخاصية value له عن القيمة subscribe، وعند عدم اختيار مربع الخيار فلن يتم إرسال أي شيء يتعلق به. أي أنه مثل النوع hidden إلا المستخدم هنا يحدد فقط إذا كانت المعلومة سترسل أو لا.
|
Subscribe.
|
<"form action="echo.pl" method="get>
<input type="checkbox" name="do" value="subscribe"> Subscribe.<br>
<input type="submit" value="Send">
</form>
|
الإختيار من متعدد
يمكنك عمل دوائر الإختيار من متعدد بواسطة وسوم input بحيث تضبط خاصيتها type عند القيمة radio، ولعمل مجموعة من الوسوم التي يجب على المستخدم اختيار أحدها قم بعمل وسم input لكل واحد منها واجعل قيمة الخاصية name متساوية فيها جميعا مع تغيير قيمة الخاصية value في كل منها، فيكون عندنا نيابة عن جميع هذه الأزرار معلومة واحدة اسمها يحدد بالقيمة name وقيمتها حسب قيمة الخاصية value للزر الذي تم اختياره.
|
Age : 10-17 18-50 51-100 |
<form action="echo.pl" action="get">
<Age : <br
<input type="radio" name="age" value="17"> 10 - 17<br>
<input type="radio" name="age" value="50"> 18 - 50<br>
<input type="radio" name="age" value="100"> 51 - 100<br>
<input type="submit" value="Send">
</form>
|
تلاحظ من المثال السابق أنك تستطيع فقط اختيار Age واحد من القائمة لأن نماذج أعلاه لها نفس الإسم name.
القائمة
عند تكوين القائمة نقوم أولا بوضع وسم القائمة select ونعين له خاصية name التي ستظهر في النموذج، وبعد ذلك نقوم بوضع عدة وسوم option لكل منها خاصية value وعند إرسال البيانات سيتم إرسال المعلومة التي إسمها موجود في الخاصية name من الوسم select وقيمتها موجودة في الخاصية value من الوسم option الذي تم اختياره.
|
|
<form action="echo.pl" method="get">
<select name="ville">
<option value="kw">CASABLANCA
<option value="sa">RABAT
<option value="ua">FES
<option value="qt">AGADIR
<option value="bh">MARRAKECH
<option value="om">TANGER
</select>
<input type="submit" value="Send">
</form>
|
مربع النص متعدد الأسطر
ويمسى أيضا بالمساحة النصية Textarea، وهو عبارة عن وسم textarea مزدوج (فتح وإغلاق) وبينهما تضع المحتويات التي تريدها أن تظهر داخل المربع، وهو يستخدم غالبا مع النماذج التي ترسل معلوماتها بالطريقة post لأنه يستخدم لإرسال كمية كبيرة من البيانات. يمكنك التحكم في عدد الأسطر بالخاصية rows وعدد الأحرف في كل سطر بالخاصية cols (عدد الأعمدة).
|
<form action="echo.pl" method="get"> <textarea name="message" rows="2" cols="20"> أتمنى لك أن تستفيد من هذه الدروس <input type="submit" value="Send"> </form> |