شرح أنشاء نماذج HTML و CSS

من الناحية التاريخية ، كانت نماذج HTML صعبة للغاية – أولاً ، لأنه كان مطلوبًا على الأقل القليل من JavaScript ، وثانيًا ، لأنه لا يوجد قدر من CSS يمكن أن يجعلها تتصرف.

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

تشكيل الهيكل الأساسي

إدخال نموذج بقيمة مملوءة مسبقًا

ابدأ بامتداد <form> جزء.

لا شيء يتوهم هنا. مجرد تغطية الهيكل الأساسي.

<form>
    ...
</form>

إذا كنت ترسل بيانات النموذج بشكل طبيعي (أي بدون JavaScript) ، فستحتاج إلى تضمين ملف action السمة ، حيث تكون القيمة هي عنوان URL الذي سترسل بيانات النموذج إليه. ال method يجب ان يكون GET أو POST اعتمادًا على ما تحاول تحقيقه (لا ترسل بيانات حساسة باستخدام GET).

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

لا تحتاج النماذج المستندة إلى JavaScript بالضرورة إلى هذه السمات.

<form method="POST" action="/subscribe" enctype="application/x-www-form-urlencoded" target="_blank">
    ...
</form>

تتكون النماذج من المدخلات التي تتوقع قيم البيانات.

<form>
    <input type="text">
    <input type="text" value="Prefilled value">
</form>

انظر القلم
النموذج 1
بواسطة SitePoint (تضمين التغريدة)
على كود.

بما في ذلك التسميات لتحسين سهولة الاستخدام والوصول

كل إدخال يحتاج إلى تسمية.

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

التسميات المجاورة

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

ومع ذلك ، قد تكون الطريقة المجاورة ضرورية في الظروف المخففة ، لذا إليك ما سيبدو عليه الأمر:

<label for="firstName">First name</label>
<input id="firstName">

كما ترون من المثال أعلاه ، فإن for سمة من سمات <label> يجب طابق ال id سمة الإدخال ، وما يفعله هذا هو شرح لأجهزة الإدخال التي ينتمي إليها واصف النص إلى أي إدخال. سيقوم جهاز الإدخال بعد ذلك بترحيل هذا إلى المستخدمين (برامج قراءة الشاشة ، على سبيل المثال ، ستمليها عبر الكلام).

تسميات ARIA

بينما لغة HTML الدلالية أفضل ، ARIA يمكن أن تعوض ملصقات (تطبيقات الإنترنت الغنية التي يمكن الوصول إليها) في حالة عدم وجودها. في هذه الحالة ، إليك ما قد تبدو عليه التسمية في حالة عدم وجود HTML فعلي <label>:

<input aria-label="First name">

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

<h1>Subscribe</h1>
<form>
    <input aria-label="Email address" placeholder="[email protected]">
</form>

(سأشرح ما هي العناصر النائبة في لحظة.)

تسميات التغليف

يعد تغليف المدخلات داخل الملصقات هو الأسلوب الأكثر نظافة. أيضًا ، بفضل CSS’s :focus-within، يمكننا أيضًا تصميم الملصقات أثناء تلقي مدخلات الأطفال التركيز ، لكننا سنناقش ذلك لاحقًا.

<label>
    First name<input>
</label>

العناصر النائبة مقابل التصنيفات

مدخلين مع نص عنصر نائب مرئي

مقارنة موجزة:

  • تشير التسميات إلى ما يتوقعه الإدخال
  • تظهر العناصر النائبة أمثلة على التوقعات المذكورة

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

من الناحية المثالية ، مع ذلك ، يجب أن نستخدم كلاهما:

<label>
    First name<input placeholder="Bruce">
</label>

انظر القلم
شكل 2
بواسطة SitePoint (تضمين التغريدة)
على كود.

اختيار أنواع المدخلات

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

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden"> 
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit"> 
<input type="tel">
<input type="text"> 
<input type="time">
<input type="url">
<input type="week">

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

مدخلات التصميم

يمكن القول إن الجانب الأكثر إثارة للغضب في نماذج الترميز هو تجاوز التصميم الافتراضي للمتصفح. الحمد لله اليوم appearance: none; لديه دعم متصفح 96.06٪ وفقًا لـ caniuse.com.

بعد إعادة تعيين التصميم الافتراضي لمتصفح الويب باستخدام كود CSS التالي ، يمكننا حينئذٍ نمط المدخلات كما نريد ، وهذا يشمل أيضًا كل من أنواع إدخال الراديو ومربع الاختيار:

input {
 -webkit-appearance: none;
 -moz-appearance: none;
    appearance: none;
    ...
}

ومع ذلك ، قد تأتي بعض هذه المدخلات مع مراوغات يصعب التغلب عليها أو حتى من المستحيل التغلب عليها (اعتمادًا على متصفح الويب). لهذا السبب ، يميل العديد من المطورين إلى الرجوع إلى الوضع الافتراضي type="text" السمة = القيمة إذا وجدوا هذه المراوغات غير مرغوب فيها (على سبيل المثال ، “علامة الإقحام” قيد التشغيل input type="number").

مهما يكن هنا يكون رب ضارة نافعة …

تحديد inputmode

مع دعم مستعرض الويب بنسبة 82.3٪ وفقًا لـ caniuse.com، الجديد inputmode تحدد السمة تخطيط لوحة المفاتيح الذي سيتم الكشف عنه على الأجهزة المحمولة بصرف النظر عن الإدخال type تم استخدامها.

أفضل من لا شيء ، أليس كذلك؟

<input type="text" inputmode="none"> 
<input type="text" inputmode="text"> 
<input type="text" inputmode="decimal">
<input type="text" inputmode="numeric">
<input type="text" inputmode="tel">
<input type="text" inputmode="search">
<input type="text" inputmode="email">
<input type="text" inputmode="url">

التحقق من صحة إدخال المستخدم

إذا اخترت التحقق من صحة HTML الأصلي بدلاً من حل JavaScript ، فتذكر ذلك inputmode لا يحقق شيئا في هذا الصدد. inputmode="email" متعود التحقق من صحة عنوان البريد الإلكتروني ، بينما input type="email" إرادة. هذا هو الفرق.

إذا وضعنا هذا جانبًا ، فلنناقش ما الذي يؤدي إلى التحقق من الصحة:

<input required> 
<form required> 


<input type="email"> 
<input type="email" required> 


<input minlength="8"> 
<input maxlength="32"> 
<input maxlength="32" required> 


<input type="date" min="yyyy-mm-dd"> 
<input type="number" max="66" required> 

إنشاء قواعد مخصصة

تتطلب القواعد المخصصة معرفة تعابير JavaScript العادية ، كما يستخدمها ملف RegExp كائن (ولكن ، بدون التفاف الشرطات أو علامات التنصيص). إليك مثال يفرض استخدام الأحرف الصغيرة (a-z) و minlength / maxlength في قاعدة واحدة:

<input pattern="[a-z]{8,12}">

مزيد من المعلومات هنا.

ملاحظة: لا ينبغي أبدًا استخدام التحقق من صحة الواجهة الأمامية (لغة HTML الأصلية أو غير ذلك) كبديل للتحقق من جانب الخادم!

أنماط صالحة / غير صالحة

النموذج مع نص العنصر النائب في حقول النموذج وزر إرسال / اشتراك

فقط لمزيد من الوضوح ، هذه هي الطريقة التي نصمم بها الصلاحية:

input:valid {
    border-left: 1.5rem solid lime;
}

input:invalid {
    border-left: 1.5rem solid crimson;
}

form:invalid {
    
}

هيوستن لدينا مشكلة!

تحاول المدخلات التحقق من صحة قيمها (أو عدم وجودها) على الفور ، لذلك قد يكون الرمز التالي (الذي يعرض الحالات الصالحة / غير الصالحة فقط بينما يحتفظ الإدخال بقيمة) أفضل:

input:not(:placeholder-shown):valid {
    border-left: 1.5rem solid lime;
}

يُظهر هذا التصميم الصالح / غير الصحيح ولكن فقط عندما يكون ملف نائب لا يظهر (لأن المستخدم كتب شيئًا ما).

انظر القلم
النموذج 3
بواسطة SitePoint (تضمين التغريدة)
على كود.

أشياء أساسية أخرى

إرسال بيانات النموذج

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

<input type="email" name="email">
<input type="hidden" name="email" value="{{ user.email }}">

قبول المدخلات الطويلة

بشكل أساسي، <textarea></textarea> هو نفس الشيء مثل <input type="text">، باستثناء حقيقة أن textareas لديها دعم متعدد الأسطر. نعم، <input type="textarea"> سيكون بالتأكيد أكثر سهولة ، ولكن للأسف <textarea></textarea> هي الطريقة الصحيحة لقبول المدخلات الطويلة من المستخدمين. بالإضافة إلى ذلك ، فإنه يقبل معظم (إن لم يكن كل) السمات التي تقوم بها المدخلات.

تجميع المدخلات لتحسين إمكانية الوصول

على الرغم من أن النماذج الأقصر تقدم تجربة مستخدم أفضل بكثير ، إلا أنه في بعض الأحيان لا يمكن تجنب النماذج الأطول. في مثل هذا السيناريو ، فإن <fieldset> يمكن استخدام العنصر لاحتواء المدخلات ذات الصلة ، مع الطفل <legend> يتم استخدامه كعنوان / عنوان لـ <fieldset>:

<fieldset>
    <legend>Name</legend>
    <input type="text" name="title">
    <input type="text" name="firstName">
    <input type="text" name="lastName">
</fieldset>
<fieldset>
    <legend>Contact details</legend>
    <input type="email" name="email">
    <input type="tel" name="homePhone">
    <input type="tel" name="mobilePhone">
</fieldset>

من الجيد معرفة الأشياء

تعطيل المدخلات

مضيفا disabled يمكن أن تجعل السمة أحد المدخلات (أو أي عنصر قابل للتركيز) غير صالح ، على الرغم من أن هذا عادةً ما يتم تطبيقه / عدم تطبيقه عبر JavaScript فيما يلي كيفية عملها:

<form disabled>...</form>
<fieldset disabled>...</fieldset>
<input type="submit" disabled>

و CSS المصاحب ، إذا لزم الأمر:

:enabled {
    opacity: 1;
}
:disabled {
    opacity: 0.5;
}

ومع ذلك ، إذا كان كل ما تريد القيام به هو إضافة تلميح مرئي إضافي يشير إلى أن مدخلات المستخدم غير صالحة ، فمن المرجح أنك تريد استخدام مجمع الأشقاء العام (~). الكود التالي يعني بشكل أساسي “زر الإرسال الذي يتبع أي عنصر بإدخال غير صالح”. لا يغير هذا أي وظيفة ، ولكن عندما نستفيد من التحقق من صحة نموذج HTML الأصلي (الذي يعالج تعطيل / تمكين إمكانية الإرسال تلقائيًا) ، فلا بأس بذلك:

:invalid ~ input[type=submit] {
    opacity: 0.5;
}

تعطيل الإدخال ، ولكن إرسال البيانات على أي حال

خليط من <input disabled> و <input type="hidden">، سيضمن المثال التالي عدم إمكانية تغيير القيمة. الفرق هو أن ، على عكس disabled، readonly يتم إرسال القيم كبيانات نموذجية ؛ وعلى عكس hidden، readonly مرئي:

<input readonly value="Prefilled value">

تغيير الزيادات

المدخلات الرقمية لها “زر زيادة ونقصان” لضبط القيمة العددية ، كما أنها تقبل a step السمة التي تحدد قيمة تزايدية بديلة لكل تعديل:

<input type="number" step="0.1" max="1">

تصميم النماذج والتسميات ومجموعات الحقول عند التركيز

يمكننا ان نستخدم focus-within: إلى أسلوب أي والد من المدخلات التي تتلقى التركيز حاليا. على الأرجح سيكون هذا العنصر هو المدخلات <form>، <label>أو <fieldset> حاوية:

form:focus-within,
fieldset:focus-within,
label:focus-within {
    ...
}

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

multiple صالح للملفات وأنواع إدخال البريد الإلكتروني:

<input multiple type="file"> 
<input multiple type="email"> 

كتابة كود شكل مختصر

إذا كان النموذج يتكون فقط من مفرد <button>، <input type="image">أو <input type="submit">، هناك طريقة مختصرة لترميز نماذج HTML. هذا مثال:

<input type="image" formaction formmethod formenctype formtarget>

على عكس هذا:

<form action method enctype target>
    <input type="image">
</form>

هل فوت اي شيء؟

HTML أكثر سهولة مما كانت عليه قبل 10 سنوات على سبيل المثال. إنه يتطور باستمرار ولا شك أنه سيكون هناك المزيد لإضافته إلى موضوع نماذج HTML / CSS في الوقت المناسب. أحد الأمثلة التي تتبادر إلى الذهن هو قائمة البيانات عنصر ، والذي يمكن أن يكون عربات التي تجرها الدواب في الوقت الحالي (خاصة في Firefox). لكن بغض النظر ، هل فاتني شيء؟

سأختم بالإشارة إلى أن هناك بعض جوانب نماذج HTML التي لم أناقشها لأن استخدامها غير مستحسن ، بما في ذلك:

المصدر

أضف تعليق