خصائص حقل الإدخال في HTML: شرح مفصل مع أمثلة عملية
في تطوير واجهات الويب، تُعد حقول الإدخال (input) من أكثر العناصر استخدامًا؛ لأنها الوسيلة الرئيسية لجمع البيانات من المستخدم. كل حقل إدخال يملك مجموعة من الخصائص (attributes) التي تتحكم في سلوكه وشكله وقواعده. في هذا المقال سنغطي أهم هذه الخصائص خطوة بخطوة مع أمثلة عملية ونصائح تطبيقية.
1. القيمة الافتراضية (value)
خاصية value تُستخدم لتعيين قيمة ابتدائية تظهر داخل حقل الإدخال
عند تحميل الصفحة. مفيدة عندما تريد عرض بيانات مُسبقة أو تذكير المستخدم بقيمة.
مثال شائع: تعبئة اسم المستخدم إن كان مخزنًا من قبل.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
</form>2. الحقول للقراءة فقط (readonly)
عند إضافة الصفة readonly للحقل، يصبح النص غير قابل للتعديل لكن
يبقى قابلًا للاختيار والنسخ. الجانب العملي المهم: قيمة الحقل ستُرسل مع الفورم
عند الإرسال، على عكس disabled. إذًا استخدم
readonly عندما تريد منع التعديل لكن ترغب في نقل القيمة للخادم.
<input type="text" value="John" readonly>3. تعطيل الحقول (disabled)
الصفة disabled تحوّل الحقل إلى غير قابل للاستخدام — المستخدم لا
يقدر يضغط عليه أو يكتب بداخله، والمتصفح لن يرسل هذه القيمة عند إرسال النموذج.
مفيد لحقول تعتمد على حالة أخرى أو عند عرض خيارات غير متاحة.
<input type="text" value="John" disabled>4. تحديد العرض الظاهر (size)
تحدد خاصية size العرض الظاهر للحقل بعدد الحروف. القيمة الافتراضية
20. تنطبق على أنواع محددة مثل text, search, tel, url, email, password.
<input type="text" size="50">
<input type="text" size="4">5. الحد الأقصى للأحرف (maxlength)
maxlength تمنع المستخدم من إدخال أكثر من عدد محدد من الأحرف داخل
الحقل. لكنها لا تعطي رسالة توضيحية تلقائية للمستخدم — لذلك من الأفضل إضافة
تنبيه أو عدّاد أحرف بالـ JavaScript في الواجهات الحساسة.
<input type="text" maxlength="4" size="4">6. الحدود العددية أو الزمنية (min و max)
تعمل مع أنواع مثل number, range, date, datetime-local, month, time, week. استخدمها لتحديد نطاق القيم المسموح بها، مثل تاريخ لا يتجاوز يومًا معينًا أو كمية بين 1 و5.
<input type="date" max="1979-12-31">
<input type="number" min="1" max="5">7. السماح بإدخال متعدد (multiple)
تسمح هذه الخاصية بإدخال أكثر من قيمة في نفس الحقل، وتُستخدم مع
file وemail عادةً. مثال عملي: رفع عدة ملفات دفعة
واحدة.
<input type="file" multiple>8. التحقق بالنمط (pattern)
تستقبل الخاصية pattern تعبيرًا نظاميًا
(regular expression)، يتحقق منه المتصفح عند محاولة إرسال النموذج. لا
تنسَ استخدام title لشرح النمط للمستخدم.
<input type="text" pattern="[A-Za-z]{3}" title="Three letter country code">9. نص الإرشاد داخل الحقل (placeholder)
يُظهر نصًا توضيحيًا داخل الحقل قبل أن يبدأ المستخدم في الكتابة. ممتاز لعرض صيغة متوقعة أو مثال سريع.
<input type="tel" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">10. الحقول الإلزامية (required)
عند إضافة required يصبح الحقل مطلوبًا ولا يمكن إرسال النموذج إن
لم يُملأ. تعمل مع معظم أنواع الحقول.
<input type="text" name="username" required>11. الفواصل القانونية للقيم (step)
تحدد المسافة بين القيم القانونية — مثلًا إذا كانت step="3" القيم
ستكون ... -3, 0, 3, 6 ... وتعمل مع أنواع number, range, date، وغيرها.
<input type="number" step="3">12. التركيز التلقائي (autofocus)
تمنح الحقل التركيز فور تحميل الصفحة. احرص على وجود حقل واحد فقط بهذه الخاصية لتفادي تشتت المستخدم.
<input type="text" autofocus>13. الصورة كزر إرسال (height و width)
عند استخدام input type="image" حدد العرض والارتفاع لضمان عدم
تحريك التخطيط أثناء تحميل الصور.
<input type="image" src="img_submit.gif" width="48" height="48" alt="Submit">14. قائمة القيم المقترحة (list + datalist)
باستخدام datalist يمكنك توفير اقتراحات للمستخدم دون إجباره عليها
— يمكن الكتابة يدويًا أو اختيار أحد الخيارات.
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
</datalist>15. الإكمال التلقائي (autocomplete)
تتحكم في قدرة المتصفح على اقتراح قيم محفوظة سابقًا. غالبًا تُفعل بشكل افتراضي، ويمكن تعطيلها لحقل معين لأسباب أمان أو تجربة مستخدم.
<form autocomplete="on">
<input type="email" autocomplete="off">
</form>نصائح عامة وأمنية
- التحقق على جهة العميل (client-side) مهم لتحسين تجربة المستخدم، لكنه لا يغني عن التحقق على الخادم (server-side) لأمان البيانات.
-
استخدم
patternوmaxlengthلتحسين دقة البيانات، لكن افترض دائمًا أن البيانات يمكن تغييرها من قبل مستخدم خبيث. -
عند استقبال ملفات استخدم
enctype="multipart/form-data"داخل الفورم وتحقق من نوع وحجم الملفات على الخادم.