مشكلة في ال form و ال table

Hasan Hsoub · 15 فبراير

النوع radio هو لتحديد عنصر واحد ولكن عندما استخدمه يتم تحديد اكثر من عنصر لماذا

image.png.160a755d0496d56a03bb81e9e8325e2e.png

وهل ال table و tr نفس الشيء لانهم يعطون نفس النتيجة

هذا هو الكود

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>

    <body>
        <h1>فورم تسجيل</h1>
        <form>
            <table>
                <tr>
                    <td>
                        <label for="usernamr">usernamr</label>
                    </td>
                    <td><input type="text" id="username" /><br /></td>
                </tr>
                <tr>
                    <td>
                        <label for="pwd">passwoord</label>
                    </td>
                    <td><input type="password" id="pwd" name="pwd" /><br /></td>
                </tr>

                <td>
                    <label>Reistar palan</label>
                </td>
                <td>
                    <div>
                        <input type="radio" id="starter" name="plan" value="starter" />
                        <label for="starter">starter</label>
                    </div>
                    <div>
                        <input type="radio" id="business" name="palan" value="business" />
                        <label for="business">Business</label>
                    </div>
                    <div>
                        <input type="radio" id="premium" name="palan" value="premium" />
                        <label for="premium">premium</label>
                    </div>
                </td>
            </table>
            <table>
                <label for="description">description</label>
            </table>
            <table>
                <textarea name="description" id="description" cols="30" rows="10"></textarea>
            </table>
            <table>
                <label for="agree">Agree</label>
            </table>
            <table>
                <input type="checkbox" id="agree" name="agree" />
                <label for="agree">I agree  to terms and conditions</label>
            </table>
            <table>
                <input type="submit" value="Reistar" />
            </table>
            <td><input type="button" value="clear" /></td>
        </form>
    </body>
</html>

Najah Alsaker · 15 فبراير

اقتباس

النوع radio هو لتحديد عنصر واحد ولكن عندما استخدمه يتم تحديد اكثر من عنصر لماذا

عندما نستخدم النوع radio يجب ان تكون الخاصية name تحمل ذات الاسم حتى يتم اختيار خيار واحد فقط وانت هنا لديك خطأ في طريقة كتابة الاسماء

 <div>
                    <input type="radio" id="starter" name="plan" value="starter">
                    <label for="starter">starter</label>
                </div>
                <div>
                   <!-- plan المفروض ان تكون  -->
                  <!--palan وليس-->
                    <input type="radio" id="business" name="palan" value="business">
                    <label for="business">Business</label>
                </div>

                <div>
                  <!--وهنا ايضا ذات الخطأ-->
                    <input type="radio" id="premium" name="palan" value="premium">
                    <label for="premium">premium</label>
                </div>

قم بتعديله ليصبح الكود كالتالي :

	<div>
                    <input type="radio" id="starter" name="plan" value="starter">
                    <label for="starter">starter</label>
                </div>
                <div>
                    <input type="radio" id="business" name="plan" value="business">
                    <label for="business">Business</label>
                </div>

                <div>
                    <input type="radio" id="premium" name="plan" value="premium">
                    <label for="premium">premium</label>
                </div>

الأن سيعمل بشكل صحيح

اقتباس

وهل ال table و tr نفس الشيء لانهم يعطون نفس النتيجة

ان العنصر <table > يقوم بالنزول الى سطر جديد ثم يبدا بعرض عناصره
العنصر tr (table row) : هو معناها سطر الجدول اي عند كل مرة نكتب tr ينزل الى سطر جديد
لذلك اختلطت في ما بينهما اما هما عنصران مختلفان تمام حتى ولو ادو اي نفس النتيجة بحيث ان ال tr هو عنصر من عناصر الجدول table
دعني اشرح لك كيفية تركيبة الجدول بالتفصيل

 <table>
        <tr> <!--السطر الاول الخاص بالجدول-->
            <td>العنصر الاول من السطر الاول</td>
            <td>العنصر الثاني من السطر الاول</td>
            <td>العنصر الثالث من السطر الاول</td>
        </tr>
        <tr><!--السطر الثاني الخاص بالجدول-->
            <td>العنصر الاول من السطر الثاني</td>
            <td>العنصر الثاني من السطر الثاني</td>
            <td>العنصر الثالث من السطر الثالث </td>
        </tr>
    </table>

<table> وهو وسم الجدول الاساسي

<tr> تعني سطر جديد للجدول

<td> تعني table date اي البيانات المراد ادخالها داخل الجدول

وهذه الصورة توضوح لك طريقة عمل الكود السابق بالتفصيل

