شرح input وكل متعلقاتها بالتفصيل مع الصـور

[جموح]

السلام عليكم ورحمة الله وبركاتهـ,,


الدرس عن مربع الادخـال ( input ) وكلـ. مـا يتعلـق بهـ.. ^_^

اليـوم سنتحدث عـن نـوع حقـل الادخـآل (TYBE)

والأنواعـ الخاصهـ بالحقل TYBE هيـ التاليهـ...

**** | CHECKBOX | RADIO | PASSWORD | HIDDEN | SUBMIT | RESET | BUTTON | FILE | IMAGE

وسنقـوم الآن بعمـل شرحـ لعمـل كـل منـها


TYPE هي التي تحدد نوع الإدخـال
NAME هو أسـم الحقـل

نبدأ بـ****
عند تحديد نوع مربع الادخال **** سوف يصبح صندوق لادخال النص

مثال :



رمز PHP:

<FORM ACTION="../cgi-bin/mycgi.pl">

<INPUT TYPE=**** NAME="realname">الاسم<br>
<INPUT TYPE=**** NAME="age">العمر<br>
<INPUT TYPE=**** NAME="email">البريد الالكتروني<p>

<INPUT TYPE=SUBMIT VALUE="submit">
FORM>

CHECKBOX
عند تحديد نوع مربع الادخال CHECKBOX سوف يصبح مربع للاختيار

مثال :



رمز PHP:

<FORM ACTION="../cgi-bin/mycgi.pl">

<INPUT TYPE=CHECKBOX NAME="maillist">اضافة الى القائمة البريدية!<br>
<INPUT TYPE=CHECKBOX NAME="homepage">اجعل الموقع صفحة البداية!<br>
<INPUT TYPE=CHECKBOX NAME="fav">اضف الموقع للمفضلة!<p>

<INPUT TYPE=SUBMIT VALUE="submit">
FORM>

RADIO
عند اختيار نوع مربع الادخال RADIO سوف يصبح مربع للاختيار ‍ ‍‍, لكن ما الفرق بينها وبين CHECKBOX
الخيار RADIO يسمح لك باختيار واحد فقط اما CHECKBOX يسمح لك باختيار اكثر من خيار

مثال :


رمز PHP:

<FORM ACTION="../cgi-bin/mycgi.pl">
كم طولكـ؟<P>

<INPUT TYPE=RADIO NAME="tall" VALUE="S">قصيـر<BR>
<INPUT TYPE=RADIO NAME="tall" VALUE="M">متوسـط<BR>
<INPUT TYPE=RADIO NAME="tall" VALUE="L">طويـل<P>

<INPUT TYPE=SUBMIT VALUE="submit">
FORM>

PASSWORD
عند اختيار الحقل PASSWORD سوف يتم ادراج الاحرف بداخل الحقل على شكل نجوم او نقط مخفيه

مثال :




رمز PHP:

<FORM ACTION="../cgi-bin/mycgi.pl" METHOD=POST>

<INPUT TYPE=**** NAME="realname">الاسم<BR>
<INPUT TYPE=PASSWORD NAME="mypassword">كلمة المرور<P>

<INPUT TYPE=SUBMIT VALUE="submit">
FORM>

HIDDEN
عنـد إختيـار نـوع الحقـل HIDDEN سـوف يتـم ادراج الحقل مخفـي
يتمـ وضعـ فـيه معلومـات لنـ تظهـر بالصفحـة, تستخدم لحفظ معلومات برمجية عند ارسال الفورم لصفحة معينة يتم ارسال قيمتها من الصفحة المرسلة الى الصفحة المرسل اليها
مثال:
مربعـ تسجيل الدخولـ login او نموذج التسجـيل register وصفحهـ اتصلـ بنـا وغيرهـا الكثيـر





رمز PHP:

<H2 align="right">ضع تعلـيق على الموضـوعH2>
<FORM dir="rtl"METHOD=POST ACTION="../cgi-bin/mycgi.pl">
<INPUT TYPE=HIDDEN NAME="postingID" value="98765">
الاسم:<INPUT NAME="realname" SIZE=30> <BR>
بريدك:<INPUT NAME="email" SIZE=30><BR>
الموضوع:<INPUT NAME="subject" VALUE="رد: مربع الادخال وكل ما يتعلق به" SIZE=30><P>

التعليق:<BR>
<****AREA NAME="comments" COLS=50 ROWS=10 WRAP=VIRTUAL>
****AREA>

