44- سمات عناصر الإدخال في HTML

يصف هذا الفصل السمات المختلفة لعنصر الإدخال <input> في HTML.

السمة value

تحدد سمة value القيمة الأولية لحقل الإدخال.

مثال:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

السمة readonly

تحدد سمة readonly أن حقل الإدخال للقراءة فقط.

لا يمكن تعديل حقل الإدخال للقراءة فقط، ولكن يمكن للمستخدم الانتقال إليه باستخدام مفتاح Tab، وتظليله، ونسخ النص منه.

سيتم إرسال قيمة حقل الإدخال للقراءة فقط عند إرسال النموذج.

مثال:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

السمة disabled

تحدد سمة disabled أن حقل الإدخال يجب أن يكون معطلاً.

حقل الإدخال المعطل غير قابل للاستخدام ولا يمكن النقر عليه.

لن يتم إرسال قيمة حقل الإدخال المعطل عند إرسال النموذج.

مثال:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

السمة size

تحدد سمة size العرض المرئي، بالحرف، لحقل الإدخال.

القيمة الافتراضية لـ size هي 20 حرفًا.

هام: تعمل سمة size مع أنواع الإدخال التالية فقط: text, search, tel, url, email, و password.

مثال:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4">
</form>

السمة maxlength

تحدد سمة maxlength الحد الأقصى لعدد الأحرف المسموح بها في حقل الإدخال.

هام:

• عند تحديد قيمة maxlength، لن يقبل حقل الإدخال أكثر من العدد المحدد من الأحرف.
• لا توفر هذه السمة أي ملاحظات للمستخدم عند الوصول إلى الحد الأقصى. إذا كنت تريد تنبيه المستخدم، فيجب كتابة كود JavaScript للقيام بذلك.

مثال:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>

السمتان min و max

تحدد السمتان min و max القيمتين الدنيا والقصوى المسموح بهما في حقل الإدخال.

تعمل السمتان min و max مع أنواع الإدخال التالية فقط: number, range, date, datetime-local, month, time, و week.

نصيحة: استخدم السمتين max و min معاً لإنشاء نطاق من القيم المسموح بها.

مثال:

<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

السمة multiple

تحدد السمة multiple أنه يُسمح للمستخدم بإدخال أكثر من قيمة واحدة في حقل الإدخال.

تعمل السمة multiple مع أنواع الإدخال التالية فقط: email و file.

مثال:

<form>
  <label for="files">Select files:</label>
  <input type="file" id="files" name="files" multiple>
</form>

السمة pattern

تحدد السمة pattern تعبيرًا نمطيًا (regular expression) يتم التحقق من قيمة حقل الإدخال مقابله عند إرسال النموذج.

تعمل السمة pattern مع أنواع الإدخال التالية فقط: text, date, search, url, tel, email, و password.

نصائح:

• استخدم السمة title لوصف النمط المطلوب لمساعدة المستخدم.
• تعلم المزيد عن التعبيرات النمطية (regular expressions) في دروس JavaScript.

مثال:

<form>
  <label for="country_code">Country code:</label>
  <input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]{3}" title="Three letter country code">
</form>

في هذا المثال، حقل الإدخال يقبل فقط 3 أحرف من الأبجدية الإنجليزية (بدون أرقام أو رموز خاصة).

عند عدم تطابق قيمة الحقل مع التعبير النمطي المحدد، سيمنع المتصفح إرسال النموذج ويعرض رسالة خطأ للمستخدم (غالبًا ما تكون عامة).

السمة placeholder

تحدد السمة placeholder تلميحًا قصيرًا يصف القيمة المتوقعة لحقل الإدخال، مثل قيمة نموذجية أو وصف قصير لنمط الإدخال المتوقع.

يتم عرض هذا التلميح داخل حقل الإدخال قبل أن يقوم المستخدم بإدخال أي قيمة، ويختفي عند بدء الكتابة.

تعمل السمة placeholder مع أنواع الإدخال التالية فقط: text, search, url, tel, email, و password.

مثال:

<form>
  <label for="phone">Enter a phone number:</label>
  <input type="tel" id="phone" name="phone"
  placeholder="123-45-678"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

السمة required

تحدد السمة required أن حقل الإدخال يجب أن يكون مملوءًا قبل إرسال النموذج.

تعمل السمة required مع أنواع الإدخال التالية: text, search, url, tel, email, password, date pickers, number, checkbox, radio, و file.

مثال:

حقل الإدخال المطلوب:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
</form>

السمة step

تحدد السمة step الفواصل الزمنية الرقمية المسموح بها في حقل الإدخال.

