إعلان
دورة تطوير التطبيقات باستخدام لغة JavaScript في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp. تعلم الآن
دورة تطوير واجهات المستخدم في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية. تعلم الآن
تطوير تطبيقات باستخدام لغة بايثون في هذه الدورة ستتعلم أساسيات البرمجة بلغة بايثون وصولاً إلى التعامل مع أشهر أطر العمل (Flask و Django) و ستتعلم كيف تبني متجر إلكتروني يمكن للمستخدمين البيع و الشراء من خلاله. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة PHP في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة Ruby في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O. تعلم الآن
دورة علوم الحاسوب هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب. تعلم الآن

    HTML حقول الإدخال

    إضافة مربع نص

    لإضافة مربع نص في الصفحة يمكنك استخدام الوسم <input> مع الإشارة إلى أن هذا الوسم يمكن استخدامه لإضافة الكثير من الأشياء الأخرى و التي سنتعرف عليها في دروس لاحقة.

    يمكنك إضافة الخصائص التالية لهذا الوسم:

    • id نضيفها له في حال أردنا ربطه بوسم <label>.
    • name نضيفها له حتى يتم إرسال القيمة الموضوعة فيه عند النقر على زر الإرسال.
    • type لتحديد النوع أو الشكل الذي سيتم عرضه مكان الوسم في الصفحة.
    • value لإعطائه قيمة أولية.
    • readonly لجعل قيمته غير قابلة للتغيير.
    • disabled لجعله يظهر بلون باهت و قيمته غير قابلة للنسخ أو التغيير.
    • size لتحديد كم حرف تريد أن يظهر بداخل المربع (كأنك تحدد حجمه نسبةً لعدد الأحرف التي يمكن إدخالها فيه).
    • maxlength لتحديد أقصى عدد أحرف يمكن أن إدخلها فيه.
    • placeholder لإظهار تلميح بداخل مربع النص يظهر في حال كان فارغاً.
    • required يمكنك إضافتها له لإجبار المستخدم على إدخال قيمة في مربع النص في حال تركه فارغاً و نقر على زر إرسال البيانات.


    تحديد نوع مربع النص

    بالنسبة لنوع مربع النص الذي نحدده بواسطة الخاصية type فإن الأشكال التالية هي الأكثر أهمية:

    • <input type="text"> للحصول على مربع نص عادي و هذا هو النوع الإفتراضي له.
    • <input type="password"> للحصول على مربع نص مخصص لإدخال كلمة المرور.
    • <input type="number"> للحصول على مربع نص مخصص لإدخال الرقام.
    • <input type="email"> للحصول على مربع نص مخصص لإدخال بريد إلكتروني.

    إفتراضياً في حال لم تحدد شكل الوسم <input> سيتم إعتبار أنك تريد عرض مربع نص عادي <input type="text">.


    في المثال التالي قمنا بعرض مربع نص بدون تحديد نوعه.

    المثال الأول

    <label for="username">Username</label><br>
    <input id="username" name="username">
    		

    جرب الكود



    في المثال التالي قمنا بعرض مربع نص مخصص لإدخال بريد إلكتروني و مربع نص مخصص لإدخال كلمة مرور.
    ملاحظة: هنا في حال لم يدخل المستخدم نص يشبه البريد الإلكتروني فإنه لن يتمكن من النقر على زر إرسال البيانات .

    المثال الثاني

    <label for="email">Email</label><br>
    <input type="email" id="email" name="email"><br><br>
    <label for="password">Password</label><br>
    <input type="password" id="password" name="password">
    		

    جرب الكود



    في المثال التالي قمنا بعرض مربع نص مخصص لإدخال رقم.
    ملاحظة: هنا يسمح للمستخدم بإدخال أعداد فقط بداخل مربع النص.

    المثال الثالث

    <label for="age">Your age</label><br>
    <input type="number" id="age" name="age">
    		

    جرب الكود



    في المثال التالي قمنا بتحديد أن عدد الأحرف التي يمكن أن تظهر بداخل مربع النص هو 20 و عدد الأحرف الأقصى التي يمكن إدخالها فيه هو 25.

    المثال الرابع

    <label for="username">Username</label><br>
    <input type="text" id="username" name="username" size="20" maxlength="25">
    		

    جرب الكود



    في المثال التالي قمنا بإضافة قيمة أولية في مربع النص.

    المثال الخامس

    <label for="username">Username</label><br>
    <input type="text" id="username" name="username" value="mhamad">
    		

    جرب الكود



    في المثال التالي قمنا بجعل قيمة مربع النص قابلة للقراءة فقط, أي لا يمكن تغييرها.

    المثال السادس

    <label for="username">Username</label><br>
    <input type="text" id="username" name="username" value="mhamad" readonly>
    		

    جرب الكود



    في المثال التالي قمنا بجعل مربع النص يظهر بشكل غير مفعّل مما يعني أنه يظهر بلون باهت و قيمته غير قابلة للنسخ أو التغيير.

    المثال السابع

    <label for="username">Username</label><br>
    <input type="text" id="username" name="username" value="mhamad" disabled>
    		

    جرب الكود



    في المثال التالي قمنا بجعل مربعات النصوص تظهر تلميحات في حال كانت فارغة.

    المثال الثامن

    <label for="email">Email</label><br>
    <input type="email" id="email" name="email" placeholder="Enter your email address"><br><br>
    <label for="password">Password</label><br>
    <input type="password" id="password" name="password" placeholder="Enter your password">
    		

    جرب الكود



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

    المثال التاسع

    <label for="email">Email</label><br>
    <input type="email" id="email" name="email" required><br><br>
    <label for="password">Password</label><br>
    <input type="password" id="password" name="password" required>
    		

    جرب الكود

    إضافة مربع نص متعدد الأسطر

    نستخدم الوسم <textarea> على هذا النحو <textarea>text</textarea> لعرض مربع نص يتألف من أكثر من سطر.
    مكان الكلمة text نمرر كل النص الذي نريد عرضه بداخله.

    في العادة نستخدم مربع نص متعدد الأسطر حين نطلب من المستخدم إدخال عنوانه أو نبذة عنه.


    يمكنك إضافة الخصائص التالية لهذا الوسم:

    • id نضيفها له في حال أردنا ربطه بوسم <label>.
    • name نضيفها له حتى يتم إرسال القيمة الموضوعة فيه عند النقر على زر الإرسال.
    • readonly نضيفها له في حال أردنا جعل قيمته غير قابلة للتغيير.
    • disabled نضيفها له في حال أردنا جعله يظهر بلون باهت و قيمته غير قابلة للنسخ أو التغيير.
    • cols نضيفها له في حال أردنا تحديد كم حرف كحد أقصى يمكن أن يظهر فيه على نفس السطر, أي كأنك تحدد عرضه نسبةً لعدد الأحرف الأقصى التي يمكن إدخالها في كل سطر.
    • rows نضيفها له في حال أردنا تحديد كم سطر يمكن أن يظهر فيه في كل مرة, أي كأنك تحدد طوله نسبةً لعدد الأسطر التي تحددها له.


    في المثال التالي قمنا بإضافة مربع نص يتألف من أكثر من سطر مع وضع قيمة أولية فيه.

    المثال الأول

    <label for="biography">Biography</label><br>
    <textarea name="biography" id="biography">Harmash.com is published in 2014.</textarea>
    		

    جرب الكود



    في المثال التالي قمنا بإضافة مربع نص يتألف من أكثر من سطر مع تحديد عدد الأحرف الأقصى التي يمكن أن تظهر في كل سطر و عدد الأسطر الإفتراضية التي ستظهر فيه.

    المثال الثاني

    <label for="biography">Biography</label><br>
    <textarea name="biography" id="biography" cols="40" rows="4">Harmash.com is published in 2014.</textarea>
    		

    جرب الكود



    في المثال التالي قمنا بإضافة مربع نص يتألف من أكثر من سطر مع تحديد حجمه و جعل قيمته قابلة للقراءة فقط.

    المثال الثالث

    <label for="biography">Biography</label><br>
    <textarea name="biography" id="biography" cols="40" rows="4" readonly>Harmash.com is published in 2014.</textarea>
    		

    جرب الكود



    في المثال التالي قمنا بإضافة مربع نص يتألف من أكثر من سطر مع تحديد حجمه و جعله غير مفعّل, أي لا يمكن تغيير قيمته أو نسخها.

    المثال الرابع

    <label for="biography">Biography</label><br>
    <textarea name="biography" id="biography" cols="40" rows="4" disabled>Harmash.com is published in 2014.</textarea>
    		

    جرب الكود

    إعلان

    Eqla3Tech.com

    شروحات مكتوبة حول لغات البرمجة و تقنية المعلومات باللغة العربية مقدمة من إقلاع تك.

    لغة جافا لغة ++C قواعد البيانات نظام ويندوز نظام لينكس الشبكات تقنية المعلومات الأمن السيبراني

    الدورات

    أدوات مساعدة

    الأقسام

    دورات
    مقالات أسئلة مشاريع كتب