Foomamka CSS (Form Styling)

Foomamku (Forms) waxay ka dhigan yihiin albaabka laga galo mareegaha is-dhexgalka leh (interactive websites) [1]. Si kastaba ha ahaatee, foomamka caadiga ah ee bog-furaha (default browser forms) badanaa waa kuwo muuqaal ahaan aad u fudud ama aan qurux badnayn. CSS waxay ku siinaysaa maamul buuxa oo aad ku qaabayn karto meelaha wax lagu qoro (inputs), badhamada (buttons), iyo sanduuqyada xulashada (selects) [1]. Casharkan waxaan ku baran doonnaa sida loo dhoodhoobo foom qurux badan isla markaana ay dhib yar tahay in la adeegsado (accessibility) [1].

Qaabka Aasaasiga ah ee Inputs-ka

Waa muhiim inay curiyayaasha foomku yeeshaan qoraal, qaab, iyo midab la jaanqaadaya naqshadda guud ee mareegtaada:

input, textarea, select {
  width: 100%;
  padding: 10px 14px;
  font-size: 0.9rem;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  background: white;
  color: #0f172a;
  transition: border-color 0.2s, box-shadow 0.2s;
}

Xaaladda Firfircoonaanta — :focus

Marka isticmaalahu uu gujiyo sanduuqa wax-qorista (focus state), waa inuu curiyuhu muujiyo isbeddel cad oo soo jiidasho leh:

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

Tani waxay abuurtaa waxa loo yaqaan Focus Ring — oo ah xariiq cad oo iftiimaysa oo ku wareegsan curiyaha. Hannaankani wuxuu muhiimad weyn u leeyahay ku-habboonaanta adeegsiga (accessibility).

Qoraalka Hordhaca ah — :placeholder

Qoraalka hordhaca ah ee ku dhex jira sanduuqyada wax-qorista (placeholder) sidoo kale waa la qaabayn karaa:

input::placeholder, textarea::placeholder {
  color: #94a3b8;
  font-size: 0.85rem;
  opacity: 1; /* Firefox waxay si otomaatik ah u yareysaa opacity-ga */
}

Xaaladda Xirnaanta — :disabled

Sanduuqyada wax-qorista ee la xiray ama la curyaamiyay (disabled inputs) waa inay yeeshaan muuqaal muujinaya inaan hadda la adeegsan karin:

input:disabled {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
  opacity: 0.6;
}

Hufnaanta iyo Saxnimada Xogta — :valid iyo :invalid

CSS waxay awood u leedahay inay si toos ah u muujiso haddii xogta lagu qoray sanduuqa ay sax tahay ama ay khaldan tahay:

/* Marka xogta lagu qoray ay sax tahay: */
input:valid {
  border-color: #22c55e;
}

/* Marka xogta lagu qoray ay khaldan tahay: */
input:invalid {
  border-color: #ef4444;
}

/* Muujinta farriinta khaldan ee ka dhalata qaladka: */
input:invalid + .error-msg {
  display: block;
}

Qaabaynta Gaarka ah ee Checkbox & Radio

Sanduuqyada calaamadaynta ee caadiga ah ee bog-furayaashu waa kuwo fudud oo aan qurux badnayn. Waxaad isticmaali kartaa sifada appearance: none si aad meesha uga saarto qaabkaas caadiga ah una dhoodhoobto mid cusub:

/* Meesha ka saar qaabkii caadiga ahaa ee checkbox-ka: */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

/* Marka la calaamadeeyo (Checked state): */
input[type="checkbox"]:checked {
  background: #3b82f6;
  border-color: #3b82f6;
}

/* Astaanta calaamadda saxda ah (V-checkmark): */
input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: 700;
}

Qaabaynta Gaarka ah ee badhanka goobaabta (Custom Radio)

input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
}

input[type="radio"]:checked {
  border-color: #3b82f6;
  background: #3b82f6;
  box-shadow: inset 0 0 0 3px white;
}

Qaabaynta Arrow-ga Xulashada (Custom Select Arrow)

Badhanka xulashada hoos u dhaca (select element) isna waxaa loogu dari karaa falaar si gaar ah loo qaabeeyay adoo adeegsanaya koodkan:

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

Qaabaynta Sanduuqa Soo-gudbinta Faylasha (File Input)

Curiyaha soo-gudbinta faylka (file input) waa mid ka mid ah kuwa ugu adag qaabaynta. Habka ugu habboon ayaa ah inaad qariso koodka caadiga ah ee curiyaha, ka dibna aad qaabayso label-ka si uu u noqdo badhan la gujiyo:

/* Qari curiyaha rasmiga ah ee file-ka: */
input[type="file"] {
  display: none;
}

/* Qaabee label-ka si uu u yeesho muuqaal badhan dhiirrigelinaya soo-gudbinta faylka: */
.file-label {
  display: inline-block;
  padding: 10px 20px;
  background: #f1f5f9;
  border: 1.5px dashed #cbd5e1;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s;
}

.file-label:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

