Foomamka HTML (Forms)

Foomamka HTML waxaa loo isticmaalaa in loogu ururiyo macluumaadka isticmaalaha. Waxay u oggolaadaan isticmaalayaasha inay geliyaan xogta sida qoraalka, doorashooyinka, faylasha, iwm., ka dibna xogtaas waxaa loo diri karaa server-ka si loo farsameeyo. Foomamka ayaa ah qayb muhiim ah oo ka mid ah bogagga shabakadda ee isdhexgalka ah, waxaana loo isticmaalaa waxyaabo badan sida foomamka xiriirka, foomamka galitaanka, foomamka raadinta, foomamka isdiiwaangelinta, iwm. HTML waxay bixisaa tags dhowr ah si loo abuuro loona qaabeeyo foomamka.

<form> - Abuurista Foomka

Tag-ga <form> waxaa loo isticmaalaa in lagu abuuro foom HTML ah. Tag-ga <form> wuxuu u dhaqmaa sidii weel walxaha foomka oo dhan. Tilmaamaha action iyo method ayaa ah tilmaamaha ugu muhiimsan ee tag-ga <form>.

• <form> (Form): Waxay qeexdaa weelka foomka HTML. Tilmaamaha action iyo method ayaa loo isticmaalaa in lagu qeexo sida xogta foomka loo dirayo iyo meesha loo dirayo.

Qaabka Guud:

HTML

<form action="meesha-wax-lagu-qabanayo" method="habka-dirista">
  <!- - Walxaha foomka (input, textarea, select, button, iwm.) waxay halkan ku jiraan - ->
</form>

Tilmaamaha Muhiimka ah ee <form>:

• action: Tilmaanta action waxay qeexdaa URL-ka meesha xogta foomka loo dirayo marka la gudbiyo. URL-kani wuxuu badanaa yahay fayl server-ka ah (sida fayl PHP, Python, Node.js, iwm.) oo farsameyn doona xogta foomka.
• method: Tilmaanta method waxay qeexdaa habka HTTP ee loo isticmaalayo marka la dirayo xogta foomka. Qiimaha caadiga ah waxaa ka mid ah:
  • get: Xogta foomka waxaa lagu soo daraa URL-ka (oo lagu muujiyaa cinwaanka browserka). GET waa in loo isticmaalo xogta aan xasaasiga ahayn (maadaama xogta lagu arki karo URL-ka) oo xaddidan cabbir ahaan.
  • post: Xogta foomka waxaa lagu diraa jirka HTTP request-ka (lama muujiyo cinwaanka browserka). POST waxaa loo isticmaalaa xogta xasaasiga ah (sida erayga sirta ah) oo aan lahayn xaddidaad cabbir. POST ayaa badanaa la doorbidaa foomamka.

Tusaale <form>:

HTML

<form action="/farsamee-foomka.php" method="post">
  <!- - Walxaha foomka waxay halkan ku jiraan - ->
</form>

Sharaxaadda:

• Tag-ga <form> wuxuu abuuraa foom.
• action="/farsamee-foomka.php" waxay qeexaysaa in xogta foomka loo diri doono faylka "farsamee-foomka.php" ee server-ka.
• method="post" waxay qeexaysaa in habka POST loo isticmaali doono marka la dirayo xogta foomka.

<input>, <textarea>, <select>, <option>, <button> - Walxaha Foomka

HTML waxay bixisaa tags dhowr ah si loo abuuro walxaha foomka (form elements) oo u oggolaanaya isticmaalayaasha inay geliyaan xogta. Walxaha foomka waxaa lagu dhex qoraa tag-ga <form>. Walxaha foomka ee ugu caansan waxaa ka mid ah:

<input> - Gelinta Isticmaalaha

• <input> (Input): Waxaa loo isticmaalaa noocyada gelinta ee ugu badan. Tag-ga <input> wuxuu noqon karaa noocyo badan oo kala duwan iyadoo ku xiran qiimaha tilmaanta type.

Tilmaamaha Muhiimka ah ee <input>:

