English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
أضاف HTML5 بعض الخصائص الجديدة للنماذج، حيث أضاف form خصائص autocomplete وnovalidate، بينما أضاف input الخاصية autocomplete وautofocus وform وformaction وformenctype وformmethod وformnovalidate وformtarget وheight وwidth والقائمة list، والحد الأدنى والحد الأعلى multiple والنمط pattern (regexp)
قام HTML5 بإضافة بعض الخصائص الجديدة لـ <form> و <input>.
خصائص جديدة لـ <form>
autocomplete
novalidate
خصائص جديدة لـ <input>
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height و width
list
min و max
multiple
pattern (regexp)
placeholder
required
step
تحدد خاصية autocomplete أن الاستمارة أو حقل input يجب أن يكون لديه تكامل تلقائي.
عندما يبدأ المستخدم في إدخال في مجال التكامل التلقائي، يجب على المتصفح عرض الخيارات المحملة في هذا المجال.
توصية: قد تكون خاصية autocomplete مفعلة في عنصر form، ولكن معطلة في عنصر input.
ملاحظة: autocomplete ينطبق على علامة <form>، بالإضافة إلى أنواع علامات <input> التالية: text, search, url, telephone, email, password, datepickers, range، وcolor.
فتح autocomplete في استمارة HTML (حقل input مع إغلاق autocomplete):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دليل الأساسيات(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" autocomplete="on"> الاسم الأول:<input type="text" name="fname"><br> اسم العائلة: <input type="text" name="lname"><br> البريد الإلكتروني: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form> <p>املأ وقدم استمارة، ثم أعد تحديث الصفحة لمعرفة كيفية الملء التلقائي للمحتوى.</p> <p>ملاحظة: خاصية autocomplete لـ form هي "مفعلة" (مفعمة)، ولكن خاصية البريد الإلكتروني تكون "غير مفعلة" (غير مفعمة) تلقائيًا.</p> </body> </html>الاختبار
إشارة: قد تحتاج في بعض المتصفحات إلى تمكين ميزة التكامل التلقائي لجعل هذه الخاصية تعمل.
خصوصية novalidate هي خاصية boolean (بوليانية).
يحدد خاصية novalidate في تقديم استمارة عدم التحقق من form أو input الحقول.
لا تحتاج إلى التحقق من بيانات استمارة الاستمارة
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دليل الأساسيات(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" novalidate> البريد الإلكتروني: <input type="email" name="user_email"> <input type="submit"> </form> <p><strong>تنبيه:</strong> لا يدعم خاصية novalidate في Safari و Internet Explorer 9 وكل الإصدارات السابقة.</p> </body> </html>الاختبار
هي خاصية boolean.
تحدد خاصية autofocus أن الحقل يكتسب التركيز تلقائيًا عند تحميل الصفحة.
اجعل حقل "اسم الأول" في input يركز تلقائيًا عند تحميل الصفحة:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دليل الأساسيات(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> اسم الأول: <input type="text" name="fname" autofocus><br> اسم العائلة: <input type="text" name="lname"><br> <input type="submit"> </form> <p><strong>تنبيه:</strong> Internet Explorer 9 وكل الإصدارات السابقة لا يدعم خاصية autofocus للعلامة input.</p> </body> </html>الاختبار
تحدد خاصية form علامة input إلى نموذج أو عدة نماذج.
توصية:لإشارة إلى أكثر من نموذج، استخدم قائمة منفصلة بالمسافات.
يُستخدم حقل input خارج نموذج form للإشارة إلى نموذج HTML form (يتبع هذا النموذج form ما زال جزءًا من نموذج form):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دليل الأساسيات(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" id="form1"> اسم الأول: <input type="text" name="fname"><br> <input type="submit" value="إرسال"> </form> <p> "اسم العائلة" لم يكن في نموذج form، ولكنه جزء من نموذج form.</p> اسم العائلة: <input type="text" name="lname" form="form1"> <p><b>تنبيه:</b> Internet Explorer 9 وكل الإصدارات السابقة لا يدعم خاصية form.</p> </body> </html>الاختبار
تستخدم خاصية formaction لوصف عنوان URL للإرسال.
تغطي خاصية formaction خاصية action في علامة <form>.
ملاحظة: يستخدم خاصية formaction مع type="submit" و type="image".
يحتوي النموذج HTML للطلب على زرين للاستجابة لكل عنوان عنوان مختلف:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دليل الأساسيات(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> اسم الأول: <input type="text" name="fname"><br> اسم العائلة: <input type="text" name="lname"><br> <input type="submit" value="تقديم"><br> <input type="submit" formaction="demo-admin.php" value="إرسال"> </form> <p><strong>تنبيه:</strong> Internet Explorer 9 وكل الإصدارات السابقة لا يدعم خاصية formaction للعلامة input.</p> </body> </html>الاختبار
تُعرف خاصية formenctype بت编码 البيانات المقدمة إلى الخادم (للمستندات form فقط عند method="post")
تغطي خاصية formenctype خاصية enctype لعنصر form.
الغرض الرئيسي: يمكن استخدام هذه الخاصية مع type="submit" و type="image".
يُرسل المفتاح الأول بتحليل افتراضي بيانات النموذج، والمفتاح الثاني يُرسل بتنسيق "multipart/form-data":
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دليل الأساسيات(oldtoolbag.com)</title> </head> <body> <form action="demo-post-enctype.php" method="post"> اسم الأول: <input type="text" name="fname"><br> <input type="submit" value="إرسال"> <input type="submit" formenctype="multipart/form-data" value="تقديم النموذج بكود multipart/form-data"> </form> <p><strong>ملاحظة:</strong> Internet Explorer 9 وكل الإصدارات السابقة لا تدعم خاصية formenctype لعنصر input.</p> </body> </html>الاختبار
تُعرف خاصية formmethod بطريقة تقديم النموذج.
تغطي خاصية formmethod خاصية method لعنصر <form>.
ملاحظة: يمكن استخدام هذه الخاصية مع type="submit" و type="image".
مثال على إعادة تعريف طريقة تقديم النموذج:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دليل الأساسيات(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" method="get"> اسم الأول: <input type="text" name="fname"><br> اسم العائلة: <input type="text" name="lname"><br> <input type="submit" value="إرسال"> <input type="submit" formmethod="post" formaction="demo-form.php" value="استخدام POST لتقديم النموذج"> </form> <p><strong>ملاحظة:</strong> Internet Explorer 9 وكل الإصدارات السابقة لا تدعم خاصية formmethod لعنصر input.</p> </body> </html>الاختبار
خصائص novalidate هي خاصية boolean.
تُعرف خصائص novalidate بإنها لا تحتاج إلى التحقق عند تقديم النموذج.
خصائص novalidate تغطي خصائص novalidate لـ عناصر <form>.
ملاحظة: يمكن استخدام خاصية formnovalidate مع type="submit".
نماذج تقديم زرين مختلفين (مع التحقق أو بدون التحقق):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دليل الأساسيات(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> بريد إلكتروني: <input type="email" name="userid"><br> <input type="submit" value="تقديم"><br> <input type="submit" formnovalidate="formnovalidate" value="تقديم غير مراجعة"> </form> <p><strong>ملاحظة:</strong> لا يدعم متصفح Internet Explorer 9 وأحدث إصداراته أو Safari خاصية formnovalidate في علامة input.</p> </body> </html>الاختبار
تحدد خاصية formtarget اسمًا أو كلمة مفتاحية لتحديد كيفية عرض بيانات النموذج بعد تقديمها.
يغطي خاصية formtarget خاصية target في علامة <form>.
ملاحظة: يستخدم خاصية formtarget مع type="submit" و type="image".
استعراض نماذج تقديم زرين مختلفين في نافذات مختلفة:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دليل الأساسيات(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> اسم الأول: <input type="text" name="fname"><br> اسم العائلة: <input type="text" name="lname"><br> <input type="submit" value="تقديم عادي"> <input type="submit" formtarget="_blank" value="تقديم إلى صفحة جديدة"> </form> <p><strong>ملاحظة:</strong> لا يدعم متصفح Internet Explorer 9 وأحدث إصداراته علامة formtarget في علامة input.</p> </body> </html>الاختبار
تعين خصائص الارتفاع والعرض لصورة علامة <input> من نوع image.
ملاحظة: خصائص الارتفاع والعرض تنطبق فقط على علامة <input> من نوع image.
توصية:عادة ما يتم تحديد كلا خصائص الارتفاع والعرض للصورة. إذا تم تعيين الارتفاع والعرض للصورة، فإن المساحة المطلوبة للصورة سيتم الاحتفاظ بها عند تحميل الصفحة. إذا لم يكن لديك هذه الخصائص، لا يعرف المتصفح حجم الصورة ولا يمكنه تحديد مساحة مساحة مناسبة. يمكن أن يتغير تأثير ترتيب الصفحة أثناء تحميل الصورة (على الرغم من أن الصورة تم تحميلها).
تم تعريف زر تقديم الصورة، واستخدام خصائص الارتفاع والعرض:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دليل الأساسيات(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> اسم الأول: <input type="text" name="fname"><br> اسم العائلة: <input type="text" name="lname"><br> <input type="image" src="login_button.gif" alt="Submit"> </form> </body> </html>الاختبار
تحديد الخاصية list لمنطقة الإدخال.datalist هو قائمة الخيارات لمنطقة الإدخال.
تحديد القيم المسبقة في <datalist> لـ <input>:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دليل الأساسيات(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> <p><strong>ملاحظة:</strong> Internet Explorer 9 (الإصدارات القديمة من IE)،Safari لا يدعم علامة <datalist>.</p> </body> </html>الاختبار
خصائص min،max و step تستخدم لتعريف القيود (التحكم) للمكونات التي تحتوي على أرقام أو تواريخ.
ملاحظة: خصائص min،max و step تنطبق على أنواع التذاكر التالية <input>: pickers تاريخ،رقم،و range.
إعداد القيمة الأدنى والقيمة الأعلى للمكون <input>:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دليل الأساسيات(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> أدخل تاريخ قبل 1980-01-01: <input type="date" name="bday" max="1979-12-31"><br> أدخل تاريخ بعد 2000-01-01: <input type="date" name="bday" min="2000-01-02"><br> الكمية (بين 1 و 5): <input type="number" name="quantity" min="1" max="5"><br> <input type="submit"> </form> <p><strong>ملاحظة:</strong> Internet Explorer 9 وكل الإصدارات السابقة، و Firefox لا يدعم خاصية max و min في علامة input.</p> <p><strong>ملاحظة:</strong> في Internet Explorer 10، لا تدعم خاصية max و min في إدخال التاريخ والوقت، لا يدعم IE 10 هذه أنواع الإدخال. </body> </html>الاختبار
هي خاصية boolean.
تحدد خاصية multiple عدد القيم المختارة لعنصر <input>.
ملاحظة: تطبق خاصية multiple على أنواع العلامات التالية من <input>: email و file:
تحميل ملفات متعددة:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دليل الأساسيات(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> اختر الصور: <input type="file" name="img" multiple> <input type="submit"> </form> <p>جرب اختيار صورة واحدة أو أكثر.</p> <p><strong>ملاحظة:</strong> Internet Explorer 9 وكل الإصدارات السابقة لا يدعم خاصية multiple في علامة input.</p> </body> </html>الاختبار
توصف خاصية pattern بتعريف تعبير تقديمي يستخدم للتحقق من قيمة علامة <input>.
ملاحظة:تطبق خاصية pattern على أنواع العلامات التالية من <input>: text, search, url, tel, email، و password.
الإشارة: تستخدم عالمياً title يصف الخاصية النمط.
يظهر المثال التالي مجال نصي يمكن أن يحتوي فقط على ثلاثة أحرف (بدون أرقام أو أحرف خاصة):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل الأساسيات(oldtoolbag.com)</title>
</head>
<body>
<form action="demo-form.php">
رمز البلد: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="رمز البلد من ثلاثة أحرف">
<input type="submit">
</form>
<p><strong>ملاحظة:</strong> Internet Explorer 9 وكل الإصدارات السابقة، أو Safari لا يدعم خاصية pattern في علامة input.</p>
</body>
</html>الاختباريقدم خاصية placeholder إشارة (إشارة)، توضح القيمة التي يتوقعها مجال الإدخال.
الإشارة القصيرة تظهر قبل إدخال المستخدم في مجال الإدخال.
ملاحظة: تطبيق خاصية placeholder على النوع التالي من علامات input: text, search, url, telephone, email و password.
نص التوجيه لحقول input t:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دليل الأساسيات(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> <input type="text" name="fname" placeholder="اسم الأول"><br> <input type="text" name="lname" placeholder="اسم العائلة"><br> <input type="submit" value="إرسال"> </form> <p><strong>ملاحظة:</strong> Explorer Internet 9 وأقدم إصدارات IE لا تدعم الخاصية placeholder الخاصة بالعلامة input.</p> </body> </html>الاختبار
خاصية required هي خاصية boolean.
تحدد خاصية required أنه يجب ملء الحقل المقدم قبل الإرسال (لا يمكن أن يكون فارغًا).
ملاحظة:تطبيق خاصية required على النوع التالي من علامات input: text, search, url, telephone, email, password, pickers تاريخ، number، checkbox، radio و file.
لا يمكن أن يكون حقل input فارغًا:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دليل الأساسيات(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> اسم المستخدم: <input type="text" name="usrname" required> <input type="submit"> </form> <p><strong>ملاحظة:</strong> Explorer Internet 9 وأقدم إصدارات IE، أو Safari لا تدعم الخاصية required الخاصة بالعلامة input.</p> </body> </html>الاختبار
تحدد الخاصية step فجوة الأرقام المقبولة للنموذج المقدم.
إذا كان step="3"، فإن الأرقام المقبولة هي -3,0,3,6 وما إلى ذلك
نصيحة: يمكن استخدام الخاصية step مع تقوم الخاصيات max و min بإنشاء منطقة قيمة.
ملاحظة: step الخاصية تستخدم مع النوع التالي: number, range, date, datetime, datetime-local, month, time و week.
يحدد input step طول الخطوة 3:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دليل الأساسيات(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> <input type="number" name="points" step="3"> <input type="submit"> </form> <p><strong>ملاحظة:</strong> متصفح Internet Explorer 9 وأحدث إصداراته أو Firefox لا يدعم خاصية step الخاص بـ input.</p> </body> </html>الاختبار
| العلامة | الوصف |
| <form> | تعريف نموذج form |
| <input> | تعريف مجال الدخول |