مولد نماذج CSS

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

<form class="form">
  <label class="field">
    <span class="field-label">Email</span>
    <input type="email" required>
    <span class="field-error">Please enter a valid email.</span>
  </label>

  <label class="field">
    <span class="field-label">Password</span>
    <input type="password" minlength="8" required>
  </label>

  <button type="submit" class="button">Sign up</button>
</form>

.field {
  display: block;
  margin-bottom: 1.25rem;
}
.field-label {
  display: block;
  font-weight: 500;
  margin-bottom: .25rem;
}
.field input {
  width: 100%;
  padding: .5rem .75rem;
  font: inherit;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  transition: border-color 120ms, box-shadow 120ms;
}
.field input:focus-visible {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.field input:invalid:not(:placeholder-shown) {
  border-color: #dc2626;
}
.field-error { display: none; color: #dc2626; font-size: .875rem; margin-top: .25rem; }
.field input:invalid:not(:placeholder-shown) ~ .field-error { display: block; }

أربعة أنماط شائعة

تعتبر التسمية العائمة هي الأجمل ولكنها تتطلب ترميزًا إضافيًا أو JavaScript لاكتشاف الحالة الفارغة. المبين هو الأكثر عالمية.

قائمة التحقق من إمكانية الوصول

• ** تسمية مرئية لكل إدخال **. لا تستخدم أبدًا العنصر النائب كتسمية وحيدة - فهو يختفي عند التركيز ويفشل في التباين.
• <label for> أو التفاف <label>. كلاهما صالح؛ التغليف أسهل قليلاً.
• مؤشر التركيز. لا تستخدم outline: none أبدًا بدون بديل. يحتاجها مستخدمو لوحة المفاتيح.
• رسائل الخطأ: قم بربطها عبر aria-describedby عند الإدخال. لا تستخدم اللون وحده لتحديد الأخطاء، بل قم بتضمين رسالة نصية أو رمز.
• الحقول المطلوبة: استخدم سمة required. أضف علامة مرئية (علامة النجمة) في الملصق للمستخدمين المبصرين.
• أنواع الإدخال: استخدم type="email"، type="tel"، type="url"، type="number". تتكيف لوحات المفاتيح المحمولة.
• ** سمات autocomplete **: autocomplete="email"، autocomplete="current-password"، وما إلى ذلك. يوفر على المستخدمين الكثير من الكتابة.

حالات التحقق الأصلية

يحتوي CSS على فئات زائفة من أجل صلاحية النموذج:

• :required / :optional
• :valid / :invalid
• :in-range / :out-of-range (للمدخلات الرقمية ذات الحد الأدنى/الحد الأقصى)
• :placeholder-shown (فارغ، العنصر النائب مرئي)
• :user-invalid (تفاعل المستخدم * و* غير صالح، هو التفاعل الصحيح لأنماط الأخطاء)

تعد الفئة الزائفة :user-invalid هي الطريقة الأنظف لإظهار الأخطاء فقط بعد أن يقوم المستخدم بإجراء ما، مع تجنب الحدود الحمراء قبل التفاعل. وصل الدعم إلى جميع المتصفحات الرئيسية حوالي عام 2023.

حالة معطلة

.field input:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

المدخلات المعطلة غير قابلة للتركيز أو التقديم. إذا كنت تريد التركيز عليها لقارئات الشاشة، فاستخدم readonly بدلاً من ذلك - يرسل النموذج القيمة ولكن لا يمكن للمستخدم تحريرها.