سمات إدخال HTML
يصف هذا الفصل السمات المختلفة <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أن حقل الإدخال للقراءة فقط.
لا يمكن تعديل حقل الإدخال للقراءة فقط (ومع ذلك ، يمكن للمستخدم الانتقال إليه وتمييزه ونسخ النص منه).
سيتم إرسال قيمة حقل الإدخال للقراءة فقط عند إرسال النموذج!
مثال
حقل إدخال للقراءة فقط:
<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أنه يجب تعطيل حقل الإدخال.
حقل الإدخال المعطل غير قابل للاستخدام ولا يمكن النقر عليه.
لن يتم إرسال قيمة حقل الإدخال المعطل عند إرسال النموذج!
مثال
حقل إدخال معطل:
<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العرض المرئي ، بالأحرف ، لحقل الإدخال.
القيمة الافتراضية لـ size20.
ملاحظة: تعمل sizeالسمة مع أنواع الإدخال التالية: نص ، بحث ، هاتف ، عنوان url ، بريد إلكتروني ، وكلمة مرور.
مثال
قم بتعيين عرض لحقل الإدخال:
<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تعيين a ، لن يقبل حقل الإدخال أكثر من عدد الأحرف المحدد. ومع ذلك ، لا تقدم هذه السمة أي ملاحظات. لذلك ، إذا كنت تريد تنبيه المستخدم ، يجب عليك كتابة كود 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مع أنواع الإدخال التالية: الرقم والنطاق والتاريخ والوقت المحلي والشهر والوقت والأسبوع.
تلميح: استخدم سمات 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السمة مع أنواع الإدخال التالية: البريد الإلكتروني والملف.
مثال
حقل تحميل ملف يقبل قيمًا متعددة:
<form>
<label for="files">Select files:</label>
<input
type="file" id="files" name="files" multiple>
</form>
سمة النمط
تحدد سمة الإدخال patternتعبيرًا عاديًا يتم التحقق من قيمة حقل الإدخال في مقابله ، عند إرسال النموذج.
تعمل patternالسمة مع أنواع الإدخال التالية: نص وتاريخ وبحث وعنوان url وهاتف وبريد إلكتروني وكلمة مرور.
تلميح: استخدم سمة العنوان global title لوصف النمط لمساعدة المستخدم.
نصيحة: تعرف على المزيد حول التعبيرات العادية في برنامج 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>
سمة العنصر النائب
placeholderتحدد سمة الإدخال تلميحًا قصيرًا يصف القيمة المتوقعة لحقل إدخال (قيمة عينة أو وصف قصير للتنسيق المتوقع).
يتم عرض التلميح القصير في حقل الإدخال قبل أن يقوم المستخدم بإدخال قيمة.
تعمل placeholderالسمة مع أنواع الإدخال التالية: نص ، بحث ، عنوان url ، هاتف ، بريد إلكتروني ، وكلمة مرور.
مثال
حقل إدخال مع نص عنصر نائب:
<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السمة مع أنواع الإدخال التالية: نص ، بحث ، عنوان url ، هاتف ، بريد إلكتروني ، كلمة مرور ، منتقي التاريخ ، رقم ، خانة اختيار ، راديو ، وملف.
مثال
حقل إدخال مطلوب:
<form>
<label for="username">Username:</label>
<input
type="text" id="username" name="username" required>
</form>
سمة الخطوة
تحدد سمة الإدخال stepفترات العدد القانونية لحقل الإدخال.
مثال: إذا كانت الخطوة = "3" ، يمكن أن تكون الأرقام القانونية -3 ، 0 ، 3 ، 6 ، إلخ.
تلميح: يمكن استخدام هذه السمة مع سمات max و min لإنشاء نطاق من القيم القانونية.
تعمل stepالسمة مع أنواع الإدخال التالية: الرقم والنطاق والتاريخ والوقت المحلي والشهر والوقت والأسبوع.
مثال
حقل إدخال بفواصل زمنية محددة لرقم قانوني:
<form>
<label for="points">Points:</label>
<input
type="number" id="points" name="points" step="3">
</form>
ملاحظة: قيود الإدخال ليست مضمونة ، وتوفر JavaScript العديد من الطرق لإضافة مدخلات غير قانونية. لتقييد الإدخال بأمان ، يجب أيضًا فحصه بواسطة المتلقي (الخادم)!
سمة ضبط تلقائي للصورة
تحدد سمة الإدخال autofocusأن حقل الإدخال يجب أن يتم التركيز عليه تلقائيًا عند تحميل الصفحة.
مثال
دع حقل الإدخال "الاسم الأول" يحصل تلقائيًا على التركيز عند تحميل الصفحة:
<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<input
type="image">
نصيحة: حدد دائمًا كلاً من سمات الطول والعرض للصور. إذا تم ضبط الارتفاع والعرض ، يتم حجز المساحة المطلوبة للصورة عند تحميل الصفحة. بدون هذه السمات ، لا يعرف المتصفح حجم الصورة ولا يمكنه حجز المساحة المناسبة لها. سيكون التأثير هو أن تخطيط الصفحة سيتغير أثناء التحميل (أثناء تحميل الصور).
مثال
حدد الصورة على أنها زر الإرسال ، بسمات الارتفاع والعرض:
<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>
سمة القائمة
listتشير سمة الإدخال إلى <datalist>عنصر يحتوي على خيارات محددة مسبقًا لعنصر <input>.
مثال
عنصر <input> بقيم محددة مسبقًا في <datalist>:
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
سمة الإكمال التلقائي
تحدد سمة الإدخال autocompleteما إذا كان النموذج أو حقل الإدخال يجب أن يتم تشغيل الإكمال التلقائي أو إيقاف تشغيله.
يسمح الإكمال التلقائي للمتصفح بالتنبؤ بالقيمة. عندما يبدأ المستخدم في الكتابة في حقل ، يجب أن يعرض المتصفح خيارات لملء الحقل ، بناءً على القيم المكتوبة مسبقًا.
تعمل autocompleteالسمة مع الأنواع <form>التالية <input>: نص ، بحث ، عنوان url ، هاتف ، بريد إلكتروني ، كلمة مرور ، منتقي بيانات ، نطاق ، ولون.
مثال
نموذج 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>
نصيحة: في بعض المتصفحات ، قد تحتاج إلى تنشيط وظيفة الإكمال التلقائي حتى تعمل هذه الوظيفة (انظر أسفل "التفضيلات" في قائمة المتصفح).
تمارين HTML
نموذج HTML وعناصر الإدخال
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
للحصول على قائمة كاملة بجميع علامات HTML المتاحة ، تفضل بزيارة مرجع علامات HTML الخاص بنا .