جاري التحميل...

أنواع input في HTML

عناصر النموذج حددت الوسوم داخل form. أنواع input تركز على وسم واحد: input. سمة type تختار وجه التحكم. هذه الحصة كتالوج type. مساعدات مثل required لاحقاً.

لماذا أنواع الإدخال مهمة

type=text يعمل تقريباً لكل شيء، لكن الهاتف يظهر لوحة خاطئة وكلمات المرور تبقى مرئية والتواريخ نص حر. مطابقة type للبيانات تحسّن الكتابة والفحوص الخفيفة وشكل القيم المرسلة.

إجابة مباشرة

1) ضع type على input — text وemail وpassword وnumber وcheckbox وradio وdate وfile وhidden وsubmit. 2) اربط كل ظاهر بـ label. 3) الراديوهات لنفس الإجابة تشترك في name؛ checkbox مستقل. 4) يفضّل button type=submit. 5) type يختار الوجه فقط — action/method والسمات اللاحقة طبقات أخرى.

📊 Starter input types

type	Use	Beginner tip
text	General single-line text	Default when nothing fitter exists
email	Email addresses	Mobile email keyboard + light format check
password	Masked secrets	Never store the real password in page source
number	Numeric values	Good for ages/qty — still validate on the server
checkbox	Independent on/off	Many can be checked at once
radio	One choice in a named group	Same name = one group
date	Calendar date	Browser UI varies; value is YYYY-MM-DD style
file	Upload a file	Needs multipart form encoding for real uploads
hidden	Value not shown	Still submitted with name/value

تسجيل: حقول مكتوبة النوع

نموذج انضمام صغير: بريد وكلمة مرور وعمر رقمي وتاريخ بدء.

Signup with typed inputs

html

<form action="/join" method="post">
<label for="mail">Email</label>
<input id="mail" name="mail" type="email">

<label for="pw">Password</label>
<input id="pw" name="pw" type="password">

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

<label for="start">Start date</label>
<input id="start" name="start" type="date">

<button type="submit">Join</button>
</form>

قراءة مثال التسجيل

email واجهة بريد
password يخفي الأحرف
number إدخال رقمي
date عنصر تاريخ
label مع for/id وname للمفتاح
action/method من الدروس السابقة

استبيان: checkbox وradio وfile

المفاتيح والرفع نفس وسم input بأنواع مختلفة. الراديوهات تشترك في name=plan. checkbox مستقل. file يفتح منتقي ملفات.

Survey checkbox radio file

html

<form action="/survey" method="post" enctype="multipart/form-data">
<label>
<input type="checkbox" name="news" value="yes">
Newsletter
</label>

<fieldset>
<legend>Plan</legend>
<label>
<input type="radio" name="plan" value="free" checked>
Free
</label>
<label>
<input type="radio" name="plan" value="pro">
Pro
</label>
</fieldset>

<label for="resume">Resume</label>
<input id="resume" name="resume" type="file">

<button type="submit">Send</button>
</form>

قراءة مثال الاستبيان

checkbox النشرة مستقل
الراديوهات بنفس name خيار حصري
التغليف بـ label يجعل النص قابلاً للنقر
file للرفع مع multipart
fieldset يؤطر Plan — التركيز على type
الدرس التالي يضيف required ونحوها

اختيار النوع المناسب

نص قصير: text
بريد/كلمة مرور: email/password
عدد أو عمر: number
خيار حصري: radio بنفس name
مفتاح مستقل: checkbox
يوم تقويم: date
مرفق: file
قيمة مخفية: hidden
النص متعدد الأسطر يبقى textarea

تمرين — بدّل أنواع الإدخال

انسخ التسجيل؛ غيّر email إلى text
password مؤقتاً text
حقل number ثانٍ للكمية
راديو بأسماء مختلفة ثم أصلحه
Newsletter وPro؛ اكتب الأسماء المتوقعة
file بلا multipart — للوعي
جملة: type يختار وجه input

أخطاء شائعة

text لكلمات المرور
راديو بأسماء مختلفة لمجموعة واحدة
بدون label
توقع رفع file بلا encoding
ظن أن type يستبدل action أو name
input لنص طويل بدل textarea
خلط مع درس السمات التالي

ملخص

وسم input واحد — أوجه كثيرة عبر type
طابق type والبيانات
الراديوهات تشترك في name؛ checkbox مستقل
سمِّ الظاهر دائماً
عناصر النموذج وسمات input طبقات منفصلة
التالي: سمات الإدخال

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى