تعلم لغة html: الاستمارات Forms

تعلم لغة html: الاستمارات Forms

استمارات html هي مربعات يتم ملئها أو عن طريقها يقوم الزائر بخيارات. اثناء تسجيلك في فيس بوك مثلا، طلب منك نوع جنسك هل أنت ذكر أم أنثى وهذا نوع من الاستمارات.

درس الاستمارات بالفيديو


الاستمارات تحتوي على مجموعة من العناصر وهي:

الكود:
<form action="http://www.fofoly.com" method="get">
<p>هنا يتم وضع الاعدادت الخاصة بالاستمارة</p>
</form>


وسم الفتح <form ووسم الغلق </form>

الفعل action

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

الطريقة method

الاستمارات يتم ارسالها باستعمال طريقتين:

تحصيل  get: للمعلومات القصيرة وعندما لا يتم ارسال اية معلومات للخادم
ارسال post: للمعلومات الطويلة كارسال صور لخادم أو حذف أي شيء من قاعدة بيانات.
الهوية id: سنتعرف على هذا العنصر في درس لا حق، وتستعمل للتفريق بين الاستمارة وبقية عناصر الصفحة.


استعمالات وأنواع الاستمارات

اضافة نص Text input

اي استمارة يجب أن تحتوي على عنصر <input  اي إدخال
ثم يتم تحديد نوع المعلومة باستعمال عنصر آخر وهو Type
الاسم Name يساعد كذلك في تحديد أكثر دقة لنوع المعلومة هل هي اسم مستخدم، أم كلمة مرور..
ثم الحد الأقصى لطول المعلومة maxlength

 الكود
<form acion="http://www.folfoly.com">
<p>الإسم:
<input type="text" name="username" size="15" maxlength="10"/>
</p>
</form>

النتيجة

الإسم:


ادخال كلمة مرور Password input

نفس الشيء بالنسبة للنص مع تغيير  النوع والاسم ل  password
الكود
<form acion="http://www.folfoly.com">
<p>الإسم:
<input type="password" name="password" size="15" maxlength="10"/>
</p>
</form>

النتيجة
كلمة المرور:


مساحة نصية Textarea

لاضافة نصوص مثل فقرة أو غير ذلك..
الكود

<form action="http://www.folfoly.com">
<p>لماذا ترتيد تعلم تصميم المواقع؟</p>
<textarea name="comments" cols="20" rows="4">أترك جوابك...</textarea>
</form>

النتيجة
لماذا تريد تعلم تصميم المواقع؟


تم استعمال خاصيتي cols و rows للتحكم في العرض والطول الخاصين بصندوق النص، وهي طريقة قديمة. سنرى في css كيفية التحكم في طول وعرض صندوق ادخال النص.

ازرار الراديو Radio Buttons

تستعمل لاعطاء خيارات للزائر يقوم بتحديد واحد منها فقط.
Input
"Type="radio
Name
الاسم Name يتم ارساله للخادم مع قيمته value . اسم الخاصية يجب أن يكون نفسه في جميع الازرار
القيمة value  تحدد نوع المعلومة، كل زر يجب ان تكون قيمته مختلفة حتى يستطيع الخادم التفريق بينها.

الكود
<form action="http://www.folfoly.com">
<p>ما هو لونك المفضل؟
<br/>
<input type="radio" name="color" value="الأحمر"/> الأحمر
<input type="radio" name="color" value"الأصفر"/> الأصفر
</p>
</form>

النتيجة

ما هو لونك المفضل؟
الأحمر الأصفر

المربع Checkbox

<input>
"Type="checkbox
تعطي للزائر إمكانية تحديد أكثر من خيار واحد
Name
الاسم Name يتم ارساله للخادم مع قيمته value . اسم الخاصية يجب أن يكون نفسه في جميع الازرار
القيمة value  تحدد نوع المعلومة، كل زر يجب ان تكون قيمته مختلفة حتى يستطيع الخادم التفريق بينها
الكود
<form action="http://www.folfoly.com">
<p>ما هو لونك المفضل؟
<br/>
<input type="checkbox" name="color" value="الأحمر"/> الأحمر
<input type="checkbox" name="color" value"الأصفر"/> الأصفر
</p>
</form>

النتيجة

ما هو لونك المفضل؟
الأحمر الأصفر

مربع الائحة المنسدلة  Drop Down Li st Box

select
يسمح للزوار باختيار خيار واحد من لائحة منسدلة.
Name
الاسم Name يتم ارساله للخادم مع قيمته value المرافقة له .
 <option>
الخيار المتاح أمام الزائر يبدأ بوسم وينتهي بوسم
القيمة value  تحدد نوع المعلومة، كل زر يجب ان تكون قيمته مختلفة حتى يستطيع الخادم التفريق بينها.

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

