النماذج و المدخلات في الـ HTML
تستخدم النماذج في لغة الـ HTML لعمل أنواع مختلفة من الاختيارات لمدخلات المستخدم.
النماذج
النموذج المساحة التي تحتوي على عنصر " form "، عنصر النموذج هو العنصر الذي يسمح للمستخدم إدخال معلومات مثل " حقل النص text fields، مساحة الكتابة textarea fields، القوائم المنسدلة drop-down menus، أزرار الراديو radio buttons، مربعات الاختيار checkboxes، و غيرها من أشكال النماذج المختلفة.
يتم تحديد النموذج من خلال الوسم <form>.
<form>
<input> <input> </form> |
المدخلات
الغالبية العظمى تستخدم الوسم <input>، نوع المدخلات يتحدد من خلال السمة type، فيما يلي شرح لأنواع المدخلات الأكثر شيوعاً.
حقل النص
يتم استخدام حقل النص عندما تريد أن تجعل المستخدم يدخل حروف أو أرقام.
<form>
الاسم الأول: <input type="text" name="firstname"> <br> الاسم الأخير: <input type="text" name="lastname"> </form> |
و تظهر من خلال المتصفح كما بالشكل التالي:
الاسـم الأول:
الاسم الأخير:
لاحظ أن النموذج نفسه غير مرئي، كما أنه إذا لم تحدد عرض الحقل فإن المتصفح سوف يعرض حقل النص يتسع لـ 20 حرف.
أزرار الراديو
تستخدم أزرار الراديو Radio Buttons، عندما تريد من المستخدم أن يقوم بتحديد خيار وحيد من ضمن عدة خيارات محدد
<form>
<input type="radio" name="sex" value="male"> ذكر <br> <input type="radio" name="sex" value="female"> أنثى </form> |
.و تظهر من خلال المتصفح كما بالشكل التالي:
ذكر
أنثى
لاحظ أنه مع أزرار الراديو يجب تحديد إختيار وحيد فقط.
مربعات الاختيار
تستخدم مربعات الاختيار Checkboxes، عندما تريد من المستخدم أن يقوم بتحديد اختيار أو أكثر من ضمن الاختيارات المحددة.
<form>
<input type="checkbox" name="bike"> أمتلك دراجة <br> <input type="checkbox" name="car"> أمتلك سيارة </form> |
و تظهر من خلال المتصفح كما بالشكل التالي:
أمتلك دراجة
أمتلك سيارة
عمل سمة النموذج و زر الإرسال.
عند قيام المستخدم بالضغط على زر الإرسال، فإن محتويات النموذج سوف يتم إرسالها إلى ملف أخر.
عمل سمة النموذج تحدد أسم الملف الذي ترسل إليه محتويات النموذج، الملف المحدد في سمة النموذج عادة ما يفعل شيء ما أثناء استلام محتويات المدخلات.
<form name="input" action="tiba.html" method="get">
أسم المستخدم: <input type="text" name="user"> <input type="submit" value="إرسال"> </form> |
و يظهر من خلال المتصفح كما بالشكل التالي:
أسم المستخدم:
إذا قمت بكتابة بعض الكلمات أو الحروف في النموذج السابق، ثم قمت بالضغط على زر الإرسال، سوف يتم إرسال مدخلاتك غلى صفحة تسمى "tiba.html". و هي الصفحة التي تقوم بعرض مدخلاتك المستلمة.
Form Tags
Tag
|
Description
|
<form>
| Defines a form for user input |
<input>
| Defines an input field |
<textarea>
| Defines a text-area (a multi-line text input control) |
<label>
| Defines a label to a control |
<fieldset>
| Defines a fieldset |
<legend>
| Defines a caption for a fieldset |
<select>
| Defines a selectable list (a drop-down box) |
<optgroup>
| Defines an option group |
<option>
| Defines an option in the drop-down box |
<button>
| Defines a push button |
<isindex>
| Deprecated. Use <input> instead |
تعليقات: 0
إرسال تعليق