"Forms and Input Controls in HTML"

 HTML Forms - Foomamka HTML

Maxay yihiin Foomamku?  

Foomamku waa qaybo HTML ah oo loogu talagalay in lagu qaado macluumaadka isticmaaleha. Waxay ka kooban yihiin **xakameynaha galinta** sida text fields, password fields, radio buttons, checkboxes, iyo kuwa kale oo badan.

Qaabka Foomamka loo dhigo:

Foomamka waxaa lagu sameeyaa astaanta `<FORM>` oo leh furitaan iyo xiritaan:  

```html

<FORM> 

  <!-- Xakameynaha foomka waxaa la dhigi karaa gudaha halkan -->

</FORM>

```

 Astaamaha `<FORM>` Tag:

1. **NAME**: Magaca foomka.

2. **ACTION**: Ku sheeg bogga server-ka uu macluumaadka u gudbayo marka isticmaaluhu gujiyo badhanka submit.

3. **METHOD**: Ku qeex habka xogta loo dirayo, sida **GET** ama **POST**.

---

 Xakameynaha Foomamka - Form Controls

Foomamku waxay ka kooban karaan xakameynno kala duwan. Waxaa loo adeegsadaa saddex calaamadod oo waaweyn:  

- `<INPUT>`

- `<TEXTAREA>`

- `<SELECT>`

Tusaalaha noocyada xakameynaha foomamka iyo sharraxaadooda:

| **Nooca Xakameynta** | **Syntax**             | **Sharraxaadda**                                           |

|-----------------------|-----------------------|------------------------------------------------------------|

| **Textbox**           | `<INPUT TYPE="text">` | Gelinta hal sadar oo qoraal ah.                           |

| **Password**          | `<INPUT TYPE="password">` | Qoraalka la geliyo waa qarsoon oo leh xiddigo "*".          |

| **Radio button**      | `<INPUT TYPE="radio">` | Doorashada hal shey oo ka mid ah koox doorasho ah.         |

| **Checkbox**          | `<INPUT TYPE="checkbox">` | Doorashada hal ama dhowr shey.                             |

| **Submit button**     | `<INPUT TYPE="submit">` | Badhan xogta foomka u dira server-ka.                      |

| **Reset button**      | `<INPUT TYPE="reset">` | Dib u celinta dhammaan xogta ilaa heerka asalka.           |

| **Button**            | `<INPUT TYPE="button">` | Badhan isticmaaluhu sameeyo (user-defined button).         |

| **Hidden field**      | `<INPUT TYPE="hidden">` | Qeyb qarsoon oo xog ah (laguma arki karo bogga).           |

| **File upload**       | `<INPUT TYPE="file">` | U oggolow faylasha in la soo geliyo server-ka (attachment).|

| **Image button**      | `<INPUT TYPE="image">` | Sawir u shaqeeya sida badhanka submit.                    |

| **Dropdown**          | `<SELECT SIZE="1">`   | Laga xusho liis; haddii `SIZE="1"`, waxay noqonaysaa dropdown, haddii kale listbox. |

| **Textarea**          | `<TEXTAREA>`          | Gelinta qoraalka dheer ee ka badan hal sadar.             |

---

Astaanta `<INPUT>` ee HTML  

Astaanta `<INPUT>` waxaa loo isticmaalaa in lagu abuuro xakameyn kala duwan oo foomka ah. **TYPE** waa astaanta muhiimka ah ee lagu qeexo nooca xakameynta. Astaamahan iyo sharraxaadoodu waa sidan soo socota:

| **Astaanta**   | **Kusoo Shaqeeya**            | **Sharraxaadda**                                                                                          |

|-----------------|------------------------------|----------------------------------------------------------------------------------------------------------|

| **TYPE**       | Dhammaan                     | Waxay qeexaysaa nooca xakameynta. Haddii aan la qeexin, nooca caadiga ah waa **text**.                   |

| **NAME**       | Dhammaan                     | Waxay dejisaa magaca xakameynta si loo aqoonsado xogta marka loo diro server-ka.                        |

| **VALUE**      | text, password, radio, checkbox | Dejinta qiimaha bilowga ah ee xakameynta. Radio iyo checkbox waa qiimaha la diro haddii la doorto.       |

| **SIZE**       | Text iyo password             | Waxay dejisaa ballaca xakameynta ee tirada xarfo (characters).                                           |

| **MAXLENGTH**  | Text iyo password             | Waxay xaddideysaa tirada ugu badan ee xarfo ah ee isticmaaluhu geli karo.                               |

| **CHECKED**    | Radio iyo checkbox            | Waxay dejisaa xaaladda caadiga ah: radio waa la doortay, checkbox waa la hubiyay.                       |

| **SRC**        | Image                        | Waxay qeexaysaa ilaha sawirka (source), sida magaca faylka iyo kordhintiisa.                            |

| **WIDTH**      | Image                        | Waxay dejisaa ballaca sawirka pixel ama boqolkiiba.                                                      |

| **HEIGHT**     | Image                        | Waxay dejisaa dhererka sawirka pixel ama boqolkiiba.                                                     |

-

--

Tusaale Ku Saabsan Astaanta `<INPUT>`  

Koodhkan wuxuu tusinayaa foom dalab oo leh magaca isticmaale, sirta, jinsiga, iyo waaxda uu ka tirsan yahay.  

```html

<BODY>

  <CENTER><B>Foomka Codsiga</B></CENTER>

  <FORM>

    <B>Magacaaga: <INPUT type="text" value="Mohamed"></B><P> 

    <B>Sirtaada: <INPUT type="password"></B><P> 

    <B>Jinsiga:</B> 

    Rag <INPUT type="radio" name="a" checked> 

    Dumar <INPUT type="radio" name="a"><P>

    <B>Waaxda:</B> 

    <INPUT type="checkbox"> Sharia 

    <INPUT type="checkbox"> BBA 

    <INPUT type="checkbox" checked> BCS <P>

    <INPUT type="reset" value="Nadiifi"> 

    <INPUT type="submit" value="Dir">

  </FORM>

</BODY>

```

 Natiijada Markaad Koodhka Hirgeliso:  

- Foomka waxaa ku jiri doona:  

  - Hal meel lagu qoro magaca isticmaale.  

  - Meel sirta lagu qoro oo xarfaha lagu qarsoomo.  

  - Laba batoon (radio buttons) oo lagu dooranayo jinsiga.  

  - Saddex checkbox oo lagu xulanayo waaxaha (Sharia, BBA, BCS).  

  - Laba badhan oo kala ah mid nadiifinaya xogta iyo mid xogta diraya.  

Astaanta `<SELECT>` ee HTML  

Astaanta `<SELECT>` waxaa loo isticmaalaa in lagu abuuro labada nooc ee xakameynta: **dropdown** (menu-hoos u dhac) iyo **listbox** (sanduuq liis ah). Kala duwanaanshahoodu wuxuu ku xiran yahay qiimaha astaanta **SIZE**:  

- Haddii **SIZE="1"**, waxay noqonaysaa dropdown.  

- Haddii **SIZE > 1**, waxay noqonaysaa listbox.

Labada xakameyn waa kuwo waxtar leh marka aad rabto inaad isticmaaleha siiso liis dheer oo doorasho ah. **Dropdown** wuxuu u oggol yahay isticmaalaha inuu hal doorasho ka sameeyo liiska, halka **listbox** lagu habeyn karo inuu oggolaado doorashooyin badan.

---

 Astaamaha `<SELECT>` Tag  

Astaamaha waxtarka leh ee loo isticmaali karo `<SELECT>` waa kuwaan hoos ku qoran:

| **Astaanta**   | **Sharraxaadda**                                                                                   |

|-----------------|---------------------------------------------------------------------------------------------------|

| **NAME**       | Magaca xakameynta. Magacan waxaa loo diraa server-ka si loo aqoonsado xogta la soo diray.         |

| **SIZE**       | Haddii loo dejiyo **1**, waxay abuureysaa dropdown. Haddii uu ka bato **1**, waxay noqoneysaa listbox. |

