حقول الإدخال وأنواعها (input - All Types)

input types htmlحقول htmlhtml inputform inputs htmlinput type html

الشرح

<input> أكثر عنصر تنوعاً في HTML — صفة type تغير طريقة عمله كلياً.

جميع أنواع input: • text: نص عادي • email: بريد إلكتروني (مع تحقق) • password: كلمة مرور (مخفية) • number: رقم فقط • tel: رقم هاتف • url: رابط URL • search: حقل بحث • date: تاريخ • time: وقت • datetime-local: تاريخ ووقت • month: شهر وسنة • week: أسبوع وسنة • color: منتقي لون • range: شريط تمرير • file: رفع ملف • checkbox: مربع اختيار • radio: زر راديو • submit: زر إرسال • reset: زر إعادة تعيين • button: زر عادي • hidden: حقل مخفي • image: زر صورة

الصياغة (Syntax)

syntax

1	<!-- أنواع النصوص -->
2	<input type="text" placeholder="اسمك">
3	<input type="email" placeholder="بريدك@example.com">
4	<input type="password" placeholder="••••••••">
5	<input type="tel" placeholder="+20 100 000 0000">
6	<input type="url" placeholder="https://example.com">
7	<input type="search" placeholder="ابحث...">
8
9	<!-- الأرقام -->
10	<input type="number" min="1" max="100" step="1">
11	<input type="range" min="0" max="100" value="50">
12
13	<!-- التاريخ والوقت -->
14	<input type="date">
15	<input type="time">
16	<input type="datetime-local">
17	<input type="month">
18	<input type="week">
19
20	<!-- الاختيار -->
21	<input type="color" value="#e34c26">
22	<input type="file" accept="image/*" multiple>
23	<input type="checkbox" checked> موافق
24	<input type="radio" name="gender" value="male"> ذكر
25	<input type="radio" name="gender" value="female"> أنثى
26	<input type="hidden" name="token" value="abc123">

أمثلة عملية

مثال 1: نموذج شامل بأنواع مختلفة

نموذج شامل بأنواع مختلفة

1	<form action="/profile" method="POST">
2	<!-- نص -->
3	<label for="username">اسم المستخدم</label>
4	<input type="text" id="username" name="username"
5	minlength="3" maxlength="20" pattern="[a-zA-Z0-9_]+"
6	placeholder="ahmed_123" required>
7
8	<!-- بريد -->
9	<label for="user-email">البريد</label>
10	<input type="email" id="user-email" name="email" required>
11
12	<!-- عمر -->
13	<label for="age">العمر</label>
14	<input type="number" id="age" name="age" min="16" max="100">
15
16	<!-- تاريخ الميلاد -->
17	<label for="dob">تاريخ الميلاد</label>
18	<input type="date" id="dob" name="dob">
19
20	<!-- لون المفضل -->
21	<label for="fav-color">اللون المفضل</label>
22	<input type="color" id="fav-color" name="favColor" value="#e34c26">
23
24	<!-- صورة الملف -->
25	<label for="avatar">صورتك الشخصية</label>
26	<input type="file" id="avatar" name="avatar"
27	accept="image/jpeg,image/png,image/webp">
28
29	<!-- موافقة -->
30	<label>
31	<input type="checkbox" name="agree" required>
32	أوافق على الشروط والأحكام
33	</label>
34
35	<button type="submit">حفظ الملف الشخصي</button>
36	</form>

نصائح احترافية

—استخدم type الصحيح لكل حقل — المتصفح يوفر تحققاً تلقائياً ولوحة مفاتيح ملائمة على الموبايل. email يفتح لوحة مفاتيح بها @ والأرقام تفتح لوحة رقمية.

الدرس السابق

عنصر النموذج وصفاته (form, action, method)

الدرس التالي

التسميات والنصوص الطويلة (label, textarea)

حقول الإدخال وأنواعها (input - All Types)

input types htmlحقول htmlhtml inputform inputs htmlinput type html

الشرح

<input> أكثر عنصر تنوعاً في HTML — صفة type تغير طريقة عمله كلياً.

الصياغة (Syntax)

syntax

1	<!-- أنواع النصوص -->
2	<input type="text" placeholder="اسمك">
3	<input type="email" placeholder="بريدك@example.com">
4	<input type="password" placeholder="••••••••">
5	<input type="tel" placeholder="+20 100 000 0000">
6	<input type="url" placeholder="https://example.com">
7	<input type="search" placeholder="ابحث...">
8
9	<!-- الأرقام -->
10	<input type="number" min="1" max="100" step="1">
11	<input type="range" min="0" max="100" value="50">
12
13	<!-- التاريخ والوقت -->
14	<input type="date">
15	<input type="time">
16	<input type="datetime-local">
17	<input type="month">
18	<input type="week">
19
20	<!-- الاختيار -->
21	<input type="color" value="#e34c26">
22	<input type="file" accept="image/*" multiple>
23	<input type="checkbox" checked> موافق
24	<input type="radio" name="gender" value="male"> ذكر
25	<input type="radio" name="gender" value="female"> أنثى
26	<input type="hidden" name="token" value="abc123">

أمثلة عملية

مثال 1: نموذج شامل بأنواع مختلفة

نموذج شامل بأنواع مختلفة

1	<form action="/profile" method="POST">
2	<!-- نص -->
3	<label for="username">اسم المستخدم</label>
4	<input type="text" id="username" name="username"
5	minlength="3" maxlength="20" pattern="[a-zA-Z0-9_]+"
6	placeholder="ahmed_123" required>
7
8	<!-- بريد -->
9	<label for="user-email">البريد</label>
10	<input type="email" id="user-email" name="email" required>
11
12	<!-- عمر -->
13	<label for="age">العمر</label>
14	<input type="number" id="age" name="age" min="16" max="100">
15
16	<!-- تاريخ الميلاد -->
17	<label for="dob">تاريخ الميلاد</label>
18	<input type="date" id="dob" name="dob">
19
20	<!-- لون المفضل -->
21	<label for="fav-color">اللون المفضل</label>
22	<input type="color" id="fav-color" name="favColor" value="#e34c26">
23
24	<!-- صورة الملف -->
25	<label for="avatar">صورتك الشخصية</label>
26	<input type="file" id="avatar" name="avatar"
27	accept="image/jpeg,image/png,image/webp">
28
29	<!-- موافقة -->
30	<label>
31	<input type="checkbox" name="agree" required>
32	أوافق على الشروط والأحكام
33	</label>
34
35	<button type="submit">حفظ الملف الشخصي</button>
36	</form>

نصائح احترافية

—استخدم type الصحيح لكل حقل — المتصفح يوفر تحققاً تلقائياً ولوحة مفاتيح ملائمة على الموبايل. email يفتح لوحة مفاتيح بها @ والأرقام تفتح لوحة رقمية.

الدرس السابق

عنصر النموذج وصفاته (form, action, method)

الدرس التالي

التسميات والنصوص الطويلة (label, textarea)