<P><INPUT TYPE=SUBMIT VALUE="أرسـل!">

FORM>

لاحـظ اننا وضعنـا حقـل مخفي يحتوي على رقمـ البوستـ



SUBMIT
يستخدم هذا النـوع لعمـل زر يقوم بارسـال الفورمـ

مثـآل :




رمز PHP:

<FORM ACTION="../cgi-bin/mycgi.pl">

<INPUT NAME="realname">: الأسم<BR>
<INPUT NAME="email">: البريـد<P>

<INPUT TYPE=SUBMIT VALUE="ارسال">
FORM>

RESET
يستخدم لعمـل زر لاعادة الحقـول الى الوضع الاصلي

مثـال :




رمز PHP:

<FORM ACTION="../cgi-bin/mycgi.pl">
<INPUT TYPE=****><p>
<INPUT TYPE=SUBMIT>
<INPUT TYPE=RESET>
FORM>

BUTTON
يستخدم لتحديد النوع زر عند الضغط عليه يقوم بتنفيذ امر ما
مثل زر ارفاق ملف في المشاركة وغيرها الكثير
مثـال :



رمز PHP:

<FORM ACTION="../cgi-bin/mycgi.pl">

<INPUT NAME="realname" SIZE=30>الاسم :<p>
<INPUT TYPE=BUTTON OnClick="*****(this.form.realname.value);" VALUE="زر يقوم بتنفيذ امر">

FORM>

FILE
يستخدمـ لعمـل حقل وزر لاستعراض الملفاتـ من الجهاز
مثل مركز التحميل

مثـال :




رمز PHP:

<FORM METHOD=POST ENCTYPE="multipart/form-data" ACTION="../cgi-bin/mycgi.pl">
<INPUT TYPE=FILE NAME="upfile"><p>
<INPUT TYPE=SUBMIT VALUE="رفـع الملـف">
FORM>

IMAGE
يستخدم لوضـع صورهـ بوظيفهـ زر

مثـال :



رمز PHP:

<FORM ACTION="../cgi-bin/mycgi.pl">
<INPUT NAME="realname"> : الإسم
<INPUT
TYPE=IMAGE
SRC="http://image.kooora.com/i.aspx?i=competitions%2ffifa.jpg"
HEIGHT=110 WIDTH=160
ALT="صورة بوظيفة زر" ALIGN=ABSMIDDLE
>
FORM>

الآن نـاتي لشرحـ العنـاصر :

TYPE : نـوع الحقـل
**** | CHECKBOX | RADIO | PASSWORD | HIDDEN | SUBMIT | RESET | BUTTON | FILE | IMAGE

NAME : إسمـ الحقـل
أي اسم تريـده شرط الا يبتدء برقم او رمـز

VALUE : قيمة الحقـل

SIZE : حجـم الحقـل

MAXLENGTH : اقصى عدد للحروف
فلا يسمحـ بادخال حروف اكثر من العدد المسموح به في الحقـل

CHECKED : جعـل مربـع الاختيار radio او CHECKBOX مفعـل

BORDER : حجم حدود الحقـل او الصورة

SRC : رابط الصورة

ALT : نص يظهر عند وقوف الماوس على الصورهـ

WIDTH : عرض العنصر او الصورة بالبكسل او المئوي

HEIGHT : ارتفاع العنصر او الصورة بالبكسل او المئوي

ALIGN : وضع العنصر او الصورة باتجاه معين يمين او يسار او منتصف
RIGHT | LEFT | CENTER

READONLY : جعل مربع ادخال النص غيـر قابـل للتعديل

DISABLED : جعـل العنصـر غيـر فعـال ولا يمكـن تغيير قيمتهـ

onClick : تنفيذ امر عند الضغط على العنصر


onChange : تنفيذ امر عند تغيير قيمه العنصر

onFocus : تنفيذ امر عندما يصبحـ العنصـر فعـال

onBlur : تنفيذ امـر عندمـا يصبحـ العنصر غير فعـال

onKeyPress : تنفيذ أمـر عند ضغط أحد الازرار على العنصـر

onKeyUp : تنفيذ أمـر عند رفـع اليد عن زر الكيبورد

onKeyDown : تنفيذ امـرر عند ضغط على زر الكيبورد

AUTOCOMPLETE : عنـد الضغط على الحقـل تظهـر الكلمـات التي قمـت بكتابتهـا سابقـا في الحقل