Helitaanka iyo Ku-habboonaanta Adeegsiga (Focus & Accessibility)

Xariiqda firfircoonaanta (Focus Ring) waxay muhiimad weyn u leeyahay ku-habboonaanta adeegsiga (accessibility). Dadka isticmaala keyboard-ka si ay mareegta u dhex maraan waxay si buuxda ugu tiirsan yihiin inay arkaan halka uu focus-ka hadda joogo:

/* Dami xariiqda focus-ka ee caadiga ah ee browsers-ka qaar: */
*:focus {
  outline: none;
}

/* U muuji Focus Ring cad oo qaabaysan oo loogu talagalay dadka isticmaala keyboard-ka: */
*:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

Qaabaynta Guud ee Foomka (Form Layout)

Foom kasta oo dhoodhooban wuxuu u baahan yahay in loo habeeyo qaab dhismeed nadiif ah oo dhib yar in la fahmo:

.kaadhka-foomka {
  max-width: 440px;
  margin: 0 auto;
  background: white;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  padding: 32px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: #334155;
}

Tusaale Mashruuc Dhamaystiran oo ku saabsan Foomamka

<!DOCTYPE html>
<html lang="so">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Foomamka CSS — Galidda &amp; Is-diiwaangelinta</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, sans-serif;
      background: #f8fafc;
      padding: 40px 20px;
      color: #0f172a;
    }

    .weelka {
      max-width: 480px;
      margin: 0 auto;
    }

    h1 { font-size: 1.5rem; text-align: center; margin-bottom: 6px; }
    .subtitle { text-align: center; color: #64748b; margin-bottom: 28px; font-size: 0.9rem; }

    /* Card */
    .foom-kaadh {
      background: white;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      padding: 32px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    /* Input base */
    input, textarea, select {
      width: 100%;
      padding: 10px 14px;
      font-size: 0.9rem;
      font-family: inherit;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      background: white;
      color: #0f172a;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    input:focus, textarea:focus, select:focus {
      outline: none;
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

    /* Focus-visible for keyboard users */
    *:focus-visible {
      outline: 2px solid #3b82f6;
      outline-offset: 2px;
    }

    input::placeholder, textarea::placeholder {
      color: #94a3b8;
      font-size: 0.85rem;
    }

    input:disabled {
      background: #f1f5f9;
      color: #94a3b8;
      cursor: not-allowed;
      opacity: 0.6;
    }

    /* Validation states */
    input:valid {
      border-color: #22c55e;
    }

    input:invalid:not(:focus):not(:placeholder-shown) {
      border-color: #ef4444;
    }

    .input-dhac {
      margin-bottom: 18px;
    }

    label {
      display: block;
      font-size: 0.85rem;
      font-weight: 600;
      margin-bottom: 6px;
      color: #334155;
    }

    .help-text {
      font-size: 0.75rem;
      color: #94a3b8;
      margin-top: 4px;
    }

    .error-msg {
      display: none;
      font-size: 0.75rem;
      color: #ef4444;
      margin-top: 4px;
    }

    input:invalid:not(:focus):not(:placeholder-shown) ~ .error-msg {
      display: block;
    }

    /* Custom Checkbox */
    .checkbox-group {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
    }

    input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border: 2px solid #cbd5e1;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
      flex-shrink: 0;
    }

    input[type="checkbox"]:checked {
      background: #3b82f6;
      border-color: #3b82f6;
    }

    input[type="checkbox"]:checked::after {
      content: "✓";
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 14px;
      font-weight: 700;
    }

    .checkbox-group label {
      margin-bottom: 0;
      font-weight: 400;
      cursor: pointer;
    }

    /* Custom Radio */
    .radio-group {
      display: flex;
      gap: 20px;
      margin-bottom: 18px;
    }

    .radio-item {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }

    input[type="radio"] {
      appearance: none;
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border: 2px solid #cbd5e1;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    input[type="radio"]:checked {
      border-color: #3b82f6;
      background: #3b82f6;
      box-shadow: inset 0 0 0 3px white;
    }

    .radio-item label {
      margin-bottom: 0;
      font-weight: 400;
      cursor: pointer;
    }

    /* Custom Select */
    select {
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 36px;
    }

    /* File Input */
    input[type="file"] {
      display: none;
    }
    .file-label {
      display: inline-block;
      padding: 10px 20px;
      background: #f1f5f9;
      border: 1.5px dashed #cbd5e1;
      border-radius: 10px;
      cursor: pointer;
      font-size: 0.875rem;
      transition: all 0.2s;
      width: 100%;
      text-align: center;
    }
    .file-label:hover {
      background: #e2e8f0;
      border-color: #94a3b8;
    }

    /* Textarea */
    textarea {
      resize: vertical;
      min-height: 80px;
    }

    /* Submit button */
    .btn-submit {
      width: 100%;
      padding: 12px;
      background: #3b82f6;
      color: white;
      border: none;
      border-radius: 10px;
      font-size: 0.95rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      margin-top: 4px;
    }
    .btn-submit:hover {
      background: #2563eb;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(59,130,246,0.3);
    }
    .btn-submit:active {
      transform: translateY(0);
    }

    .form-footer {
      text-align: center;
      margin-top: 20px;
      font-size: 0.85rem;
      color: #64748b;
    }
    .form-footer a { color: #3b82f6; text-decoration: none; font-weight: 600; }

    /* Toggle tabs */
    .tabs {
      display: flex;
      gap: 0;
      margin-bottom: 24px;
      background: #f1f5f9;
      border-radius: 10px;
      padding: 4px;
    }
    .tab {
      flex: 1;
      text-align: center;
      padding: 8px;
      border-radius: 8px;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      border: none;
      background: transparent;
      color: #64748b;
    }
    .tab.active {
      background: white;
      color: #0f172a;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }
  </style>
</head>
<body>

<div class="weelka">
  <h1>Ku Biir</h1>
  <p class="subtitle">Abuur akoon cusub ama gal haddii aad hore u lahayd mid kale</p>

  <div class="foom-kaadh">
    <div class="tabs">
      <button class="tab active" onclick="muuji('login')">Gal</button>
      <button class="tab" onclick="muuji('register')">Is-diiwaangeli</button>
    </div>

    <!-- Foomka Galidda (Login Form) -->
    <form id="login">
      <div class="input-dhac">
        <label for="email">Email-kaaga</label>
        <input type="email" id="email" placeholder="email@tusaale.so" required>
        <div class="error-msg">Fadlan geli email sax ah</div>
      </div>

      <div class="input-dhac">
        <label for="password">Password-kaaga</label>
        <input type="password" id="password" placeholder="••••••••" required minlength="6">
        <div class="help-text">Ugu yaraan 6 xaraf</div>
        <div class="error-msg">Password-ku waa inuu ka kooban yahay 6 xaraf</div>
      </div>

      <div class="checkbox-group">
        <input type="checkbox" id="remember">
        <label for="remember">I xusuuso</label>
      </div>

      <button type="submit" class="btn-submit">Gal</button>
      <div class="form-footer">
        Miyaadan lahayn akoon? <a href="#">Is-diiwaangeli</a>
      </div>
    </form>

    <!-- Foomka Is-diiwaangelinta (Register Form) -->
    <form id="register" style="display:none;">
      <div class="input-dhac">
        <label for="reg-name">Magaca</label>
        <input type="text" id="reg-name" placeholder="Magacaaga" required>
      </div>

      <div class="input-dhac">
        <label for="reg-email">Email-kaaga</label>
        <input type="email" id="reg-email" placeholder="email@tusaale.so" required>
      </div>

      <div class="input-dhac">
        <label for="reg-password">Password-kaaga</label>
        <input type="password" id="reg-password" placeholder="••••••••" required minlength="6">
      </div>

      <div class="input-dhac">
        <label>Nooca Akoonka</label>
        <div class="radio-group">
          <div class="radio-item">
            <input type="radio" name="account-type" id="student" value="student" checked>
            <label for="student">Arday</label>
          </div>
          <div class="radio-item">
            <input type="radio" name="account-type" id="teacher" value="teacher">
            <label for="teacher">Macallin</label>
          </div>
        </div>
      </div>

      <div class="input-dhac">
        <label for="reg-country">Waddanka</label>
        <select id="reg-country" required>
          <option value="">Dooro waddankaaga</option>
          <option value="so">Soomaaliya</option>
          <option value="ke">Kenya</option>
          <option value="et">Itoobiya</option>
          <option value="dj">Jabuuti</option>
        </select>
      </div>

      <div class="input-dhac">
        <label for="reg-bio">Faahfaahin Kooban</label>
        <textarea id="reg-bio" placeholder="Wax yar oo ku saabsan naftaada ka qor..."></textarea>
      </div>

      <div class="input-dhac">
        <label>Sawirka Akoonka (Profile Picture)</label>
        <input type="file" id="reg-file">
        <label for="reg-file" class="file-label">+ Soo xulo sawir</label>
      </div>

      <div class="checkbox-group">
        <input type="checkbox" id="terms" required>
        <label for="terms">Waxaan aqbalay <a href="#">shuruudaha adeegga</a></label>
      </div>

      <button type="submit" class="btn-submit">Is-diiwaangeli</button>
      <div class="form-footer">
        Miyaad hore akoon u lahayd? <a href="#">Gal</a>
      </div>
    </form>
  </div>
</div>

<script>
  function muuji(id) {
    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
    if (id === 'login') {
      document.querySelectorAll('.tab')[0].classList.add('active');
      document.getElementById('login').style.display = 'block';
      document.getElementById('register').style.display = 'none';
    } else {
      document.querySelectorAll('.tab')[1].classList.add('active');
      document.getElementById('login').style.display = 'none';
      document.getElementById('register').style.display = 'block';
    }
  }
</script>

</body>
</html>

Casharka xiga: Waxaan ku baran doonnaa Sifooyinka Sare iyo X xulayaasha Adag (Advanced Selectors) ee CSS.