HTML - Input Attributes سمات مدخلات الفورم

- أبريل 10, 2025

HTML Input Attributes

تتناول هذه الصفحة الخصائص (Attributes) المختلفة لعنصر <input> في HTML.

🔸 الخاصية 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

تجعل الحقل للقراءة فقط (لا يمكن تعديله ولكن يمكن نسخه):


<input type="text" value="John" readonly>

🔸 الخاصية disabled

تعطّل الحقل تمامًا ولا تُرسل قيمته مع البيانات:


<input type="text" value="John" disabled>

🔸 الخاصية size

تحدد عرض الحقل بعدد الأحرف الظاهرة:


<input type="text" size="50">

🔸 الخاصية maxlength

تحدد الحد الأقصى لعدد الأحرف المسموح بها:


<input type="text" maxlength="10">

🔸 الخاصيتان min و max

تُستخدم لتحديد القيم الدنيا والعظمى لحقل رقمي أو تاريخ:


<input type="number" min="1" max="5">

🔸 الخاصية multiple

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


<input type="file" multiple>

🔸 الخاصية pattern

تُستخدم للتحقق من القيم بناءً على تعبير منتظم:


<input type="text" pattern="[A-Za-z]{3}" title="Three letter code">

🔸 الخاصية placeholder

تعرض تلميحًا داخل الحقل حتى يكتب المستخدم:


<input type="tel" placeholder="123-45-678">

🔸 الخاصية required

تجعل الحقل إلزاميًا قبل إرسال النموذج:


<input type="text" required>

🔸 الخاصية step

تحدد الفاصل القانوني بين القيم العددية:


<input type="number" step="3">

🔸 الخاصية autofocus

تُعطي التركيز تلقائيًا للحقل عند تحميل الصفحة:


<input type="text" autofocus>

🔸 الخاصيتان height و width (لـ <input type="image">)

تُستخدم لتحديد أبعاد زر صورة:


<input type="image" src="img_submit.gif" width="48" height="48">

🔸 الخاصية list

تُستخدم لربط الحقل مع قائمة اقتراحات (datalist):


<input list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
</datalist>

🔸 الخاصية autocomplete

تمكن المتصفح من اقتراح بيانات مدخلة مسبقًا:


<form autocomplete="on">
  <input type="text" name="fname">
  <input type="text" name="lname" autocomplete="off">
</form>

بحث هذه المدونة الإلكترونية

Code3arabi | محمود السكري