Elements form buttons and option in Html

Hordhac

 Qaybaha sida buttons, dropdowns, iyo options waa waxyaabaha aasaaska u ah foomamka. Maqaalkan, waxaan ku eegi doonaa saddex qaybood oo muhiim ah oo loo isticmaalo foomamka HTML: <button>, <select>, iyo <option>.

1. Element-ka <button>

Elements form buttons and option in Html




Element-ka <button> wuxuu u oggolaanayaa isticmaaleyaasha inay sameeyaan falal marka ay gujiyaan badhanka. Badhamada waxaa lagu isticmaalaa xaalado kala duwan sida dirista xogta, soo gudbinta foomamka, ama xitaa bilaabista hawlo gaar ah.

Sifada Guud ee <button>
Element-ka <button> waxaa loo isticmaalaa in lagu abuuro badhanno ku jira foomamka ama meelo kale oo ka mid ah boggaaga. Waxa uu leeyahay astaamo kala duwan oo aad u adeegsan karto si aad u qeexdo nooca iyo shaqada badhanka.

Tusaale ahaan:

html

<button type="submit">Submit</button>
<button type="button">Click Me</button>

Noocyada type ee Badhanka:

• submit: Waxaa loo isticmaalaa inuu foomka u gudbiyo server-ka.
• button: Waa badhan caadi ah oo aan lahayn ficil la xiriiro haddii aadan ku darin JavaScript.
• reset: Waxaa loo isticmaalaa in uu dib u celiyo dhammaan xogta foomka.

Badhamada sidoo kale waa la habeyn karaa iyadoo la adeegsanayo CSS si ay u yeeshaan muuqaal u gaar ah.

2. Element-ka <select>

Element-ka <select> waxaa loo isticmaalaa in lagu abuuro liis dropdown ah oo leh xulashooyin badan oo isticmaaluhu ka dooran karo. Waxaa muhiim ah in loo isticmaalo marka aad rabto inaad siiso isticmaalaha doorashooyin kala duwan oo ay mid ka doortaan.

Sifada Guud ee <select>
Element-ka <select> wuxuu u baahan yahay gudaha <option> si loo abuuro doorashooyin (options).

Tusaale ahaan:

html

<select name="fruits" id="fruits">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

Xaaladdan, isticmaaluhu wuxuu ka dooran karaa saddex nooc oo miro ah: Apple, Banana, iyo Orange.

Astaamo muhiim ah oo <select> leeyahay:

• name: Magaca loo isticmaalo marka foomka la gudbiyo.
• id: Astaanta u gaar ah ee lagu aqoonsado liiska dropdown-ka.
• multiple: Waxaa kuu oggolaanaya inaad ka dhigi karto in isticmaaluhu ka doorto wax ka badan hal xulasho.

Tusaale: dropdown multiple ah:

html

<select name="fruits" id="fruits" multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

Isticmaaluhu wuxuu xulan karaa wax ka badan hal doorasho isagoo haysta furaha Ctrl (Windows) ama Cmd (Mac).

3. Element-ka <option>

Element-ka <option> waxaa loo isticmaalaa gudaha element-ka <select> si loo abuuro xulashooyin ay isticmaaluhu ka dooran karaan. Waxaad ku dari kartaa dhowr <option> ah oo ku jira <select>, waxaadna qeexi kartaa xogta ay xambaarsan yihiin.

Tusaale ahaan:

html

<select name="colors" id="colors">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

Doorashada value ee option-ka ayaa loo diri doonaa server-ka marka la gudbiyo foomka, iyadoo laga doortay liiska.

Astaamo muhiim ah oo <option> leeyahay:

• value: Qiimaha xulashada la soo xulan doono marka foomka la gudbiyo.
• selected: Waxaa loo isticmaalaa si loo doorto doorashada ka hor inta aan isticmaaluhu dooran.

Tusaale doorasho hore loo xulay:

html

<select name="colors" id="colors">
  <option value="red">Red</option>
  <option value="green" selected>Green</option>
  <option value="blue">Blue</option>
</select>

Xaaladdan, Green ayaa si toos ah loo xulanayaa marka liiska dropdown-ka la furo.

Isku Dhafka <button>, <select>, iyo <option>

Waxaa suuragal ah inaad isku darto qaybahan si aad u abuurto foom buuxa oo isticmaalaha la falgeli karo.

Tusaale:

html

<form action="/submit" method="POST">
  <label for="colors">Choose a color:</label>
  <select name="colors" id="colors">
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
  </select>
  
  <button type="submit">Submit</button>
</form>

Halkan, isticmaaluhu wuxuu dooran karaa midab ka dibna wuu diri karaa foomka iyadoo la isticmaalayo badhanka submit-ka.

Gunaanad

Element-yada <button>, <select>, iyo <option> waa qaybaha muhiimka ah ee foomamka HTML, kuwaas oo kuu oggolaanaya inaad la falgasho isticmaalaha. Badhanka <button> wuxuu bixiyaa xulashooyin hawleed, halka <select> iyo <option> ay bixiyaan doorashooyin kala duwan oo isticmaaluhu ka xulan karo. Isticmaalka saxda ah ee qaybahan waxay sare u qaadi karaan waayo-aragnimada isticmaaleha iyo foomamka boggaaga.