HTML سمات الإدخال

value

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

<form action="">

  First name:<br>

  <input type="text" name="firstname" value="John">

</form>

السمة للقراءة فقط

readonlyتحدد السمة حقل الإدخال للقراءة فقط (لا يمكن تغييرها):

<form action="">

  First name:<br>

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

</form>

disabled

disabledتحدد السمة حقل الإدخال تعطيل.

حقل الإدخال المعطل غير قابل للاستخدام وغير قابل للنقر ، ولن يتم إرسال قيمته عند إرسال النموذج:

<form action="">

  First name:<br>

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

</form>

حجم السمة

sizeتحدد السمة الحجم (حرفا) لحقل الإدخال:

<form action="">

  First name:<br>

  <input type="text" name="firstname" value="John" size="40">

</form>

السمة القصوى

maxlengthتحدد السمة الحد الأقصى المسموح به لطول حقل الإدخال:

<form action="">

  First name:<br>

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

</form>

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

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

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

سمات HTML5

أضاف HTML5 السمات التالية لـ <input>:

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

والسمات التالية لـ <form>:

• autocomplete
• novalidate

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

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

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

نصيحة: من الممكن أن يكون الإكمال التلقائي “قيد التشغيل” للنموذج ، و “إيقاف” لحقول الإدخال المحددة ، أو العكس.

autocompleteتعمل مع <form>وما يلي <input>أنواع: النص، والبحث، رابط، الهاتف، البريد الإلكتروني، وكلمة السر، datepickers، مجموعة، واللون.

نموذج HTML مع الإكمال التلقائي (وإيقاف تشغيله لحقل إدخال واحد):

<form action="/action_page.php" autocomplete="on">

  First name:<input type="text" name="fname"><br>

  Last name: <input type="text" name="lname"><br>

  E-mail: <input type="email" name="email" autocomplete="off"><br>

  <input type="submit">

</form>

نصيحة: في بعض المتصفحات ، قد تحتاج إلى تنشيط وظيفة الإكمال التلقائي حتى يعمل هذا.

السمة novalidate

novalidate هي <form>.

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

يشير إلى أنه لا يجب التحقق من صحة النموذج عند الإرسال:

<form action="/action_page.php" novalidate>

  E-mail: <input type="email" name="user_email">

  <input type="submit">

</form>

السمة ضبط تلقائي للصورة

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

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

First name:<input type="text" name="fname" autofocus>

السمة النموذجية

formتحدد سمة واحدة أو أكثر من أشكال ل <input> ينتمي إليها.

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

حقل إدخال يقع خارج نموذج HTML (ولكن لا يزال جزءًا من النموذج):

<form action="/action_page.php" id="form1">

  First name: <input type="text" name="fname"><br>

  <input type="submit" value="Submit">

</form>

Last name: <input type="text" name="lname" form="form1">

السمة formaction

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

تتجاوز سمة formaction سمة إجراء <form>.

يتم استخدام سمة formaction مع type="submit"و type="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="/action_page2.php"
  value="Submit as admin">

</form>

السمة النموذجية

formenctypeتحدد السمة الكيفية التي ينبغي أن يتم تشفيرها بيانات النموذج عندما قدم (فقط للأشكال مع طريقة = “آخر”).

formenctypeالسمة يتجاوز السمة enctype من <form>.

formenctypeيستخدم السمة مع type="submit"و type="image".

إرسال بيانات النموذج المشفرة افتراضيًا (زر الإرسال الأول) ، والمشفرة كـ “بيانات متعددة الأجزاء / النموذج” (زر الإرسال الثاني):

<form action="/action_page_binary.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 لإرسال البيانات النموذج إلى URL.

formmethod يتجاوز السمة طريقة لل <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" value="Submit using POST">

</form>

السمة formnovalidate

formnovalidate يتجاوز السمة novalidate من <form>.

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

نموذج مع زرين إرسال (مع وبدون التحقق من الصحة):

<form action="/action_page.php">

  E-mail: <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سمات تحدد الطول والعرض لل <input type="image">.

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

حدد صورة كزر الإرسال ، مع سمات الطول والعرض:

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

قائمة السمة

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

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

<input list="browsers">

<datalist id="browsers">

  <option value="Internet Explorer">

  <option value="Firefox">

  <option value="Chrome">

  <option value="Opera">

  <option value="Safari">

</datalist>

Min and Max

minو max تحديد القيم الدنيا والقصوى لل <input>.

minو maxسمات العمل مع أنواع المدخلات التالية: رقم، مجموعة، التاريخ، التاريخ والوقت، المحلي والشهر والساعة والأسبوع.

عناصر <الإدخال> ذات القيم الدنيا والقصوى:

Enter a date before 1980-01-01:

<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:

<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):

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

سمة متعددة

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

multipleتعمل السمة مع الأنواع التالية المدخلات: البريد الإلكتروني، وملف.

حقل تحميل ملف يقبل قيم متعددة:

Select images: <input type="file" name="img" multiple>

سمة النمط

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

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

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

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

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

سمة العنصر النائب

placeholderتحدد السمة تلميحا أن يصف القيمة المتوقعة من حقل الإدخال (قيمة عينة أو وصفا موجزا للشكل).

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

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

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

<input type="text" name="fname" placeholder="First name">

السمة المطلوبة

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

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

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

Username: <input type="text" name="usrname" required>

step

stepتحدد السمة فترات عدد القانونية لل <input>.

مثال: إذا كانت الخطوة = “3” ، فقد تكون الأرقام القانونية -3 ، 0 ، 3 ، 6 ، إلخ.

نصيحة: يمكن استخدام سمة الخطوة مع السمتين القصوى والدقيقة لإنشاء مجموعة من القيم القانونية.

stepتعمل السمة مع أنواع المدخلات التالية: رقم، مجموعة، التاريخ، التاريخ والوقت، المحلي والشهر والساعة والأسبوع.

حقل إدخال بفواصل زمنية قانونية محددة:

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

نموذج HTML وعناصر الإدخال