الكود
<form action="http://www.folfoly.com">
<p>ما هو لونك المفضل؟</p>
<select name="colors">
<option value="الأحمر">الأحمر</option>
<option value="الأصفر">الأصفر</option>
</select>
</form>

النتيجة

ما هو لونك المفضل؟

يمكن السماح للزوار باختيار خياراين اثنين أو أكثر باضافة خاصية multiple ل عنصر select كما يلي
<select name="colors" multiple="multiple">

مربع اضافة ملف File Input Box

يسمح للزوار باضفة ملف مثل صورة، مقطع صوتي...
<input>
"Type="file
عندما ينقر الزائر على Browse  يتم فتح نافذة لكي يجد الملف الذي يريد رفعه. 
زر الارسال Submit Button
<input>
"Type="submit
Value
قيمة النص الذي يكتب بداخل الزر (ارسل، سجل..)

الكود
<form action="http://www.folfoly.com" method="post">
<p>اضف صورتك هنا:</p>
<input type="file" name="image"/><br/>
<input type="submit" value"رفــع"/>
</form>


 النتيجة

اضف صورتك هنا:




يمكن كذلك استعمال صورة عوض نص في الزر كما يلي
  "Type="image  مع اضافة رابط الصورة:

<input type="image" src="images/subscribe.jpg" width="100" height="20" />

راجع درس الصور لمعرفة طريقة اضافة صورة.


الميزة Label

هذه الخاصية تساعد ضعاف البصر لأنه يمكن النقر فوق الأسم لتحديد المربع وليس بالضرورة المربع نفسه.
For  يلعب دور تحديد عنصر التحكم وعلاقته بالميزة الخاصة به. لدينا
"id="femal (راجع درس id)
 ثم for="female"  يعني هذه الميزة هي خاصة ب جنس الأنثى.

<label><input type="text" name="العمر"/>العمر</label>
<br/>
الجنس:
<input id="female" type="radio" name="الجنس" value="f">
<label for="female">أنثى</label>
<input id="male" type="radio" name="الجنس" value="m">
<label for="male">ذكر</label>

النتيجة


الجنس:

القرق بين هذه الازرار والتي رايناها سابقا، هي أنه يمكن النقر فوق الكلمة ويتم التحديد.

جمع عناصر استمارة  Elements Grouping Form


<fieldset>
يمكن جمع مجموعة عناصر داخل  ، تكون هذه الطريقة مفيدة في حالة الاستمارات الطويلة
<legend>
يتم اضافته مباشرة تحت <fieldset> لاعطاء معلومات حول الاستمارة

الكود
code1
<fieldset>
<legend></legend>
<label>الاسم:<br/>
<input type="text" name="الاسم"/>
</label>
<label>الهاتف:<br/>
<input type="text" name"الهاتف"/>
</label>
<label>العنوان<br/>
<input type="text" name="العنوان"/>
</label>
</fieldset>

النتيجة

المزيد من التحكم باستعمال html5

التحقق من الاستمارة Form validation
لمساعدة الزوار عل ادخل المعلومات الصحيحة، يتم اضافة خاصية  Required أي مطلوب. وإذا لم ملئ الإستمارة تظهر رسالة تنبيهية.

الكود:
<form action="http://www.folfoly.com">
<label for="username">الإسم:</label>
<input type="text" name="username" required="required"/></br>
<label for="password">كلمة المرور:</label>
<input type="text" name="password" required="required"/></br>
<input type="submit" value="أرسل"/>
</form>
النتيجة:

لا تدخل أي شيء في الربعات التالي ثم انقر على أرسل


كما رايت، ظهرت رسالة تنبهك بضرورة إدخل المعلومات.

التاريخ Date input
<input>
مثل الاستمارات التي رأيناها أعلاه
type="date" هنا يتم تحدد نوع المعلومة

كود
<form action="http://www.folfoly.com" method="post">
<label for="username">تاريخ الميلاد:</label>
<input type="date" name="birthday"/>
<input type="submit" value="أرسل"/>
</form>

النتيجة:



البريد الالكتروني وعنوان ويب Email and url input

الكود:

<form action="http://www.folfoly.com">
<label for="username">اضف بريدك:</label>
<input type="email" name="adressemail"/>
<label for="username">اضف رابط موقعك:</label>
<input type="url" name="website"/>
<input type="submit" value="أرسل"/>
</form>

النتيجة:
جرب ادخل بريد بدون @

مربع البحث Search Box

<form action="http://www.folfoly.com">
<p>مربع البحث:</p>
<input type="search" name="searchbox" placeholder="اكتب ما تبحث عنه هنا..."/>
<input type="submit" value="بحث"/>
</form>

النتيجة:
مربع البحث:


لكل سؤال أو إضافة، يرجى كتابة تعليقك في الخانة اسفله