حقول النماذج في HTML5

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

تحتوي حقول نموذج HTML5 أيضًا على مجموعة من السمات الجديدة. تتم تغطية هذه السمات في نهاية هذا النص.

بالمناسبة، لدي أيضًا برنامج تعليمي حول كيفية تصميم النماذج باستخدام CSS .

دعم المتصفح

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

حقل البريد الإلكتروني

يمكن أن يستقبل حقل إدخال البريد الإلكتروني إدخال النص والتحقق من أن الإدخال هو عنوان بريد إلكتروني صالح. يمكنك تحديد أن حقل الإدخال هو حقل بريد إلكتروني باستخدام type="email" السمة، مثل هذا:

< نوع الإدخال = "البريد الإلكتروني" الاسم = "emailField"/>

حقل عنوان URL

يمكن لحقل URL أن يأخذ إدخال النص ويتحقق من أن الإدخال هو عنوان URL صالح. يمكنك تحديد أن حقل الإدخال هو حقل URL باستخدام type="url" السمة، مثل هذا:

< نوع الإدخال = "url" name = "urlField"/>

حقل الرقم

يمكن لحقل الرقم أن يأخذ إدخال النص ويتحقق من أن الإدخال رقم صالح. قد يساعد المتصفح المستخدم من خلال إظهار لوحة المفاتيح الرقمية، على سبيل المثال على الهاتف المحمول. يمكنك تحديد أن حقل الإدخال هو حقل رقم باستخدام type="number" السمة، مثل هذا:

< نوع الإدخال = "رقم" الاسم = "رقم الحقل"/>

سمات حقل الرقم

تحتوي حقول الأرقام على ثلاث سمات إضافية يمكن استخدامها والتي تؤثر على الأرقام التي يمكن اختيارها. هذه الصفات هي:

• دقيقة
• الأعلى
• خطوة

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

<نوع الإدخال = "رقم" الاسم = "رقم الحقل" الحد الأدنى = "10" الحد الأقصى = "20" الخطوة = "2" />

حقول المدى

يتم استخدام حقول النطاق مثل حقول الأرقام، ولكن بدلاً من وجود سهم لأعلى ولأسفل لتحديد القيمة، لديك شريط تمرير. يمكنك تحديد أن حقل الإدخال هو حقل نطاق باستخدام type="range" السمة، مثل هذا:

< نوع الإدخال = "النطاق" اسم = "نطاق الحقل"/>

سمات حقل النطاق

تحتوي حقول النطاق على ثلاث سمات إضافية يمكن استخدامها والتي تؤثر على الأرقام التي يمكن اختيارها بواسطة شريط التمرير. هذه الصفات هي:

• دقيقة
• الأعلى
• خطوة

تحدد السمة الحد الأدنى للعدد الذي يمكنك تحديده. وبالمثل يحدد الحد الأقصى لعدد النطاق. تقوم السمة step بتعيين زيادة القيمة في حقل النطاق عند تحريك شريط التمرير. فيما يلي مثال على الكود:

<نوع الإدخال = "النطاق" الاسم = "نطاق الحقل" الحد الأدنى = "100" الحد الأقصى = "200" خطوة = "2"/>

حقول الهاتف

يتم استخدام حقول الهاتف لأرقام الهاتف. على عكس حقل الرقم، يمكن أن يحتوي حقل الهاتف على مسافات بين الأرقام، ولكن بدون أحرف.
يمكنك تحديد أن حقل الإدخال هو حقل هاتف باستخدام type="tel" السمة، مثل هذا:

< نوع الإدخال = "tel" name = "telField"/>

حقول البحث

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

يمكنك تحديد أن حقل الإدخال هو حقل بحث باستخدام type="search" السمة، مثل هذا:

< نوع الإدخال = "بحث" اسم = "searchField"/>

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

حقل التاريخ

يمكن لحقل التاريخ أن يأخذ إدخال النص ويتحقق من أن الإدخال هو تاريخ صالح. يمكنك تحديد أن حقل الإدخال هو حقل تاريخ باستخدام type="date" السمة، مثل هذا:

< نوع الإدخال = "تاريخ" اسم = "تاريخ الحقل"/>

يوم/شهر/سنة

يمكن لحقل الوقت أن يأخذ إدخال النص ويتحقق من أن الإدخال هو وقت صالح. تسمح حقول الوقت بإدخال الساعات بين 0 و23، والدقائق بين 0 و59. يمكنك تحديد أن حقل الإدخال هو حقل وقت باستخدام السمة type="time" ، كما يلي:

< نوع الإدخال = "الوقت" الاسم = "timeField"/>

حقل التاريخ

يمكن أن يأخذ حقل التاريخ والوقت إدخال النص والتحقق من أن الإدخال هو تاريخ ووقت صالحين. يمكنك تحديد أن حقل الإدخال هو حقل تاريخ باستخدام type="datetime" السمة، مثل هذا:

< نوع الإدخال = "تاريخ الوقت" اسم = "تاريخ الوقت"/>

حقل الشهر

يمكن أن يستقبل حقل الشهر إدخال النص والتحقق من أن الإدخال شهر صالح. يمكن أن تتراوح الأشهر بين 1 و12. وقد يساعد المتصفح أيضًا المستخدم في اختيار شهر، من خلال عرض قائمة بالأشهر في تمثيل نصي، مترجم إلى لغة المستخدم الخاصة.

