Category web programming

Sep 10 2010

How to make a form

اولا ال form عباره عن كود معين فى ال html ممكن تبعت بيه شوية قيم لصفحة معينة تتعامل مع القيم دى بطريقه معينه

طريقة كتابة الكود :

اى حد ممكن يكتب كود اتش تى ام ال عن طريق التيكست اللى بتنزل مع الوندوز وبعد كده يغير امتدادها ل Html او Htm وبتشغل الكود عن طريق فتح الملف بالمتدادا الجديد

اول حاجه لازم طبعا تعمل ال التاج الرئيسى <html>
وبعد كده ال head> head>
وبع كده ال Body> body>

وطبعا ال Close Tag لكل واحد فيهم

عشان يبقى الكود اللى مكتوب دلوقتى

<html>

<head>

<title>

</title>

</head>

<body>

</body>

</html>

تيجى بقى ازاى تعمل الform

كود ال Form هتحطه داخل كود ال Body

وبداية اى فورم بتبقى باستخدام ال الكود <form> وطبعا ده ليه close tag اللى هيا </form>

نيجى بقى لل attributes اللى هيا خصتئص ال Tag

اول واهم حاجة فى ال الخصائص هيا ال action وبتاخد اسم الملف اللى هيتعامل مع البيانات المبعوتة اللى ممكن يبقى ملف Php

يعنى مثلا انا عندى صفحة فيها Form بتاع تسجيل دخول لاى موقع بتبعت اسم الدخول والباس ورد لصفحة بى اتش بى بتعمل اختبار اذا كان اليوزر ده موجود فعلا ولا لاء

تانى حاجه هيا ال method ودى بتاخد طرؤقه ارسال البيانات لصفحة البى اتش بى وبتاخد قيمتين يا اما Get يا اما Post لو عملت Get هتظهر البيانات المبعوتة فى شريط العنوان بتاع المتصفح والعكس فى Post يعنى مثلا لو عامل Form تسجيل دخول بتبعت اسم المستخدم والباس ورد مش ممكن تستخدم Get عشان الباس متظهر فى شريط العنوان
عشان يبقى الكود فى الاخر بالشكل ده

<html>

<head>

<title>

Log in

</title>

</head>

<body>

<“form action=”test.php” method=”post>

</form>

</body>

</html>

بين ال open tag وال Close tag هيبقى فية الكود بتاع الحقول والكود ده بيتكون من برده عدة Tags ليها شويه attributes

اولها واهمها

<input>
وده ليه شوية خصائص اهما Type وبتاخد يا اما Text او Password او checkbox او radio او submit او reset

اول واحدة ال text دى لو بتستقبل من اليوزر كلمه او اسم او تعليق او اى حاجه من هذا القبيل
تانى واحدة ال password لو بتستقبل من اليوزر باسورد او اى كلام تانى ميباتش والمستخدم بيكتبة “يعنى يتحول لنجوم”
تالت واحد ال checkbox عبارة عن المربع اللى بتعمل فيها علامة صح او تشيلها زى مثلا تسييف باسورد دخول الموقع
رابع واحد ال radio دى الدايرة اللى اول ما تتك عليها تتملى
خامس واحد ال submit ده هو تاكد ارسال البيانات للملف اللى احنا حددنا عن طريق الخاصية Action
سادس واحد ال reset هو مسح البيانات من الحقول زى مثلا كلمه زرار مسح الحقول وانت بتسجل فى اى منتدى

كل واحد من دول بيجى بعده شويه خصائص تعرفة

اولا ال text بيجى بعده شوية خصائص اللى هيا

Name ودى بتاخد اسم المتغير اللى هيتبعت لصفحة ال بى اتش بى
Value وهى القيوة الافتراضية الموجود اللى المستخدم بيشوفها مكتوبه فعلا وبيمسحها ويكتب هو زى مثلا لما تيجى تدخل منتدى تلاقى مكتوب فى حقل اليوزر نيم كلمة “اكتب اسم المستخدم هنا” وهكذا

ثانيا ال password

نفس خصائص ال text

ثالثا ال checkbox
Name ودى بتاخد اسم المتغير اللى هيتبعت لصفحة ال بى اتش بى
Value تختلف عن ال text و ال password عشان القيمة اللى بتتحط هنا هيا القيمة اللى بتتخزن فى المتغير اما فوق القيمة بتاعت المتغير هيا اللى اليوزر بيكتبها

رابعا ال radio
Name ودى بتاخد اسم المتغير اللى هيتبعت لصفحة ال بى اتش بى
Value نفس ال checkbox

وفى هنا حاجة عايز اوضحها وهى الفرق بين ال checkbox وال radio

ان ال checkbox ممكن اليوزر يختار اكتر من حاجه زى مثلا بتاعت الهوايات وانت بتسجل فى الموقع مثلا ممكن تختار الكمبيوتر والرياضة والقراءة مثلا
اما ال radio بتختار حاجه واحده بس زى مثلا اختار المتصفحه اللى انت بتسنخدمه دلوقتى اكيد هيبىق واحد بس يا اوبرا يا فايرفوكس يا انترنت اكسبلورر

وبكده ممكن تلاحظ حاجه ان ال Name فى ال Checkbox لو هتعمل اكتر من Checkbox ممكن يختلف وممكن يتشابه
يعنى ممكن تعمل ال name مثلا what_my_hoppy وتخلى القيم مره football ومره Copmputer ومره reading فى كل Checkbox تعمله
وممكن برده تعمل ال name مثلا i_like_football وتخلى القيمة yes وتعمل Checkbox تانى وتخلى ال name مثلا i_like_computer وتخلى القيمة yes

ولما المستخدم يعمل صح فى المربع هتلاقى كل متغير Name خد القيمة Value وتتبعت لصفحة ال بى اتش بى مثلا

اما فى ال Radio لازم يبقى مختلف عشان هو متغير واحد بتختاله قيمة من شويه قيم مختلفة

خامسا ال Submit

بتاخد value بس بتكتب فيها الكلام اللى هيتكتب فى الزرار

وسادسا ال reset

زى ال submit

مثال لصفحة تسجيل دخول

<form action=”text.php” method=”post”>

<br>

<input value=”enter user name”>

<br>

<input>

<br>

<input value=”yes”>

<br>

<input value=”Sign in”>

<input value =”Delete fields”>

</form>