مثال: إذا كانت step=”3″، فإن الأرقام المسموح بها ستكون 0، 3، 6، 9، -3، -6، وهكذا.

نصيحة: يمكن استخدام هذه السمة مع السمتين max و min لإنشاء نطاق من القيم المسموح بها بدقة أكبر.

تعمل السمة step مع أنواع الإدخال التالية فقط: number, range, date, datetime-local, month, time, و week.

مثال:

<form>
  <label for="points">Points:</label>
  <input type="number" id="points" name="points" step="3">
</form>

هام: قيود الإدخال ليست مضمونة تمامًا، حيث يوفر JavaScript طرقًا عديدة لإضافة مدخلات غير قانونية. لضمان تقييد المدخلات بشكل آمن، يجب التحقق منها أيضًا من قِبل مستقبل البيانات (الخادم)!

هذا يعني أنه لا ينبغي الاعتماد على السمات المدمجة في HTML فقط لفرض قيود الإدخال، حيث يمكن التحايل عليها باستخدام تقنيات JavaScript.

السمة autofocus

تحدد السمة autofocus أن حقل الإدخال يجب أن يحصل على التركيز تلقائيًا عند تحميل الصفحة.

معنى حصول حقل الإدخال على التركيز هو أن المؤشر (cursor) سيظهر داخل الحقل، ويكون جاهزًا لاستقبال إدخال المستخدم مباشرة دون الحاجة إلى النقر عليه.

مثال:

السماح لحقل إدخال “الاسم الأول” بالتركيز تلقائيًا عند تحميل الصفحة:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

سمات الارتفاع والعرض (height و width)

تحدد السمتان height و width الارتفاع والعرض لعنصر <input type=”image”>.

هام: يجب دائمًا تحديد كلتا السمتين height و width للصور. عند تحديد الارتفاع والعرض، يقوم المتصفح بحجز المساحة المطلوبة للصورة عند تحميل الصفحة. بدون هذه السمات، لا يعرف المتصفح حجم الصورة، ولا يمكنه حجز المساحة المناسبة لها. سيؤدي ذلك إلى تغير تخطيط الصفحة أثناء التحميل (أثناء تحميل الصور).

مثال:

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

في هذا المثال، يتم استخدام صورة كزر إرسال في نموذج، مع تحديد ارتفاعها وعرضها ليكون 48 بكسل لكل منهما.

عند النقر على الصورة، سيتم إرسال النموذج بنفس طريقة إرساله عند النقر على زر إرسال عادي.

يمكن استخدام الصور كأزرار إرسال لإضافة جاذبية بصرية إلى النماذج، أو لتوفير خيارات إرسال متعددة في نفس النموذج.

السمة list

تشير السمة list إلى عنصر <datalist> يحتوي على خيارات محددة مسبقًا لعنصر <input>.

باستخدام هذه السمة، يمكن عرض قائمة منسدلة بالخيارات أثناء كتابة المستخدم في حقل الإدخال، مما يساعده على اختيار قيمة من القيم المحددة مسبقًا بسرعة وسهولة.

مثال:

عنصر <input> بقيم محددة مسبقًا في <datalist>:

<form>
  <input list="browsers">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

سمة الإكمال التلقائي autocomplete

تحدد سمة الإكمال التلقائي ما إذا كان ينبغي تشغيل ميزة الإكمال التلقائي أو إيقافها في نموذج أو حقل إدخال.

تسمح ميزة الإكمال التلقائي للمتصفح بتوقع القيمة التي قد يدخلها المستخدم في حقل الإدخال. فعندما يبدأ المستخدم بالكتابة في حقل ما، يعرض المتصفح خيارات لملئه بناءً على القيم التي تم إدخالها سابقًا في نفس الحقل أو حقول مشابهة.

تعمل سمة الإكمال التلقائي مع العنصر <form> وأنواع الإدخال التالية من العنصر <input>:

• نص (text)
• بحث (search)
• عنوان URL (url)
• هاتف (tel)
• بريد إلكتروني (email)
• كلمة مرور (password)
• محددات التاريخ والوقت (datepickers)
• نطاق (range)
• لون (color)

مثال

إليك مثال على نموذج HTML مع تشغيل ميزة الإكمال التلقائي بشكل عام، وإيقافها في حقل إدخال واحد:

<form action="/action_page.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit" value="Submit">
</form>

ملاحظة: قد تحتاج إلى تفعيل ميزة الإكمال التلقائي في إعدادات المتصفح حتى تعمل هذه الميزة. ابحث عن خيار “التفضيلات” أو “الإعدادات” في قائمة المتصفح.