html الإستمارة

input حقول إدخال النص

آخر تحيين: 05-03-2014

form حقول الإختيار html إنشاء الإستمارة


input : حقل إدخال النص

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

<input type="" name="">

حسب قيمة الصفة type ، سنرى أنواع الحقول التالية :

  • text : نص
  • password : كلمة المرور
  • email : البريد الإلكتروني

text

الحقل text يمثل منطقة إدخال نص قصير ، نستعمله مثلا لكتابة إسم العضو أو عنوان الموضوع ... غالبا ما لا يتجاوز عدد الحروف 255 حرفاً .
لنرى مثال استمارة تطلب من العضو إدخال إسمه الشخصي و العائلي

<form action="" method="post">
  <input type="text" name="al_isme">
  <input type="text" name="annasab">
</form>

ستحصلون على حقلين :


هذا جميل . لكن عندما يرى الزائر هذين الحقلين لن يعرف المغزى من وجودهما ، لتوضيح الأمر ، سنُضيف نصا لكل حقل يشرح ماهيته . و هذا النص عبارة عن بطاقة لاصقة للحقل ، و سنستعمل لذلك الوسم <label> .

<label> الإسم الشخصي : </label>
  <input type="text" name="al_isme">

بما أنه ستكون لدينا حقول كثيرة تحمل نفس البطاقة label ، يجب هنا أيضا تمييزها بإضافة الصّفة for
الصفة for تعني أن البطاقة موجهة إلى الحقل كذا . و لربط الحقل المعني ، نستعمل الصفة id

<label for="al_isme"> الإسم الشخصي : </label>
   <input type="text" name="al_isme" id="al_isme">

الصفة for و id يجب أن تكون لديهما نفس القيمة .

لنضيف بطاقتي الإسم و النسب لمثالنا السابق :

<form action="" method="post">
  <label for="al_isme"> الإسم الشخصي : </label>
    <input type="text" name="al_isme" id="al_isme">
  <label for="annasab"> الإسم العائلي : </label>
    <input type="text" name="annasab" id="annasab">
</form>

النتيجة :



يسمى الوسم label بالبطاقة اللأّصقة ، لأنه يلتصق بالحقل المخصص ، أنقروا مثلا على نص "الإسم الشخصي" على متصفّحكم ، سينتقل مؤشر الفأرة مباشرة إلى المنطقة المخصصة لإدخال اسمكم الشخصي

توجد صفات تنظيمية أخرى ، نستعملها داخل وسم input منها :

  • size : تُمكّنُنا من تحديد طول الحقل بعدد الأحرف
  • maxlength : تحديد الحد الأقصى للأحرف التي يمكن إدخالها
  • value : ملأ الحقل بقيمة مبدئية

في المثال التالي سنعطي للحقل طولا يساوي 25 حرفا . و لا يمككنا إدخال و كتابة أكثر من 20 حرفا

<form action="" method="post">
   <label for="al_isme"> الإسم الشخصي : </label>
     <input type="text" name="al_isme" id="al_isme" size="25" maxlength="20">
   <label for="annasab"> الإسم العائلي : </label>
     <input type="text" name="annasab" id="annasab" size="25" maxlength="20">
</form>

password

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

<input type="password" name="pass" >

مثال

 <form action="" method="post">
   <label for="al_isme"> الإسم الشخصي : </label>
      <input type="text" name="al_isme" id="al_isme">
   <label for="pass"> كلمة المرور : </label>
      <input type="password" name="pass" id="pass">
</form>

النتيجة :

email

<input type="email" name="email">

textarea : حقل إدخال نص طويل

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

<textarea name="message"></textarea>

لن نحتاج هنا إلى الصفة type ، لأن حقل textarea فريد من نوعه و يُستعمل لإدخال جميع أنواع البيانات . مثال :

 <form action="" method="post">
   <label for="message"> إضافة تعليق : </label><br>
      <textarea name="message"></textarea>
</form>

النتيجة :



يمكننا التحكم في عرض و طول حقل textarea باستعمال صفتين :

  • cols : الأعمدة . لتحديد المسافة أفقيا
  • rows : السطور . لتحديد المسافة عموديا
<textarea name="message" cols="40" rows="5"></textarea>