النماذج (Forms) في HTML



21 نوفمبر، 2021 | تيتو 4 تك


  • نموذج HTML هو قسم من المستند يحتوي على حقول مختلفة مثل حقول النص وحقول كلمة المرور وخانات الاختيار وأزرار الاختيار وزر الإرسال والقوائم وما إلى ذلك.

    يمكن استخدام نماذج HTML حيث نريد جمع بعض البيانات من زائر الموقع. على سبيل المثال ، في حالة تسجيل المستخدم ، قد ترغب في جمع معلومات مثل الاسم وعنوان البريد الإلكتروني ورقم الهاتف وما إلى ذلك.

    سيأخذ النموذج مدخلات ثم يخزنها في تطبيق خلفي مثل CGI أو ASP Script أو PHP script وما إلى ذلك. سيقوم التطبيق الخلفي بتنفيذ المعالجة المطلوبة على البيانات التي تم تمريرها مثل تخزينها في قاعدة البيانات.

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

     

     

    enlightened  هيكل نموذج HTML

     

    تحدد علامة <form> النموذج الذي يتم استخدامه لتجميع مدخلات المستخدم. يجب كتابة جميع عناصر النموذج داخل علامتي <form> و </form>.

     

    <form>
    . . . .
    عناصر النموذج ..
    . . . .
    </form>

     

     

    enlightened  عناصر نماذج HTML

     

     

    الصفات

     

    الوصف

     

    <form>

     

    يحدد نموذج HTML لإدخال المدخلات من قبل الجانب المستخدم.

     

    <input>

     

    يحدد عنصر تحكم الإدخال.

     

    <select>

     

    يحدد عنصر تحكم إدخال متعدد.

     

    <option>

     

    يحدد خيارًا في قائمة منسدلة.

     

    <textarea>

     

    يحدد القائمة المنسدلة.

     

    <button>

     

    يحدد تسمية لعنصر الإدخال.

     

    <fieldset>

     

    يقوم بتجميع العنصر ذي الصلة في نموذج.

     

    <legend>

     

     يحدد تسمية توضيحية لعنصر <fieldset>.

     

    <optgroup>

     

    يحدد مجموعة من الخيارات ذات الصلة في قائمة منسدلة.

     

    <label>

     

    يحدد تسمية للحقل.

     

     

    1  -  عنصر "Input" :

     

    أهم عنصر في الشكل هو <input>. يمكن عرض عنصر <input> بعدة طرق ، اعتمادًا على سمة النوع.

     

     

    <!DOCTYPE html>
    <html lang="en">
    <head>  
    <meta charset="UTF-8">    
    <title>    سمة إدخال نموذج HTML</title>    
    </head>  
    <body>  
    <h2>إدخال نص</h2>    
    <form>    
    First name:      
    <input type="text" name="firstname">      
    Last name:      
    <input type="text" name="lastname">      
    </form>    
    </body>  
    </html>

     

    والنتيجة ستكون كالتالي :

     

    First name:  Last name: 

     

     

    2  -  عنصر "Select" :

     

    يحدد العنصر <select> القائمة المنسدلة. يتم استخدامه غالبًا عندما يتعين عليك إظهار عدد العناصر.

     

     

    <!DOCTYPE html>
    <html lang="en">
    <head>  
    <meta charset="UTF-8">    
    </title>نموذج HTML لتحديد السمة<title>    
    </head>  
    <body>  
    <form action="action-page.php">    
    <select name="Cars">      
    <option value="Audi"> Audi </option>       
    <option value="Mercedes"> Mercedes </option>       
    <option value="Lamborghini"> Lamborghini </option>       
    </select>      
    <input type="submit">      
    </form>      
    </body>
    </html>
    

    والنتيجة ستكون كالتالي :

     

     

     

    ـــ   تحدد سمة الإجراء (action) الذي سيتم تنفيذه عند إرسال النموذج. يجب عليك إضافة الوجهة حيث يتم إرسال النموذج. مثل action="action-page.php"

     

    ـــ   يحدد العنصر <option> الخيارات المختلفة التي يمكن تحديدها.


    ـــ   بشكل افتراضي ، يتم تحديد العنصر الأول في القائمة المنسدلة.


    ـــ   لتحديد خيار محدد مسبقًا ، أضف السمة المحددة إلى الخيار: <option value = "abc" selected>.

     

    3  -  عنصر "Textarea" :

     

    يحدد العنصر <textarea> حقل إدخال متعدد الأسطر.

     

     

    <!DOCTYPE html>
    <html lang="en">
    <head>  
    <meta charset="UTF-8">    
    </title>سمة Textarea<title>    
    </head>  
    <body>  
    <h2>Textarea</h2>    
    <p/>يحدد عنصر textarea حقل إدخال متعدد الأسطر.<p>    
    <form action="action-page.php">    
    <textarea name="message" rows="5" cols="60"> This is a simple Example of Textarea. </textarea>     
    <br>     
    <input type="submit">     
    </form>    
    </body>  
    </html>

     

    والنتيجة ستكون كالتالي :

     

    
    

     

     

    4  -  عنصر "Button" :

     

    يحدد العنصر <button> الزر القابل للنقر.

     

     

    <!DOCTYPE html>
    <html lang="en">
    <head>  
    <meta charset="UTF-8">    
    <title>سمة زر نموذج HTML</title>    
    </head>  
    <body>  
    <button type="button">Click Me</button>    
    </body>  
    </html>

     

    والنتيجة ستكون كالتالي :

     

     

     

    5  -  سمة "Method" :

     

    تحدد سمة method أسلوب HTTP (GET أو POST) لاستخدامها عند إرسال بيانات النموذج. GET هي الطريقة الافتراضية عند إرسال بيانات النموذج.

     

    <form action="action-page.php" method="get">
    <form action="action-page.php" method="post">
    
    

     

     yes   الفرق بين GET و POST

     

     

    النقاط المهمة

     

    GET 

    POST 

     

    تمرير البيانات

     

    يمكن إرسال كمية محدودة من البيانات لأنه يتم إرسال البيانات في header.

    يمكن إرسال كمية كبيرة من البيانات لأنه يتم إرسال البيانات في body.

     

    الحماية

     

    لا يتم تأمين طلب الحصول على البيانات لأن البيانات هي جزء من عنوان URL ، وهذه البيانات محفوظة في محفوظات المتصفح وسجلات الخادم في نص عادي.

    طلب النشر مؤمن لأنه لا يتم عرض البيانات في شريط URL ولا يتم تخزين المعلمات في محفوظات المتصفح أو في سجلات خادم الويب.

     

    المرجعية

     

    يمكن وضع إشارة مرجعية على الطلب وتخزينه مؤقتًا.

    لا يمكن وضع إشارة مرجعية على الطلب وحفظه مؤقتًا.

     

    سهولة الاستخدام

     

    لا تكون طريقة GET مناسبة عند إرسال بيانات حساسة مثل معرف المستخدم أو كلمات المرور.

    يعد POST مفيدًا عندما ترسل بيانات حساسة لأن بياناتك يتم إرسالها في شكل مشفر.

     

    كمية البيانات

     

    كمية البيانات مقيدة ، في العادة إلى 2048 حرفًا.

    لا قيود على كمية البيانات التي يمكن إرسالها.

     

    الاختراق

     

    أسهل في الاختراق.

    أكثر صعوبة في الاختراق.

     

     

     

    6  -  سمة "Name" :

     

    تحدد سمة Name اسم عنصر <input>. من الممارسات الجيدة استخدام هذه السمة ، كما أنها جيدة أيضًا لغرض تحسين محركات البحث.

     

     

    <!DOCTYPE html>
    <html lang="en">
    <head>  
    <meta charset="UTF-8">    
    <title>سمة الاسم نموذج HTML</title>    
    </head>  
    <body>  
    <form action="action-page.php">    
    First name:     
    <input type="text" name="Firstname" value="Tito">      
    Last name:     
    <input type="text" name="lastname" value="Mido">      
    <input type="submit" value="Submit">      
    </form>    
    </body>  
    </html>
    

     

    والنتيجة ستكون كالتالي :

     

    First name:  Last name:  
    

     

     

    7  -  تجميع بيانات النموذج مع <fieldset> :

     

    يُستخدم عنصر <fieldset> لتجميع البيانات ذات الصلة في نموذج ويحدد العنصر <legend> تسمية توضيحية لعنصر <fieldset>.

     

     

    <!DOCTYPE html>
    <html lang="en">
    <head>  
    <meta charset="UTF-8">    
    </title>سمات مجموعة حقول النموذج و Legend<title>    
    </head>  
    <body>  
    <form action="action-page.php">    
    <fieldset>      
    <legend>Personal information:</legend>      
    First name:      
    <input type="text" name="firstname" value="Tito">      
    Last name:      
    <input type="text" name="lastname" value="Mido">      
    <input type="submit" value="Submit">      
    </fieldset>      
    </form>    
    </body>  
    </html>

     

    والنتيجة ستكون كالتالي :

     

    Personal information:

    First name:  Last name: