خصائص HTML Input

خصائص value

value يحدد الخصائص القيمة الافتراضية للحقل المدخل:

مثال

<form action="">
 الاسم الأول:<br>
<input type="text" name="firstname" value="Bill">
<br>
 الاسم الأخير:<br>
<input type="text" name="lastname">
</form>

تجربة شخصية

خصائص readonly

readonly يحدد الخصائص أن الحقل المدخل قارئ فقط (لا يمكن تعديله):

مثال

<form action="">
 الاسم الأول:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 الاسم الأخير:<br>
<input type="text" name="lastname">
</form>

تجربة شخصية

لا تحتاج خاصية readonly إلى قيمة. إنها تساوي readonly="readonly".

خصائص disabled

disabled يحدد الخصائص أن الحقل المدخل معطلاً.

لا يمكن استخدام العناصر المحظورة والنقر عليها.

لا يتم تقديم العناصر المحظورة.

مثال

<form action="">
 الاسم الأول:<br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 الاسم الأخير:<br>
<input type="text" name="lastname">
</form>

تجربة شخصية

لا تحتاج خاصية disabled إلى قيمة. إنها تساوي disabled="disabled".

خصائص size

size يحدد الخصائص حجم الحقل المدخل (بعدد الحروف):

مثال

<form action="">
 الاسم الأول:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 الاسم الأخير:<br>
<input type="text" name="lastname">
</form>

تجربة شخصية

خصائص maxlength

maxlength يحدد الخصائص أقصى طول الحقل المدخل المسموح به:

مثال

<form action="">
 الاسم الأول:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 الاسم الأخير:<br>
<input type="text" name="lastname">
</form>

تجربة شخصية

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

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

ملاحظة:القيود على الإدخال ليست دائمًا موثوقة. يقدم JavaScript العديد من الطرق لزيادة الإدخالات غير الصالحة. إذا كنت بحاجة إلى قيود آمنة على الإدخال، يجب على المرسل (الخادم) التحقق من القيود أيضًا.

خصيات HTML5

أضاف HTML5 خصيات التالية لـ <input> :

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height و width
  • list
  • min و max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

ومضيفًا خصيات أخرى لـ <form> عند الحاجة:

  • autocomplete
  • novalidate

خصية autocomplete

تحدد خاصية autocomplete ما إذا كان يجب على النموذج أو حقل الإدخال التلقائي أو لا.

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

نصيحة:يمكنك تعيين autocomplete للنموذج على on، وإعداد الحقل المحدد على off، والعكس صحيح.

خصية autocomplete تنطبق على <form> وأيضاً النماذج التالية من <input> : text، search، url، tel، email، password، datepickers، range وألوان.

مثال

استخدام التحقق التلقائي في النماذج HTML (حقل معين مع off):

<form action="action_page.php" autocomplete="on">
   الاسم الأول:<input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   البريد الإلكتروني: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

تجربة شخصية

نصيحة:في بعض المتصفحات، قد تحتاج إلى تمكين خاصية إكمال النص تلقائيًا يدويًا.

خاصية novalidate

تتبع خاصية novalidate خاصية <form>.

إذا تم تعيينه، فإن خاصية novalidate تحدد عدم التحقق من بيانات النموذج عند إرساله.

مثال

توضح أن النموذج لن يتم التحقق منه عند إرساله:

<form action="action_page.php" novalidate>
   البريد الإلكتروني: <input type="email" name="user_email">
   <input type="submit">
</form>

تجربة شخصية

خاصية autofocus

خاصية autofocus هي خاصية بولية.

إذا تم تعيينه، فإن خاصية autofocus تحدد أن يجب أن يركز عنصر <input> تلقائيًا عند تحميل الصفحة.

مثال

تأكد من أن حقل "الاسم الأول" يركز تلقائيًا عند تحميل الصفحة:

الاسم الأول:<input type="text" name="fname" autofocus>

تجربة شخصية

خاصية form

تحدد خاصية form مجموعة واحدة أو أكثر من النماذج التي تنتمي إليها عنصر <input>.

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

مثال

تقع الحقول النصية خارج نموذج HTML (لكنها تتبع النموذج):

<form action="action_page.php" id="form1">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
</form>
 اسم العائلة: <input type="text" name="lname" form="form1">

تجربة شخصية

خاصية formaction

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

تغطي خاصية formaction خاصية action لمعلمة <form>.

تطبيق خاصية formaction على نوع "submit" ونوع "image".

مثال

تملك نموذج HTML يحتوي على زرين إرسال متكاملين لتحريك مختلفة:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formaction="demo_admin.asp">
   قيمة="إرسال كـ admin">
</form>

تجربة شخصية

خاصية formentype

تحدد خاصية formentype كيفية تعريف النموذج (form-data) عند إرساله إلى الخادم (يapply فقط لـ form مع method="post").

خاصية formentype تغطي خاصية enctype لمعلمة <form>.

خصائص formenctype مناسبة لـ type="submit" و type="image".

مثال

إرسال بيانات نموذج ب编码 افتراضي وكذلك بـ "multipart/form-data" (الزر الثاني للإرسال):

<form action="demo_post_enctype.asp" method="post">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formenctype="multipart/form-data">
   value="Submit as Multipart/form-data">
</form>

تجربة شخصية

خصائص formmethod

تعريف خصائص formmethod للطريقة HTTP التي سيتم استخدامها لتحويل بيانات نموذج (form-data) إلى URL المسار.

خصائص formmethod تغطي خصائص method لـ <form>.

خصائص formmethod مناسبة لـ type="submit" و type="image".

مثال

الزر الثاني للإرسال يغطي طريقة HTTP لنموذج

<form action="action_page.php" method="get">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="Submit using POST">
</form>

تجربة شخصية

خصائص formnovalidate

خصائص novalidate هي خصائص بولية.

إذا تم تعيينها، فإنها تحدد عدم التحقق من <input> عند إرسال النموذج.

خصائص formnovalidate تغطي خصائص novalidate لـ <form>.

خصائص formnovalidate يمكن استخدامها مع type="submit"。

مثال

نموذج يحتوي على زرين للإرسال (التحقق والتحقق)

<form action="action_page.php">
   البريد الإلكتروني: <input type="email" name="userid"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formnovalidate value="Submit without validation">
</form>

تجربة شخصية

سمة formtarget

تحدد سمة formtarget الاسم أو الكلمة المفتاحية الذي يحدد أين يتم عرض الاستجابة المقدمة بعد تقديم النموذج.

تغطي سمة formtarget خصائص العنصر <form>.

يمكن استخدام سمة formtarget مع type="submit" وtype="image".

مثال

يحتوي هذا النموذج على زرين تقديم، يتناسبان مع نافذات الهدف المختلفة:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit as normal">
   <input type="submit" formtarget="_blank">
   value="Submit to a new window">
</form>

تجربة شخصية

سمتين height وwidth

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

سمتين height وwidth تستخدم فقط مع <input type="image">.

ملاحظة:يجب دائمًا تحديد حجم الصورة. إذا لم يكن المتصفح يعرف حجم الصورة، فإن الصفحة ستضيء عند تحميل الصورة.

مثال

تعريف الصورة كزرار تقديم، وإعداد خصائص الارتفاع والعرض:

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

تجربة شخصية

سمة list

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

مثال

استخدام <datalist> لتعيين قيم مسبقة للعنصر <input>：

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

تجربة شخصية

خاصية min و max

تحدد خاصية min و max القيمة الأدنى والقيمة الأعلى لعنصر <input>.

تطبيق خاصية min و max على أنواع الإدخال مثل number، range، date، datetime، datetime-local، month، time و week.

مثال

عنصر <input> مع القيم الأدنى والأعلى:

أدخل تاريخ قبل 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
 أدخل تاريخ بعد 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
 كمية (بين 1 و 5):
<input type="number" name="quantity" min="1" max="5">

تجربة شخصية

خاصية multiple

خاصية multiple هي خاصية منطقية.

إذا تم تعيينها، فإنها تحدد السماح للمستخدم بإدخال أكثر من قيمة واحدة في عنصر <input>.

تطبيق خاصية multiple على أنواع الإدخال التالية: email و file.

مثال

حقل تحميل الملفات الذي يمكنه استقبال قيم متعددة:

اختر صورة：<input type="file" name="img" multiple>

تجربة شخصية

خاصية pattern

تحدد خاصية pattern تعبير النصية العادية المستخدمة للتحقق من قيمة عنصر <input>.

تطبيق خاصية pattern على أنواع الإدخال التالية: text، search، url، tel، email، و password.

نصيحة:استخدم خاصية title العالمية لوصف النمط لمساعدة المستخدم.

نصيحة:تعلم المزيد عن تعبيرات النصية العادية في دروسنا الخاصة بـ JavaScript.

مثال

حقل الإدخال يمكن أن يحتوي فقط على ثلاثة أحرف (بدون أرقام أو رموز خاصة):

رمز البلد: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

تجربة شخصية

خاصية placeholder

يحدد خاصية placeholder نصوص تهدف إلى وصف القيمة المتوقعة لحقل الإدخال (مثال أو وصف قصير لنمط المعالجة).

الإشارة ستعمل على عرض في حقل الإدخال قبل إدخال المستخدم للقيمة.

تطبيق خاصية placeholder لجميع أنواع المدخلات التالية: text،search،url،tel،email،و password.

مثال

حقل المدخل مع نص مسبق:

<input type="text" name="fname" placeholder="الاسم الأول">

تجربة شخصية

خصائص required

خصائص required هي خاصية بولية.

إذا تم تعيينها، فإنها تحدد أن الحقل يجب أن يتم إكماله قبل تقديم النموذج.

تطبيق خاصية required لجميع أنواع المدخلات التالية: text،search،url،tel،email،password،و اختيارات التاريخ،number،checkbox،radio،و ملف.

مثال

حقل المدخل الإلزامي:

اسم المستخدم: <input type="text" name="usrname" required>

تجربة شخصية

خصائص step

تحدد خصائص step الفجوة الرقمية المقبولة لـ عناصر <input>.

مثال: إذا كان step="3"، فإن الأرقام المقبولة يجب أن تكون -3،0،3،6،و هكذا.

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

يستخدم خصائص step لجميع أنواع المدخلات التالية: number،range،date،datetime،datetime-local،month،time،و week.

مثال

حقل المدخل مع فجوة عددية محددة بشكل واضح:

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

تجربة شخصية