image.png.2f93abea3b24c036579efdca7aed189c.png

لذلك قم باستبدال العناصر بالترتيب الصحيح الذي اعطيتك اياه

محمد_عاطف · 15 فبراير

الخطأ هنا

<input type="radio" id="starter" name="plan" value="starter">

حتى يعمل ال radio input كما تريد يجب ان يكون لديهم نفس الاسم (name) ويبدو هنا انك قد اخطات فى كتابة الاسم حيث الاثنين الاخرين لديهم اسم palan يجب على الثلاثة ان يكون لديهم نفس الاسم . لذلك قم بتوحيد الاسماء الثلاثة وسيعمل جيدا

Mahmoud Hassan19 · 15 فبراير

يحب جميع العناصر ذات نفس الاسم (name="plan")، وهو ما يسمح للاستخدام الصحيح لعناصر radio بحيث يمكن اختيار عنصر واحد فقط من بينها.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>نموذج التسجيل</title>
</head>
<body>

    <h1>فورم تسجيل</h1>

    <form>

        <table>
            <tr>
                <td>
                    <label for="username">اسم المستخدم</label>
                </td>
                <td>
                    <input type="text" id="username" name="username">
                </td>
            </tr>

            <tr>
                <td>
                    <label for="pwd">كلمة المرور</label>
                </td>
                <td>
                    <input type="password" id="pwd" name="pwd">
                </td>
            </tr>

            <tr>
                <td>
                    <label>خطة التسجيل</label>
                </td>
                <td>
                    <input type="radio" id="starter" name="plan" value="starter">
                    <label for="starter">بداية</label>

                    <input type="radio" id="business" name="plan" value="business">
                    <label for="business">عمل</label>

                    <input type="radio" id="premium" name="plan" value="premium">
                    <label for="premium">ممتازة</label>
                </td>
            </tr>

            <tr>
                <td>
                    <label for="description">الوصف</label>
                </td>
                <td>
                    <textarea name="description" id="description" cols="30" rows="10"></textarea>
                </td>
            </tr>

            <tr>
                <td>
                    <label for="agree">الموافقة</label>
                </td>
                <td>
                    <input type="checkbox" id="agree" name="agree">
                    <label for="agree">أوافق على الشروط والأحكام</label>
                </td>
            </tr>

            <tr>
                <td>
                    <input type="submit" value="تسجيل">
                </td>
                <td>
                    <input type="button" value="مسح">
                </td>
            </tr>
        </table>

    </form>

</body>
</html>

Taha Khalid · 15 فبراير

المشكلة في الكود هي أنه يوجد خطأ في تسمية الحقل الذي يحمل القيمة premium. في الكود لديك
يجب تعديل هذه السطر

<input type="radio" id="premium" name="palan" value="premium">

حتي يكون هكذا

<input type="radio" id="premium" name="plan" value="premium">

هذه الكود بلكامل بعد التعديل يمكنك تجربته من هنا

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>فورم تسجيل</title>
</head>
<body>
    <h1>فورم تسجيل</h1>
    <form>
        <table>
            <tr>
                <td>
                    <label for="username">اسم المستخدم</label>
                </td>
                <td>
                    <input type="text" id="username" name="username"><br>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="pwd">كلمة المرور</label>
                </td>
                <td>
                    <input type="password" id="pwd" name="pwd"><br>
                </td>
            </tr>
            <tr>
                <td>
                    <label>خطة التسجيل</label>
                </td>
                <td>
                    <div>
                        <input type="radio" id="starter" name="plan" value="starter">
                        <label for="starter">بداية</label>
                    </div>
                    <div>
                        <input type="radio" id="business" name="plan" value="business">
                        <label for="business">تجارية</label>
                    </div>
                    <div>
                        <input type="radio" id="premium" name="plan" value="premium">
                        <label for="premium">مميزة</label>
                    </div>
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td>
                    <label for="description">الوصف</label>
                </td>
            </tr>
            <tr>
                <td>
                    <textarea name="description" id="description" cols="30" rows="10"></textarea>
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td>
                    <label for="agree">موافقة</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" id="agree" name="agree">
                    <label for="agree">أوافق على الشروط والأحكام</label>
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td>
                    <input type="submit" value="تسجيل">
                </td>
                <td>
                    <input type="button" value="مسح">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

ياسر مسكين · 15 فبراير

المشكلة في الكود السابق هي أنه تم استخدام قيم مختلفة في الـ "attribute " name لعناصر الـ radio button، مما أدى إلى عدم تكونها جزءا من نفس المجموعة، يجب أن يكون لجميع الـ radio buttons نفس القيمة في الـ "attribute "name لتحقيق السلوك المطلوب.

وهذا هو الكود المصحح:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration Form</title>
</head>
<body>
    <h1>Registration Form</h1>
    <form>
        <table>
            <tr>
                <td>
                    <label for="username">Username</label>
                </td>
                <td>
                    <input type="text" id="username"><br>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="pwd">Password</label>
                </td>
                <td>
                    <input type="password" id="pwd" name="pwd"><br>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Registration Plan</label>
                </td>
                <td>
                    <div>
                        <input type="radio" id="starter" name="plan" value="starter">
                        <label for="starter">Starter</label>
                    </div>
                    <div>
                        <input type="radio" id="business" name="plan" value="business">
                        <label for="business">Business</label>
                    </div>
                    <div>
                        <input type="radio" id="premium" name="plan" value="premium">
                        <label for="premium">Premium</label>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="description">Description</label>
                </td>
                <td>
                    <textarea name="description" id="description" cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="agree">Agree</label>
                </td>
                <td>
                    <input type="checkbox" id="agree" name="agree">
                    <label for="agree">I agree to terms and conditions</label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="Register">
                    <input type="button" value="Clear">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

وفيه تم تصحيح الكود بحيث تم توحيد قيم الـ "attribute "name لعناصر الـ radio button لتكون "plan" لجميع العناصر، مما جعلها جزءا من نفس المجموعة كما قمت بإضافة عناصر <tr> لكل صف في الجدول لتوضيح هيكل البيانات بشكل أفضل.

Najah Alsaker · 15 فبراير

وهذا هو الكود بعد ان قمت بعمل التحسينات عليه

قمت بعمل الtable واحد فقط داخل عنصر ال form

وكل ما احتجت الى النزول الى سطر جديد داخل الجدول وضعت العنصر tr عوضا عن اضافة table مرة اخرى كما فعلت انت

اقصد هذا الكود

<table>
            <label for="description">description</label>
        </table>
        <table>
            <textarea name="description" id="description" cols="30" rows="10"></textarea>
        </table>
        <table>
            <label for="agree">Agree</label>
        </table>
        <table>
            <input type="checkbox" id="agree" name="agree">
            <label for="agree">I agree  to terms and conditions</label>
        </table>
        <table><input type="submit" value="Reistar">
        </table>
        <td><input type="button" value="clear">
        </td>

قمت بتعديله ليصبح هكذا

 <tr>
                <td>
                    <label for="description">description</label>
                </td>
                <td>
                    <textarea name="description" id="description" cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="agree">Agree</label>
                </td>
                <td>
                    <input type="checkbox" id="agree" name="agree">
                    <label for="agree">I agree to terms and conditions</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="submit" value="Register">
                </td>
                <td>
                    <input type="button" value="Clear">
                </td>
            </tr>

ارجو انه تم توضيح الفكرة لديك

وهذا هو الكود الجديد المعدل ارجو منك مقارنته بالكود السابق الخاص بك لتفهم طريقة سير الامور اكثر

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>فورم تسجيل</h1>
    <form>
        <table>
            <tr>
                <td>
                    <label for="username">username</label>
                </td>
                <td>
                    <input type="text" id="username" name="username"><br>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="pwd">password</label>
                </td>
                <td><input type="password" id="pwd" name="pwd"></td>
            </tr>
            <tr>
                <td>
                    <label>Register plan</label>
                </td>
                <td>
                    <div>
                        <input type="radio" id="starter" name="plan" value="starter">
                        <label for="starter">starter</label>
                    </div>
                    <div>
                        <input type="radio" id="business" name="plan" value="business">
                        <label for="business">Business</label>
                    </div>
                    <div>
                        <input type="radio" id="premium" name="plan" value="premium">
                        <label for="premium">premium</label>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="description">description</label>
                </td>
                <td>
                    <textarea name="description" id="description" cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="agree">Agree</label>
                </td>
                <td>
                    <input type="checkbox" id="agree" name="agree">
                    <label for="agree">I agree to terms and conditions</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="submit" value="Register">
                </td>
                <td>
                    <input type="button" value="Clear">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

بالتوفيق لك

مشكلة في ال form و ال table

السؤال

Hasan Hsoub

رابط هذا التعليق

شارك على الشبكات الإجتماعية

6 أجوبة على هذا السؤال

Recommended Posts

Najah Alsaker

رابط هذا التعليق

شارك على الشبكات الإجتماعية

محمد_عاطف

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mahmoud Hassan19

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Taha Khalid

رابط هذا التعليق

شارك على الشبكات الإجتماعية

ياسر مسكين

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Najah Alsaker

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية