زر الادخال Submit button

نموذج ادخال بيانات form 

 

لو عايز تفهم الكود اللي في الصورة اشترك في الكورس بتاعنا

alexkids2022@gmail.com

#TechTalk

#Coding

#WebDesign

#Tip

#HTML

#HTMLlesson

#css

#درس

#تقنية

#تصميم_مواقع

زر الادخال Submit:

في الدرس السابق عرفنا ازاي نصمم Form في الصفحة بتاعتنا , وقمنا بإضافة اول عنصر من عناصر النموذج وهو الصندوق النصي Text box باستخدام الوسم <input>

كمان عرفنا شوية صفات attributes للوسم <input>

• زي type اللي بتاخد القيمة text عشان ترسم الصندوق النصي
• و زي size اللي بيحدد ابعاد الأداة على الصفحة , واللي بياخد القيمة 100px عشان ترسم الصندوق النصي بعرض 100 بيكسل
• و آخر attribute اتعلمناها الدرس السابق maxlength اللي بحدد من خلالها اقصى عدد من الاحرف اقدر ادخلها في الtext box

وكتبنا الكود ده

<form>

First Name : <input type="text" size="100px" maxlength="15"

<form/>

في درس النهاردة هنتعرف على خاصية تساعدني اكتب قيمة افتراضية للمستخدم, وهي الخاصية value واللي بتاخد قيمة عبارة عن جملة هتشرح للمستخدم زي مثلا طلب ادخال البيانات, فالكود هيكون كده:

<form>

First Name : <input type="text" size="100px" maxlength="15" value="Please, Enter your first name">

<form/>

طيب وبعد ما ندخل text box هنعمل ايه؟ اكيد محتاجين نبعت البيان ده للserver, وده هيتم عن طريق وضع زر ارسال Submit Button في النموذج لما اضغط عليه يتم تنفيذ ارسال البيانات

عشان ندخل زر Submit في الform في اكتر من طريقة

• أولها عن طريق <input>, فهيكون الكود كده

<form>

First Name : <input type="text" size="100px" maxlength="15" value="Please, Enter your first name"><br/><input type="submit">

<form/>

ممكن كمان بنفس الطريقة اعمل زر يساعدني على تفريغ النموذج واعادته لوضع الافتراضي باستخدام الزر Reset, وهيكون الكود كده

<form>

First Name : <input type="text" size="100px" maxlength="15" value="Please, Enter your first name"><br/><input type="submit"> <input type="reset">

<form/>

طيب , هي دي كل الطرق لادخال زر في النموذج

اجابة السؤال ده هتكون في الدرس القادم ان شاء الله , تابعونا لمزيد من المعلومات

لكل ولادي في جروبات ال HTML او اللي بيتعلموا اي نوع من انواع البرمجة او تصميم المواقع:

"لازم تكتب الكود بإيدك تاني و تجربه" , "متركنش الكود" هيفرق معاك و يديلك خبرة وهيبقى الموضوع ابسط كتير

المزيد من الدروس و المقالات التقنية هتلاقوها على صفحتنا

https://www.facebook.com/atfalalexandria

يمكنكم الالتحاق بدورة HTML & CSS بسعر مميز جدا خلال اجازة منتصف العام الدراسي, المزيد من التفاصيل على

alexkids2022@gmail.com

في انتظار تعليقاتكم و اسئلتكم

اهلا بيكم دايما معانا

متنسوش #شير خلي المعلومة توصل لأكبر عدد من ولادنا

شكراً جزيلاً 🌹