استمارات html هي مربعات يتم ملئها أو عن طريقها يقوم الزائر بخيارات. اثناء تسجيلك في فيس بوك مثلا، طلب منك نوع جنسك هل أنت ذكر أم أنثى وهذا نوع من الاستمارات.
درس الاستمارات بالفيديو
الاستمارات تحتوي على مجموعة من العناصر وهي:
الكود:
وسم الفتح <form ووسم الغلق </form>
تحصيل get: للمعلومات القصيرة وعندما لا يتم ارسال اية معلومات للخادم
ارسال post: للمعلومات الطويلة كارسال صور لخادم أو حذف أي شيء من قاعدة بيانات.
الهوية id: سنتعرف على هذا العنصر في درس لا حق، وتستعمل للتفريق بين الاستمارة وبقية عناصر الصفحة.
ثم يتم تحديد نوع المعلومة باستعمال عنصر آخر وهو Type
الاسم Name يساعد كذلك في تحديد أكثر دقة لنوع المعلومة هل هي اسم مستخدم، أم كلمة مرور..
ثم الحد الأقصى لطول المعلومة maxlength
الكود
النتيجة
الكود
النتيجة
لاضافة نصوص مثل فقرة أو غير ذلك..
الكود
النتيجة
تم استعمال خاصيتي cols و rows للتحكم في العرض والطول الخاصين بصندوق النص، وهي طريقة قديمة. سنرى في css كيفية التحكم في طول وعرض صندوق ادخال النص.
Input
"Type="radio
Name
الاسم Name يتم ارساله للخادم مع قيمته value . اسم الخاصية يجب أن يكون نفسه في جميع الازرار
القيمة value تحدد نوع المعلومة، كل زر يجب ان تكون قيمته مختلفة حتى يستطيع الخادم التفريق بينها.
الكود
النتيجة
"Type="checkbox
تعطي للزائر إمكانية تحديد أكثر من خيار واحد
Name
الاسم Name يتم ارساله للخادم مع قيمته value . اسم الخاصية يجب أن يكون نفسه في جميع الازرار
القيمة value تحدد نوع المعلومة، كل زر يجب ان تكون قيمته مختلفة حتى يستطيع الخادم التفريق بينها
الكود
النتيجة
يسمح للزوار باختيار خيار واحد من لائحة منسدلة.
Name
الاسم Name يتم ارساله للخادم مع قيمته value المرافقة له .
<option>
الخيار المتاح أمام الزائر يبدأ بوسم وينتهي بوسم
القيمة value تحدد نوع المعلومة، كل زر يجب ان تكون قيمته مختلفة حتى يستطيع الخادم التفريق بينها.
إذا كانت الخيارات قليلة من الأفضل استعمال ازرار الراديو حتى تظهر جميعها. أما إذا كانت اللئحة طويلة، اسماء الدول مثلا، ينصح باستعمال الائحة المنسدلة.
الكود
النتيجة
يمكن السماح للزوار باختيار خياراين اثنين أو أكثر باضافة خاصية multiple ل عنصر select كما يلي
<input>
"Type="file
عندما ينقر الزائر على Browse يتم فتح نافذة لكي يجد الملف الذي يريد رفعه.
زر الارسال Submit Button
<input>
"Type="submit
Value
قيمة النص الذي يكتب بداخل الزر (ارسل، سجل..)
الكود
النتيجة
يمكن كذلك استعمال صورة عوض نص في الزر كما يلي
"Type="image مع اضافة رابط الصورة:
راجع درس الصور لمعرفة طريقة اضافة صورة.
هذه الخاصية تساعد ضعاف البصر لأنه يمكن النقر فوق الأسم لتحديد المربع وليس بالضرورة المربع نفسه.
For يلعب دور تحديد عنصر التحكم وعلاقته بالميزة الخاصة به. لدينا
"id="femal (راجع درس id)
ثم for="female" يعني هذه الميزة هي خاصة ب جنس الأنثى.
النتيجة
الجنس:
<fieldset>
يمكن جمع مجموعة عناصر داخل ، تكون هذه الطريقة مفيدة في حالة الاستمارات الطويلة
<legend>
يتم اضافته مباشرة تحت <fieldset> لاعطاء معلومات حول الاستمارة
الكود
code1
النتيجة
لمساعدة الزوار عل ادخل المعلومات الصحيحة، يتم اضافة خاصية Required أي مطلوب. وإذا لم ملئ الإستمارة تظهر رسالة تنبيهية.
الكود:
لا تدخل أي شيء في الربعات التالي ثم انقر على أرسل
كما رايت، ظهرت رسالة تنبهك بضرورة إدخل المعلومات.
التاريخ Date input
<input>
مثل الاستمارات التي رأيناها أعلاه
type="date" هنا يتم تحدد نوع المعلومة
كود
النتيجة:
النتيجة:
جرب ادخل بريد بدون @
النتيجة:
درس الاستمارات بالفيديو
الاستمارات تحتوي على مجموعة من العناصر وهي:
الكود:
<form action="http://www.fofoly.com" method="get">
<p>هنا يتم وضع الاعدادت الخاصة بالاستمارة</p>
</form>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
النتيجة: <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>
<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>
<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>
<p>مربع البحث:</p>
<input type="search" name="searchbox" placeholder="اكتب ما تبحث عنه هنا..."/>
<input type="submit" value="بحث"/>
</form>
النتيجة: