Foomamka Horumarsan

Casharkaan waxaan qoto-dheer u galnaa foomamka. HTML5 wuxuu keenay noocyo badan oo cusub oo <input> ah, xaqiijin la dhex-dhigay, iyo hab-dhaqan wanaagsan oo u sahlan dhammaan isticmaalayaasha.

Noocyada Cusub ee <input> ee HTML5

HTML5 wuxuu ku daray noocyo badan oo browser-ku si toos ah u maamulaayaa:

<!-- Nambarka -->
<input type="number" min="0" max="100" step="5">

<!-- Taariikhda -->
<input type="date">

<!-- Wakhtiga -->
<input type="time">

<!-- Midabka -->
<input type="color" value="#00d97e">

<!-- Xadka (range slider) -->
<input type="range" min="0" max="100" value="50">

<!-- URL -->
<input type="url" placeholder="https://example.com">

<!-- Raadinta -->
<input type="search" placeholder="Raadi...">

<!-- File soo dejin -->
<input type="file" accept=".pdf,.docx">

<!-- File badan -->
<input type="file" multiple accept="image/*">

<!-- Telefon -->
<input type="tel" placeholder="+252-61-000-0000">

<!-- Wakhtiga iyo taariikhda -->
<input type="datetime-local">

<!-- Bisheed -->
<input type="month">

<!-- Toddobaadka -->
<input type="week">

<!-- Sirta si loo xaqiijiyo -->
<input type="password" id="pass1">
<input type="password" id="pass2" placeholder="Ku celi sirta">

Xaqiijinta Foomka — Validation

Browser-ku wuxuu si toos ah u xaqiijin karaa xogta — ka hor in loo diro server-ka.

Sifada required

Unugga waa in lagu buuxiyaa si foomku u gudbo:

<input type="text"  name="magac" required>
<input type="email" name="email" required>
<select name="dal"  required>
  <option value="">— Dooro dal —</option>
  <option value="so">Soomaaliya</option>
</select>

Sifada minlength iyo maxlength

<!-- Ugu yaraan 3 xaraf, ugu badan 50 -->
<input type="text" name="magac" minlength="3" maxlength="50">

<!-- Password ugu yaraan 8 xaraf -->
<input type="password" name="pass" minlength="8">

Sifada min iyo max

<!-- Da'da 1 ilaa 120 -->
<input type="number" name="da" min="1" max="120">

<!-- Taariikhda bilowga sannadka 2000 ilaa 2025 -->
<input type="date" name="taariikh" min="2000-01-01" max="2025-12-31">

Sifada pattern — Regular Expression

<!-- Kaliya lambarrada telefoonka Soomaaliya -->
<input type="tel" name="tel"
  pattern="(\+252|0)(6[15-9]|9[0-9])\d{7}"
  placeholder="+252-61-0000000"
  title="Nambarka telefoonka Soomaaliya — sida +252610000000">

<!-- Zip code -->
<input type="text" name="zip" pattern="\d{5}" title="5 nambarro">

<fieldset> iyo <legend> — Kooxaynta Foomka

Marka foomku leeyahay qaybaha kala duwan, waxaad ku kooxayn kartaa <fieldset>:

<form>

  <fieldset>
    <legend>Macluumaadka Shakhsiga</legend>

    <label for="magac">Magaca:</label>
    <input type="text" id="magac" name="magac" required>

    <br><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <br><br>

    <label for="da">Da'da:</label>
    <input type="number" id="da" name="da" min="1" max="120">
  </fieldset>

  <br>

  <fieldset>
    <legend>Doorashada Koorsooyinka</legend>

    <label>
      <input type="checkbox" name="koorso" value="html"> HTML
    </label>
    <br>
    <label>
      <input type="checkbox" name="koorso" value="css"> CSS
    </label>
    <br>
    <label>
      <input type="checkbox" name="koorso" value="js"> JavaScript
    </label>
  </fieldset>

  <br>
  <button type="submit">Diiwaangeli</button>
  <button type="reset">Nadiifi</button>

</form>

<label> — Muhimmadiisa

Sifada for ee <label> waa in ay la mid tahay id-ka <input>:

<!-- Hab SAXAN — label iyo input waxay xidhan yihiin id -->
<label for="magac">Magacaaga:</label>
<input type="text" id="magac" name="magac">

<!-- Hab kale — label wuxuu ku duubayaa input -->
<label>
  Magacaaga:
  <input type="text" name="magac">
</label>