يمكنك تحديد أن حقل الإدخال هو حقل تاريخ باستخدام type="month" السمة، مثل هذا:

< نوع الإدخال = "الشهر" الاسم = "شهر الحقل"/>

حقل الاسبوع

يمكن لحقل الأسبوع أن يأخذ إدخال النص ويتحقق من أن الإدخال أسبوع صالح. يمكن أن تتراوح الأسابيع بين 1 و53. وقد يساعد المتصفح أيضًا المستخدم في اختيار أسبوع صالح من خلال عرض أداة تقويم من نوع ما. تحتوي بعض السنوات على 52 أسبوعًا وبعض السنوات تحتوي على 53 أسبوعًا. ويمكن للمتصفح التأكد من أن رقم الأسبوع المختار موجود بالفعل في السنة المحددة.

يمكنك تحديد أن حقل الإدخال هو حقل تاريخ باستخدام type="week" السمة، مثل هذا:

< نوع الإدخال = "أسبوع" اسم = "weekField"/>

الأسبوع 

مجال اللون

تُستخدم حقول الألوان لتحديد الألوان، على سبيل المثال في برنامج الرسم.

يمكنك تحديد أن حقل الإدخال هو حقل لون باستخدام type="color" السمة، مثل هذا:

< نوع الإدخال = "لون" الاسم = "colorField"/>

حقول مربع التحرير والسرد

يعد حقل مربع التحرير والسرد مجرد حقل نصي يمكنك من خلاله ربط قائمة من الخيارات به. هنا كيف تكتب ذلك:

<نوع الإدخال = "نص" اسم = "قائمة التحرير والسرد" = "قائمة التحرير والسرد">

<datalist id="comboBoxList">

<تسمية الخيار = "آنا">

<تسمية الخيار = "جون">

<تسمية الخيار = "كزافييه">

</datalist>

يمكنك أيضًا استخدام listالسمة والعنصر datalistمع حقل إدخال النوع emailأيضًا url.

سمات جديدة

تمت إضافة مجموعة من سمات حقل النموذج الجديدة في HTML5 أيضًا. يتم تناول كل واحد منهم في الأقسام أدناه.

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

تمكنك هذه autofocus السمة من تحديد الحقل الذي يجب التركيز عليه تلقائيًا عند تحميل الصفحة. يجب أن يكون لديك حقل واحد فقط في أي صفحة محددة. على سبيل المثال، حقل بحث، أو أحد الحقول في مربع تسجيل الدخول.

<نوع الإدخال = "نص" اسم = "comboBoxField" التركيز التلقائي>

العنصر النائب

توفر السمة placeholder طريقة لتحديد قيمة لإظهارها في حقل النموذج قبل أن يكتب المستخدم أي شيء في الحقل. بمجرد أن يبدأ المستخدم في الكتابة، تختفي قيمة العنصر النائب.

يمكن استخدام السمة placeholder مع أي حقل نموذج يأخذ إدخال النص. هنا مثال:

<input type = "text" name = "textField" placeholder = "اكتب هنا">

مطلوب

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

<نوع الإدخال = "نص" اسم = "حقل النص" مطلوب>

لاحظ أنه ليس عليك تقديم قيمة للسمة. وجودها يكفي.

عديد

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

تعمل السمة multiple أيضًا مع حقول تحميل الملفات ( type="file")، مما يسمح للمستخدم بتحميل ملفات متعددة.

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

<نوع الإدخال = "نص" اسم = "textField" نمط = "[AZ] [0-9]">

بناء جملة التعبير العادي المستخدم هو نفسه المستخدم في JavaScript، ولكن مع وجود ضمني ^في البداية وa $ في النهاية. يتطابق هذان الحرفان مع بداية الإدخال ونهايته، لكن الآن لا تحتاج إلى إضافتهما في كل مرة.

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

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

الحد الأدنى + الحد الأقصى

السمات minو max تقيد الإدخال المسموح به لحقل الإدخال. يمكنك استخدام هذه السمات لتعيين، على سبيل المثال، الحد الأدنى والحد الأقصى للعدد المسموح به للحقل number، أو الحد الأدنى والحد الأقصى للتاريخ المسموح به في date الحقل.

لا تحتاج إلى أن يكون لديك كلاً من السمة min و max السمة. يمكنك أيضًا استخدام واحدة منها فقط - إما السمة min أو max .
خطوة.

يتم استخدام السمة step لتعيين مقدار زيادة number الحقول على سبيل المثال range مع كل نقرة على أزرار الأسهم، أو حركة شريط التمرير.

استمارة

يتم استخدام السمة form لربط حقول النموذج بعنصر form غير متداخل بداخله. هنا مثال:

<معرف النموذج = "النموذج">
<نوع الإدخال = "نص">
</النموذج>

<نوع الإدخال = "نطاق" النموذج = "النموذج"

لاحظ الحقل الأخير range. يتم وضعه خارج العنصر form. تشير سمة form الحقل إلى العنصر . وبهذه الطريقة يعرف المتصفح أن حقل الإدخال هذا ينتمي إلى هذا النموذج، حتى لو لم يكن حقل الإدخال متداخلاً داخل العنصر .

تعديل المقال