• type: Tilmaanta type ayaa loo baahan yahay tag-ga <input> kasta. Waxay qeexdaa nooca gelinta la muujinayo. Noocyada gelinta ee caanka ah waxaa ka mid ah: text, password, radio, checkbox, submit, button, email, number, date, file, iwm. (waxaa lagu dabooli doonaa si faahfaahsan qaybta "Noocyada Gelinta").
• name: Tilmaanta name ayaa lagu talinayaa tag-ga <input> kasta. Waxay qeexdaa magaca walaxda gelinta. Magaca waxaa loo isticmaalaa in lagu aqoonsado walaxda gelinta marka xogta foomka loo diro server-ka.
• id: Tilmaanta id ayaa lagu talinayaa tag-ga <input> kasta. Waxay qeexdaa aqoonsi gaar ah oo walaxda gelinta ah. id waxaa loo isticmaalaa in lagu qaabeeyo walaxda CSS ama lagu helo JavaScript.
• value: Tilmaanta value waxay qeexdaa qiimaha caadiga ah ee walaxda gelinta. Qiimaha waxaa la muujiyaa marka bogga la furo, isticmaaluhuna wuu beddeli karaa. Noocyada gelinta qaarkood (sida radio iyo checkbox) tilmaanta value ayaa loo baahan yahay si loo qeexo qiimaha la dirayo marka la xusho.
• placeholder: Tilmaanta placeholder waxay qeexdaa qoraal tilmaameed ah oo ku jira walaxda gelinta. Qoraalka tilmaameedka wuu baaba'aa marka isticmaaluhu bilaabo qorista.
• required: Tilmaanta required waxay qeexdaa in walaxda gelinta ay tahay mid loo baahan yahay. Foomka lama gudbin karo haddii walaxda loo baahan yahay aan la buuxin.
• disabled: Tilmaanta disabled waxay damiisaa walaxda gelinta. Walaxda damiisan lama gujin karo ama lama beddeli karo, qiimaheedana lama dirayo marka foomka la gudbiyo.

Tusaale <input>:

HTML

<form action="/farsamee-foomka.php" method="post">
  <label for="magaca">Magaca:</label><br>
  <input type="text" id="magaca" name="magaca" placeholder="Geli magacaaga" required><br><br>

  <label for="emailka">E-mailka:</label><br>
  <input type="email" id="emailka" name="emailka" placeholder="Geli e-mailkaaga" disabled><br><br>

  <input type="submit" value="Gudbi">
</form>

<textarea> - Gelinta Qoraalka Badan

• <textarea> (Text Area): Waxaa loo isticmaalaa gelinta qoraalka badan. Waxay u oggolaataa isticmaalayaasha inay geliyaan qoraal badan oo xariiqyo badan ah.

Tilmaamaha Muhiimka ah ee <textarea>:

• name: Tilmaanta name ayaa lagu talinayaa tag-ga <textarea> kasta. Waxay qeexdaa magaca walaxda textarea.
• id: Tilmaanta id ayaa lagu talinayaa tag-ga <textarea> kasta. Waxay qeexdaa aqoonsi gaar ah oo walaxda textarea ah.
• rows: Tilmaanta rows waxay qeexdaa tirada xariiqyada muuqda ee textarea.
• cols: Tilmaanta cols waxay qeexdaa ballaca textarea xarfaha.
• placeholder: Tilmaanta placeholder waxay qeexdaa qoraal tilmaameed ah oo ku jira textarea.
• required: Tilmaanta required waxay qeexdaa in textarea ay tahay mid loo baahan yahay.
• disabled: Tilmaanta disabled waxay damiisaa textarea.

Tusaale <textarea>:

HTML

<form action="/farsamee-foomka.php" method="post">
  <label for="fariinta">Fariinta:</label><br>
  <textarea id="fariinta" name="fariinta" rows="5" cols="30" placeholder="Geli fariintaada" required></textarea><br><br>

  <input type="submit" value="Gudbi">
</form>

<select> iyo <option> - Liisaska Hoosta-u-dhaca

• <select> (Select): Waxaa loo isticmaalaa in lagu abuuro liis hoosta-u-dhaca (dropdown list). Waxay u oggolaataa isticmaalayaasha inay ka doortaan hal doorasho liis doorashooyin ah.
• <option> (Option): Waxay qeexdaa doorasho kasta oo ku jirta liiska hoosta-u-dhaca. Tags-ka <option> waa inay ku jiraan tag-ga <select>.

Tilmaamaha Muhiimka ah ee <select>:

• name: Tilmaanta name ayaa loo baahan yahay tag-ga <select> kasta. Waxay qeexdaa magaca walaxda select.
• id: Tilmaanta id ayaa lagu talinayaa tag-ga <select> kasta. Waxay qeexdaa aqoonsi gaar ah oo walaxda select ah.
• required: Tilmaanta required waxay qeexdaa in select ay tahay mid loo baahan yahay.
• disabled: Tilmaanta disabled waxay damiisaa select.

Tilmaamaha Muhiimka ah ee <option>:

• value: Tilmaanta value ayaa loo baahan yahay tag-ga <option> kasta. Waxay qeexdaa qiimaha doorashada la dirayo marka la xusho.
• selected: Tilmaanta selected waxay qeexdaa in doorashada ay tahay mid la xushay caadi ahaan. Doorashada la xushay caadi ahaan ayaa marka hore la muujiyaa liiska hoosta-u-dhaca.
• disabled: Tilmaanta disabled waxay damiisaa doorashada. Doorashada damiisan lama xulan karo.

Tusaale <select> iyo <option>:

HTML

<form action="/farsamee-foomka.php" method="post">
  <label for="dalka">Dalka:</label><br>
  <select id="dalka" name="dalka" required>
    <option value="">Dooro dal</option>
    <option value="USA">Mareykanka</option>
    <option value="Canada">Kanada</option>
    <option value="UK" selected>Boqortooyada Midowday</option>
    <option value="Australia" disabled>Australia (lama heli karo)</option>
  </select><br><br>

  <input type="submit" value="Gudbi">
</form>

<button> - Badhamada

• <button> (Button): Waxaa loo isticmaalaa in lagu abuuro badhamada gujis ah foomka. Badhamada waxaa loo isticmaali karaa gudbinta foomka, dib u dejinta foomka, ama fulinta hawlo kale oo dhanka macmiilka ah (iyadoo la isticmaalayo JavaScript).

Tilmaamaha Muhiimka ah ee <button>:

• type: Tilmaanta type waxay qeexdaa nooca badhanka. Qiimaha caadiga ah waxaa ka mid ah:
  • submit: Badhanka wuxuu gudbiyaa foomka. Tani waa qiimaha caadiga ah haddii type aan la qeexin.
  • reset: Badhanka wuxuu dib u dejinayaa foomka qiimayaashii caadiga ahaa.
  • button: Badhanka ma qabto wax caadi ah. Waxaa badanaa loo isticmaalaa in lagu fuliyo hawlo dhanka macmiilka ah iyadoo la isticmaalayo JavaScript.
• name: Tilmaanta name ayaa lagu talinayaa tag-ga <button> kasta. Waxay qeexdaa magaca badhanka.
• id: Tilmaanta id ayaa lagu talinayaa tag-ga <button> kasta. Waxay qeexdaa aqoonsi gaar ah oo badhanka ah.
• value: Tilmaanta value waxay qeexdaa qiimaha badhanka. Qiimaha waxaa la dirayaa server-ka marka foomka la gudbiyo.
• disabled: Tilmaanta disabled waxay damiisaa badhanka.

Tusaale <button>:

HTML

<form action="/farsamee-foomka.php" method="post">
  <label for="magaca">Magaca:</label><br>
  <input type="text" id="magaca" name="magaca" placeholder="Geli magacaaga" required><br><br>

  <button type="submit">Gudbi</button>
  <button type="reset">Dib u Deji</button>
  <button type="button" onclick="alert('Badhan caadi ah!')">Badhan Caadi ah</button>
</form>

Ogow: Tag-ga <input type="submit"> sidoo kale waxaa loo isticmaali karaa in lagu abuuro badhanka gudbinta. Si kastaba ha ahaatee, tag-ga <button> wuxuu bixiyaa dabacsanaan badan, maadaama aad ku dari karto waxyaabo HTML ah (sida sawirrada ama icons) gudaha badhanka.

Noocyada Gelinta ee Caanka ah (type Attribute)

Tilmaanta type ee tag-ga <input> waxay qeexdaa nooca gelinta la muujinayo. Halkan waxaa ah noocyada gelinta ee caanka ah:

• type="text": Waxay abuuraa goob qoraal oo hal xariiq ah oo loogu talagalay gelinta qoraalka caadiga ah (tusaale, magaca, cinwaanka, iwm.).

  HTML

  <input type="text" id="magaca" name="magaca" placeholder="Geli magacaaga">
  

• type="password": Waxay abuuraa goob qoraal oo sir ah oo loogu talagalay gelinta erayga sirta ah. Qoraalka la geliyay waxaa lagu qariyaa dhibco ama asterisks.

  HTML

  <input type="password" id="erayga-sirta-ah" name="erayga-sirta-ah" placeholder="Geli erayga sirta ah">
  

• type="radio": Waxay abuuraa badhamo raadiyo (radio buttons). Badhamada raadiyaha waxaa loo isticmaalaa in isticmaalayaasha ay ka doortaan hal doorasho koox doorashooyin ah. Badhamada raadiyaha ee isku koox ah waa inay lahaadaan isku magac (name attribute).

  HTML

  <input type="radio" id="lab" name="jinsiga" value="lab">
  <label for="lab">Lab</label><br>
  <input type="radio" id="dheddig" name="jinsiga" value="dheddig">
  <label for="dheddig">Dheddig</label><br>
  <input type="radio" id="kale" name="jinsiga" value="kale">
  <label for="kale">Kale</label>
  