Faa’iidada: Marka la gujiyaa <label>, input-ka ayaa firfircoon — faa’iido weyn ugu ah isticmaalayaasha.

Badhannada Foomka

<!-- Gudbi foomka -->
<button type="submit">Gudbi</button>

<!-- Nadiifi dhammaan goobaha -->
<button type="reset">Bilow Dib</button>

<!-- Badhan aan foomku u jawabin -->
<button type="button" onclick="waxQabso()">Wax Qabso</button>

<!-- Input nooca submit -->
<input type="submit" value="Diiwaangeli">

<!-- Input nooca image -->
<input type="image" src="badhan.png" alt="Gudbi">

<datalist> — Liis Soo Jeedinta

Isticmaalaha wuxuu qori karaa ama liiska ka dooran karaa:

<label for="magac-dal">Dalkaaga:</label>
<input list="dallada" id="magac-dal" name="dal" placeholder="Qor ama dooro">

<datalist id="dallada">
  <option value="Soomaaliya">
  <option value="Kenya">
  <option value="Itoobiya">
  <option value="Jabuuti">
  <option value="Eritrea">
</datalist>

<output> — Natiijada Xisaabta

<form oninput="natiijada.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" value="0"> +
  <input type="number" id="b" value="0"> =
  <output name="natiijada">0</output>
</form>

Tusaale Dhamaystiran — Foom Isdiiwaangelinta

<!DOCTYPE html>
<html lang="so">
<head>
  <meta charset="UTF-8">
  <title>Isdiiwaangelinta</title>
  <style>
    body     { font-family: sans-serif; max-width: 500px; margin: 40px auto; padding: 0 20px; }
    label    { display: block; margin-top: 14px; font-weight: 600; color: #333; }
    input, select, textarea {
      width: 100%; padding: 10px; border: 1.5px solid #ddd;
      border-radius: 8px; font-size: 15px; margin-top: 4px;
      box-sizing: border-box;
    }
    input:focus { border-color: #00d97e; outline: none; }
    button[type="submit"] {
      margin-top: 20px; width: 100%; padding: 12px;
      background: #00d97e; color: #0a0a0a; border: none;
      border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer;
    }
    button[type="submit"]:hover { background: #00f090; }
    fieldset { border: 1.5px solid #eee; border-radius: 10px; padding: 16px; }
    legend   { font-weight: 700; color: #0a0a0a; padding: 0 8px; }
  </style>
</head>
<body>

  <h1>Isdiiwaangelinta Koorsooyinka</h1>

  <form action="/diiwaangeli" method="POST">

    <fieldset>
      <legend>Macluumaadkaaga</legend>

      <label for="magac-buuxa">Magaca Buuxa</label>
      <input type="text" id="magac-buuxa" name="magac"
             placeholder="Axmed Faarax" required minlength="3">

      <label for="email-adrs">Email</label>
      <input type="email" id="email-adrs" name="email"
             placeholder="axmed@example.com" required>

      <label for="sirta">Sirta</label>
      <input type="password" id="sirta" name="password"
             placeholder="Ugu yaraan 8 xaraf" required minlength="8">

      <label for="da">Da'da</label>
      <input type="number" id="da" name="da"
             min="10" max="100" placeholder="20">
    </fieldset>

    <br>

    <fieldset>
      <legend>Dooro Koorsooyinka</legend>

      <label>
        <input type="checkbox" name="koorso" value="html"> HTML Aasaasiga
      </label>
      <label>
        <input type="checkbox" name="koorso" value="css"> CSS Aasaasiga
      </label>
      <label>
        <input type="checkbox" name="koorso" value="js"> JavaScript
      </label>
    </fieldset>

    <br>

    <label for="heer">Heerkaaga Hadda</label>
    <select id="heer" name="heer" required>
      <option value="">— Dooro —</option>
      <option value="bilow">Bilow ah</option>
      <option value="dhexe">Dhexe</option>
      <option value="sare">Sare</option>
    </select>

    <label for="faallo">Faallo Dheeraad ah</label>
    <textarea id="faallo" name="faallo" rows="4"
              placeholder="Wax kasta oo aad rabto inaad nagu sheegto..."></textarea>

    <label>
      <input type="checkbox" name="heshiis" required>
      Waan ogolahay <a href="#">shuruudaha adeegga</a>
    </label>

    <button type="submit">Diiwaangeli Bilaash</button>

  </form>

</body>
</html>

Koobid

Casharka xigta: Waxaan baranayaa Qaab-dhismeedka Bogga Dhammaystiran — sida HTML, CSS, JavaScript ay is-weydaaraan.