html الإستمارة

html تنظيم و إرسال الإستمارة

آخر تحيين: 14-04-2014

html5 الصوت و الفيديو form حقول الإختيار


إضافة آخر اللمسات و إرسال الإستمارة

في هذا الدّرس ، سنذهب بعيدا في تنظيم الإستمارة متبعين في ذلك الخطوات التالية :

  • إعطاء ترتيب للحقول
  • تقسيم الإستمارة إلى مناطق .
  • إضافة زر "إرسال"

tabindex إعطاء ترتيب للحقول

لتسهيل عملية تنقل المستخدم من حقل إلى الذي يليه داخل الإستمارة . سنتيح له استخدام زر "Tab" المتواجد يسار لوحة مفاتيح الحاسوب . و سنستخدم لذلك ، الصفة tabindex و ستأخذ قيمة عددية بترتيب تصاعدي . مثال:

   <input type="text" name="nom" tabindex="5">
   <input type="text" name="prenom" tabindex="10">
   <input type="password" name="pass" tabindex="15">
   <input type="email" name="e-mail" tabindex="20">

fieldset تقسيم الإستمارة إلى مناطق

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

<form action="" method="post">         
 <fieldset>
   <legend>المعلومات الشخصية</legend>
   <label for="pseudo">إسم المستخدم </label>
     <input type="text" name="pseudo" id="pseudo"><br>
   <label for="pass">كلمة المرور </label>
     <input type="password" name="pass" id="pass"><br>
   <label for="repass">تأكيد كلمة المرور</label>
     <input type="password" name="repass" id="repass"><br>
   <label for="mail">البريد الإلكتروني</label>
     <input type="email" name="mail" id="mail"><br>
   <label for="remail">تأكيد البريد  </label>
     <input type="email" name="remail" id="remail"><br>
 </fieldset>     
 <fieldset>
   <legend>اختر بلدك</legend>
   <select name="pays">
     <optgroup label="افريقيا">
      <option value="maroc"> المغرب</option>        
      <option value="tunisie"> تونس </option>
      <option value="algérie"> الجزائر</option>
      <option value="lybie"> ليبيا </option>
      <option value="egypt"> مصر </option>
      <option value="mauritanie"> موريتانيا </option>
     </optgroup>           
     <optgroup label="آسيا">
      <option value="palestine" selected> فلسطين </option>        
      <option value="arabie-saudite"> السعودية </option>
      <option value="yemen"> اليمن </option>
      <option value="qatar"> قطر </option>
     </optgroup>    
    </select>     
 </fieldset>     
 <fieldset>
   <legend>اختر مدة الإشتراك !</legend>
   <label for="month">شهر</label>
     <input type="radio" name="subscription" value="1-month" id="month"><br>
   <label for="months">6 أشهر</label>
     <input type="radio" name="subscription" value="6-month" id="months"><br>
   <label for="year">سنة</label>
     <input type="radio" name="subscription" value="1-year" id="year"><br>    
  </fieldset>     
</form>

مع قليل من الأنماط :

fieldset {
  padding: 10px;
  margin-top: 5px;
  font-weight: bold;
  border:1px solid #b2b0af;
  background: #f2f0f0;
  -moz-border-radius : 8px;
  -webkit-border-radius : 8px;
  border-radius: 8px;
}
form {width:350px;}
form, input, label, textarea {
  display: inline-block;
  vertical-align: top;
}
legend {
  border:1px solid gray;
  color:blue;
  background: #fff;
  padding: 3px;
}
input {margin-bottom: 1px;}
label {width:95px;}

ستحصلون على شيء شبيه بهذا :

استمارتنا الآن أكثر تنظيما و يمكن للزائر التمييز بين المجالات بكل سهولة . أفسح لكم الطريق لتنميقها حسب ذوقكم باستعمال css


submit : زر إرسال الإستمارة

أنهينا الإستمارة و لم يبقى لنا سوى وضع زر "إرسال" . بمجرد أن يملأ الزائر الإستمارة و ينقر هذا الزر ، يجد نفسه مُبحِراً إلى صفحة أخرى ، الصفحة التي ستقوم بمعالجة المعلومات التي أدخلها .
لإضافة هذا الزر . سنستعمل وسما تعرفونه جيدا ، و هو وسم <input> أما قيمة صفة type ، ستكون هذه المرة submit و تعني زر "إرسال" .
<input type="submit" value="إرسال">

طبعا لم يكن هذا الزر وحده كافيا لإرضاء كبرياء المطوّرين ، فوجدوا رفيقا له ، و هو زر reset ،
<input type="reset" value="مسح">
يمكّن هذا الوسم من محو جميع المعلومات التي أدخلها الزائر في حالة رغب هذا الأخير تنظيف جميع الحقول و بداية ملإها من الصفر .

لنأخذ استمارتنا و نضيف الزّرين submit و reset أسفلها ، مباشرة قبل غلق وسم form

<form action="" method="post">
  <!-- حقول الإستمارة -->

  <input type="submit" value="إرسال"> 
  <input type="reset" value="مسح">
</form>

لن يحصل شيء بنقركم على زر "إرسال" . يجب أوّلا برمجة الصفحة التي ستستقبل البيانات و تعالجها . و هذا يتم عن طريق اللغات التفاعلية .
هذا ربّما سيحفزكم و يفتح شهيتكم على سبر أغوار لغة جديدة تفاعلية و الدخول من الباب الرحب إلى بحر البرمجة المثير و الشيق . في هذه الحالة أنتم مدعوون ، لتعلم هذه اللغة ، لقد أنجزت دروسا سلسلة خِصّيصا لكم في لغة php تجدونها هنا... .