http://www.boraqsoft.com/html-course...s/bsmallah.jpg
سنتعرف في درس اليوم على وسوم الـ
Forms و
Input وسيتم توضيح وظائفها في السطور التالية
وسم Form <form>
وهو وسم يستخدم لإنشاء حقول إدخال (Fields) أو أزرار اختيار (Buttons) لتمرير بعض البيانات إلى السيرفر المرتبط بالموقع لذلك فهو لابد وأن يرتبط بلغة برمجة مثل
PHP أو
ASP.NET حتى تتم عملية تمرير البيانات إلى السيرفر.
وهذه الحقول والأزرار تحتوي على عدة أشكال ، فمنها ما يحتوي على حقل نصي (Text field) ومنها ما يحتوي على كلمة سر (Password) ومنها ما يحتوي على أزرار اختيار (Checkboxes) أو (Radio Buttons) ومنها ما يحتوي على قوائم للاختيار من بينها (Select lists) وغير ذلك.
http://www.boraqsoft.com/html-course/images/divider.png وسم Input <input>
وهو الوسم الرئيسي داخل الـ
Form - ويلاحظ أنه من الوسوم الفارغة التي تتكون من وسم واحد فقط للفتح والإغلاق - فإذا أردت كتابة كود لعمل حقل إدخال أو زر اختيار ؛ فيجب كتابة وسم
<form> أولا ثم بداخله وسم
<input> ثم تحدد نوع حقل الإدخال أو زر الاختيار المطلوب من خلال سمة النوع
Type التي سنتناولها بالتفصيل كما يلي:
http://www.boraqsoft.com/html-course/images/divider.png الحقول النصية Text Fields
وتستخدم لعمل حقل إدخال لنص معين مثل "الاسم الأول" و"الاسم الأخير" على سبيل المثال كما في المثال التالي:
كود:
<form>
First name: <input type="text" name="firstname" />
<br />
Last name: <input type="text" name="lastname" />
</form>
النتيجة:
http://www.boraqsoft.com/html-course/images/11/01.jpg
يلاحظ في الكود السابق نوعين من الوسوم:
type: ويستخدم لتحديد نوع حقل الإدخال أو زر الاختيار.
name: ويستخدم لوصف الحقل أو الزر حتى يمكن العثور عليه بسهولة وتحديده بدقة في قاعدة البيانات المرتبطة بالسيرفر.
http://www.boraqsoft.com/html-course/images/divider.png حقول كلمة السر Password Fields
وتستخدم لكتابة كلمة سر وعند كتابتها تظهر الحروف والأرقام على شكل نقاط سوداء مستديرة لحماية الخصوصية والسرية.
كود:
<form>
Password: <input type="password" name="pwd" />
</form>
النتيجة:
http://www.boraqsoft.com/html-course/images/11/02.jpg http://www.boraqsoft.com/html-course/images/divider.png أزرار الاختيار Radio Buttons
وتستخدم لتقديم عدة اختيارات يجب اختيار خيار
واحد فقط من بينها.
كود:
<form>
<input type="radio" name="sex" value="male" />Male
<br />
<input type="radio" name="sex" value="female" />Female
</form>
النتيجة:
http://www.boraqsoft.com/html-course/images/11/03.jpg
ويلاحظ وجود سمة إضافية (Attribute) وهي
value http://www.boraqsoft.com/html-course/images/divider.png صناديق الاختيار Checkboxes
وهي على عكس
Radio Buttons فهي تسمح باختيار أكثر من خيار في نفس الوقت وأحيانا عدم اختيار أي خيار.
كود:
<form>
<input type="checkbox" name="vehicle" value="Bike" />Football
<br />
<input type="checkbox" name="vehicle" value="Car" />Running
<br />
<input type="checkbox" name="vehicle" value="Car" />Bicycling
<br />
<input type="checkbox" name="vehicle" value="Car" />Swimming
</form>
النتيجة:
http://www.boraqsoft.com/html-course/images/11/04.jpg http://www.boraqsoft.com/html-course/images/divider.png زر التقديم Submit Button
ويستخدم لتقديم بيانات معينة إلى صفحة محددة يتم تعيينها من خلال أحد سمات وسم
Form وهو
action والتي تقوم بإرسال هذه البيانات إلى هذه الصفحة عند الضغط على زر
submit كود:
<form name="input" action="http://www.boraqsoft.com/" method="get" />
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
النتيجة:
http://www.boraqsoft.com/html-course/images/11/05.jpg
ويلاحظ أننا استخدمنا وسمي
input أحدهما لحقل الإدخال والآخر لزر
submit وذلك غير السمات الملحقة بوسم
form ذاته وهي
name و
action و
method http://www.boraqsoft.com/html-course/images/divider.png وسم Select <select>
وهو مشابه لوسم
<input> ويستخدم عند الرغبة في إنشاء قائمة منسدلة لاختيار أحد الخيارات من بينها
قائمة الاختيار Select list
وهي قائمة مكونة من عدة اختيارات يقوم المستخدم باختيار أحدها ويندرج كل خيار منها تحت وسم
<option> كما في المثال التالي:
كود:
<form action="">
<select name="cars">
<option value="renault">Renault</option>
<option value="mercedes">Mercedes</option>
<option value="toyota">Toyota</option>
<option value="hyundai">Hyundai</option>
</select>
</form>
النتيجة:
http://www.boraqsoft.com/html-course/images/11/06.jpg http://www.boraqsoft.com/html-course/images/divider.png
هذه هي أهم وسوم الـ
Forms الشائعة الاستخدام ، وتوجد وسوم أخرى لها استخدامات متعددة سنضرب أمثلة لها وسأترك لك فهم وظيفتها بنفسك !
كود:
<textarea rows="10" cols="30">
Boraqsoft is a company that gives many web solutions.
</textarea>
http://www.boraqsoft.com/html-course/images/divider.png كود:
<form action="">
<input type="button" value="Click Here !" />
</form>
http://www.boraqsoft.com/html-course/images/divider.png كود:
<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30">
<br />
E-mail: <input type="text" size="30">
<br />
Date of birth: <input type="text" size="10">
</fieldset>
</form>
http://www.boraqsoft.com/html-course/images/divider.png كود:
<form action="MAILTO:boraqsoft@gmail.com" method="post" enctype="text/plain">
Name:
<br />
<input type="text" name="name" value="your name">
<br />
E-mail:
<br />
<input type="text" name="mail" value="your email">
<br />
Comment:
<br />
<input type="text" name="comment" value="your comment" size="50">
<br />
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
