النماذج: input وlabel وbutton
أنشئ نماذج HTML سهلة الوصول باستخدام حقول إدخال معنونة، وأنواع إدخال مختلفة، وtextarea وselect وأزرار إرسال.
النماذج: input وlabel وbutton درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
لماذا نستخدم نماذج HTML؟
النماذج هي الطريقة الأساسية التي يرسل بها المستخدمون البيانات إلى الخادم، مثل تسجيل الدخول والبحث وإتمام الشراء وإرسال الملاحظات. توفر المتصفحات قدرًا كبيرًا من السلوك المضمّن — كالتحقق والإدخال من لوحة المفاتيح ولوحات مفاتيح الأجهزة المحمولة — وتحصل عليه مجانًا عند استخدام عناصر النماذج الأصلية.
عنصر <form>
يحيط عنصر <form> بكل عناصر التحكم المرتبطة. تحدد السمة action عنوان URL الذي يستقبل البيانات، بينما تحدد method استخدام GET أو POST. في تطبيقات SPA، غالبًا ما تمنع الإرسال الافتراضي وتعالجه باستخدام JavaScript.
<form action="/submit" method="POST">
<!-- inputs go here -->
</form>حقلا النص والبريد الإلكتروني
عنصر <input> هو الأداة الأساسية في النماذج. تغيّر السمة type سلوكه. استخدم type="text" للنص الحر، وtype="email" لعناوين البريد الإلكتروني (إذ يتحقق من التنسيق ويعرض لوحة المفاتيح المناسبة على الأجهزة المحمولة).
<input type="text" name="username" placeholder="Enter your name">
<input type="email" name="email" placeholder="you@example.com">أنواع Password وNumber وغيرها
تشمل أنواع input الأخرى المفيدة: password (يخفي الأحرف)، وnumber (يتحقق من القيم الرقمية ويعرض أزرار الزيادة والنقصان)، وdate (يعرض منتقي التاريخ)، وrange (شريط تمرير)، وcheckbox (مفتاح تبديل منطقي)، وradio (اختيار واحد من عدة خيارات).
<input type="password" name="pass">
<input type="number" name="age" min="0" max="120">
<input type="date" name="birthday">
<input type="range" min="0" max="100" value="50">عنصر <label> — أساسي لإتاحة الوصول
يجب أن يكون لكل input عنصر <label> مرتبط به. يوضح label للمستخدمين (ولقارئات الشاشة) الغرض من الحقل. يؤدي النقر على label إلى تركيز input. استخدم السمة for المطابقة للسمة id في input.
<label for="username">Username</label>
<input type="text" id="username" name="username">Textarea وSelect
استخدم <textarea> للنص متعدد الأسطر (مثل التعليقات). واستخدم <select> مع عناصر <option> الفرعية لخيارات القوائم المنسدلة. أدرج دائمًا خيارًا فارغًا افتراضيًا يتضمن مطالبة مثل «اختر فئة».
<textarea name="message" rows="4" placeholder="Write your message..."></textarea>
<select name="level">
<option value="">Select level...</option>
<option value="a1">A1 Beginner</option>
<option value="b1">B1 Intermediate</option>
</select>مربعات الاختيار وأزرار الاختيار
اجمع مربعات الاختيار المرتبطة باستخدام <fieldset> و<legend>. تتيح أزرار الاختيار التي تشترك في قيمة name تحديد خيار واحد فقط. ويحتاج كل زر إلى تسمية خاصة به.
<fieldset>
<legend>Preferred languages</legend>
<label><input type="checkbox" name="lang" value="js"> JavaScript</label>
<label><input type="checkbox" name="lang" value="ts"> TypeScript</label>
</fieldset>الأزرار: submit وreset وbutton
يُرسل <button type="submit"> النموذج. وتمسح type="reset" جميع الحقول. أما type="button" فلا ينفّذ أي إجراء افتراضيًا، ويُستخدم مع مستمعات الأحداث في JavaScript. اضبط النوع دائمًا، لأن النوع الافتراضي هو submit.
<button type="submit">Send Message</button>
<button type="reset">Clear Form</button>
<button type="button" id="preview">Preview</button>تجميع حقول الإدخال باستخدام <fieldset>
تجمع <fieldset> عناصر التحكم المرتبطة بصريًا ودلاليًا. وتوفر <legend> المطلوبة عنوانًا توضيحيًا. وتعلن قارئات الشاشة عن هذا العنوان قبل كل عنصر تحكم في المجموعة، مما يوفر السياق.
السمة name — ما الذي يُرسل؟
عند إرسال نموذج، ترسل المتصفحات زوج name=value لكل عنصر تحكم. ولا تُضمَّن إلا عناصر التحكم التي تحتوي على سمة name. وبالنسبة إلى مربعات الاختيار، لا تُرسل إلا المربعات المحددة.
<input type="text" name="firstName" value="Alice">
<!-- Submits: firstName=Alice -->الملء التلقائي والإكمال التلقائي
اضبط قيم سمة autocomplete مثل email أو given-name أو new-password أو current-password لمساعدة مديري كلمات المرور والملء التلقائي في المتصفح على ملء النماذج بشكل صحيح.
<input type="email" name="email" autocomplete="email">
<input type="password" name="pass" autocomplete="current-password">تحقق سريع
ما الغرض من سمة for في عنصر <label>؟
مراجعة: نماذج HTML سهلة الوصول
يحتاج كل حقل إدخال إلى تسمية. اختر نوع حقل الإدخال المناسب للبيانات. اجمع عناصر التحكم المرتبطة باستخدام fieldset. استخدم button type=submit لإرسال النموذج. استفد من ميزات النماذج الأصلية — مثل التحقق والتنقل باستخدام لوحة المفاتيح والملء التلقائي — قبل إضافة JavaScript.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 41
- الدروس
- 163
الأسئلة الشائعة
هل درس «النماذج: input وlabel وbutton» مجاني؟
نعم — نص درس «النماذج: input وlabel وbutton» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «النماذج: input وlabel وbutton»؟
أنشئ نماذج HTML سهلة الوصول باستخدام حقول إدخال معنونة، وأنواع إدخال مختلفة، وtextarea وselect وأزرار إرسال. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «النماذج: input وlabel وbutton»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- بنية المستند: DOCTYPE وhtml وhead وbody
- الوسوم الدلالية: header وnav وmain وarticle وfooter
- النصوص والصور والروابط والقوائم
- النماذج: input وlabel وbutton