| **MULTIPLE**   | Haddii la adeegsado, waxay u oggolaaneysaa isticmaalaha inuu xusho wax ka badan hal shey. Waxa kaliya ee shaqeynaya haddii **SIZE > 1**. |

---

 Calaamadda `<OPTION>`  

Xakameynta `<SELECT>` waxaa lagu buuxiyaa calaamadda `<OPTION>`. Mid kasta oo ka mid ah calaamadahaas wuxuu matalaa hal shey oo liiska ku jira. Calaamadda **SELECTED** waxaa loo isticmaalaa in lagu doorto shey ahaan midka caadiga ah (default).  

Tusaale ahaan:  

```html

<SELECT>

  <OPTION SELECTED>Omar Samatar</OPTION>

  <OPTION>Imam Nawawi</OPTION>

</SELECT>

```

---

 Astaanta `<TEXTAREA>`  

Haddii aad rabto isticmaalaha inuu geliyo xog dheer oo qoraal ah, sida faallooyin ama tilmaamo, waxaad u baahan tahay calaamadda `<TEXTAREA>`. Calaamaddan waxaa loo isticmaalaa in lagu abuuro xakameyn qoraal oo **multi-line** ah.  

Astaamaha Muhiimka ah ee `<TEXTAREA>`  

| **Astaanta** | **Sharraxaadda**                                                                                   |

|--------------|---------------------------------------------------------------------------------------------------|

| **ROWS**     | Waxay dejisaa tirada sadarada qoraalka ee muuqda hal mar.                                         |

| **COLS**     | Waxay dejisaa tirada xarfo ee uu isticmaalehu hal mar ku arki karo qadka dheer.                   |

Xarfo iyo sadarada badan ayaa lagu arki karaa mar kaliya, laakiin tiradooda kama horjoogsan karto isticmaaluhu inuu ku daro xog intaas ka badan.

---

 Tusaale Ku Saabsan Dropdown iyo Textarea  

Koodhkan wuxuu abuuraa dropdown menu iyo textarea control oo foom dalab ah:

```html

<BODY>

  <CENTER><B>Foomka Codsiga</B></CENTER>

  <FORM>

    <B>Dugsiga Sare: </B>

    <SELECT> 

      <OPTION SELECTED>Omar Samatar</OPTION>

      <OPTION>Imam Nawawi</OPTION>

      <OPTION>Hamdan</OPTION>

      <OPTION>Shafici</OPTION>

      <OPTION>Ibn Hajar</OPTION>

      <OPTION>Najah</OPTION>

      <OPTION>Al-Waha</OPTION>

      <OPTION>Qardho</OPTION>

      <OPTION>Baran</OPTION>

      <OPTION>Al-Furqan</OPTION>

    </SELECT><BR><BR>

    <B>Faallo Kale:</B><BR>

    <TEXTAREA ROWS="5" COLS="30">Macluumaad dheeraad ah...</TEXTAREA><BR><BR>

    <INPUT type="reset" value="Tirtir"> 

    <INPUT type="submit" value="Dir">

  </FORM>

</BODY>

```

 Natiijada Koodhka:

1. **Dropdown Menu**: Liis ka kooban magacyada dugsiyada sare oo isticmaaluhu hal doorasho ka sameyn karo.  

2. **Textarea**: Sanduuq weyn oo isticmaaluhu ku gelin karo qoraal dheer.  

3. **Badhanada**: Mid xogta tirtiraya iyo mid diraya xogta foomka.

Muhiimadda Foomamka HTML

Foomamku waa aalad muhiim ah oo isku xireysa isticmaalaha iyo server-ka, taasoo ka dhigaysa in macluumaadka la geliyo si fudud oo habaysan. Waxay yihiin xudunta codsiyada webka ee la falgala isticmaalaha, sida diiwaangelinta, soo-galitaanka, iyo xog-wadaagga.

waa ino iyo cashiirka danbe inasha Allah. waa hadii Alle idmo......................