• type="checkbox": Waxay abuuraa sanduuqyo jeeg (checkboxes). Sanduuqyada jeegga waxaa loo isticmaalaa in isticmaalayaasha ay doortaan mid ama in ka badan oo doorashooyin ah koox doorashooyin ah. Sanduuqyada jeegga ee isku koox ah badanaa ma laha magac isku mid ah, laakiin waxaa caado ah in la isticmaalo magac isku mid ah si loo fududeeyo farsamaynta xogta.

  HTML

  <input type="checkbox" id="baaskiil" name="hiwaayadaha" value="baaskiil">
  <label for="baaskiil">Baaskiil wadista</label><br>
  <input type="checkbox" id="dabaal" name="hiwaayadaha" value="dabaal">
  <label for="dabaal">Dabaasha</label><br>
  <input type="checkbox" id="socod" name="hiwaayadaha" value="socod">
  <label for="socod">Socodka</label>
  

• type="submit": Waxay abuuraa badhanka gudbinta. Marka la gujiyo, badhanka gudbinta wuxuu gudbiyaa foomka URL-ka lagu qeexay tilmaanta action ee tag-ga <form>.

  HTML

  <input type="submit" value="Gudbi">
  

• type="reset": Waxay abuuraa badhanka dib u dejinta. Marka la gujiyo, badhanka dib u dejinta wuxuu dib u dejinayaa foomka qiimayaashii caadiga ahaa.

  HTML

  <input type="reset" value="Dib u Deji">
  

• type="button": Waxay abuuraa badhan caadi ah. Badhanka caadiga ah ma qabto wax caadi ah. Waxaa badanaa loo isticmaalaa in lagu fuliyo hawlo dhanka macmiilka ah iyadoo la isticmaalayo JavaScript.

  HTML

  <input type="button" value="Badhan Caadi ah" onclick="alert('Badhan caadi ah la gujiyay!')">
  

• type="email": Waxay abuuraa goob qoraal oo e-mail ah. Browserku wuxuu si toos ah u xaqiijin karaa in xogta la geliyay ay tahay cinwaan e-mail oo sax ah.

  HTML

  <input type="email" id="emailka" name="emailka" placeholder="Geli e-mailkaaga">
  

• type="number": Waxay abuuraa goob qoraal oo nambar ah. Browserku wuxuu si toos ah u xaqiijin karaa in xogta la geliyay ay tahay nambar. Waxaad xakameyn kartaa xaddidaadaha nambarada iyadoo la isticmaalayo tilmaamaha min, max, iyo step.

  HTML

  <input type="number" id="da'da" name="da'da" min="0" max="120" placeholder="Geli da'daada">
  

• type="date": Waxay abuuraa doorasho taariikhda. Browserku wuxuu bixiyaa doorasho taariikhda oo muuqaal ah oo u oggolaanaysa isticmaalayaasha inay si fudud u doortaan taariikh.

  HTML

  <label for="dhalashada">Taariikhda Dhalashada:</label>
  <input type="date" id="dhalashada" name="dhalashada">
  

• type="file": Waxay abuuraa goob faylka lagu soo geliyaa. Waxay u oggolaataa isticmaalayaasha inay faylasha ka soo geliyaan qalabkooda oo ay u diraan server-ka.

  HTML

  <label for="faylka">Soo geli faylka:</label>
  <input type="file" id="faylka" name="faylka">
  

Waxaa jira noocyo kale oo badan oo gelinta ah oo HTML ah, laakiin kuwa kor ku xusan ayaa ah kuwa ugu caansan oo badanaa la isticmaalo.

Gabagabo

Foomamka HTML waa qalab aad u muhiim ah oo loogu talagalay ururinta macluumaadka isticmaalaha bogagga shabakadda. Isticmaalka tag-ga <form> iyo walxaha foomka sida <input>, <textarea>, <select>, <option>, iyo <button> si sax ah waxay kuu oggolaanayaan inaad abuurtid foomam isdhexgal ah oo wax ku ool ah oo u oggolaanaya isticmaalayaashaada inay la falgalaan bogaggaaga shabakadda. Fahamka noocyada gelinta ee kala duwan iyo goorta la isticmaalo mid kasta ayaa muhiim u ah abuurista khibrad isticmaale oo wanaagsan iyo ururinta xogta lagama maarmaanka ah.