HTML form ni sehemu muhimu ya ukuzaji wa wavuti ambayo inaruhusu watumiaji kuingiliana na tovuti na kuwasilisha data kwa seva. Form hutumika kwa madhumuni mbalimbali, kama vile kukusanya mtumiaji form, kuchakata ingizo la mtumiaji, na kuwezesha vitendo vya mtumiaji kwenye tovuti. Katika makala haya, tutachunguza sifa na aina tofauti za sehemu za ingizo, chagua vipengele, maeneo ya maandishi, na vitufe vinavyotumiwa sana katika HTML form.
Sehemu za Kuingiza
<input type="text">: Huunda sehemu ya uingizaji maandishi ambapo watumiaji wanaweza kuingiza herufi na nambari.<input type="password">: Huonyesha sehemu ya kuingiza nenosiri ambayo hufunika herufi zilizoingizwa.<input type="email">: Hutoa uthibitishaji wa barua pepe kwa sehemu za ingizo zinazohitaji anwani halali ya barua pepe.<input type="number">: Huzuia ingizo kwa nambari za nambari pekee.<input type="checkbox">: Inawakilisha kisanduku cha kuteua ambacho watumiaji wanaweza kuchagua au kuacha kuchagua.<input type="radio">: Inawakilisha kitufe cha redio kinachoruhusu watumiaji kuchagua chaguo moja kutoka kwa kikundi cha chaguo.<input type="file">: Huwawezesha watumiaji kuchagua na kupakia faili.<input type="submit">: Huonyesha kitufe kinachowasilisha form unapobofya.<input type="reset">: Huonyesha kitufe ambacho huweka upya form hali yake ya awali.<input type="date">: Hutoa kiteua tarehe cha kuchagua tarehe.<input type="time">: Huruhusu watumiaji kuingiza thamani za saa.
Chagua Vipengele
<select>: Huunda menyu kunjuzi yenye chaguo zinazoweza kuchaguliwa.<option>: Inafafanua chaguo ndani ya menyu kunjuzi, iliyowekwa ndani ya<select>lebo.<optgroup>: Chaguo zinazohusiana na vikundi pamoja ndani ya menyu kunjuzi.<select multiple>: Huruhusu watumiaji kuchagua chaguo nyingi kwa wakati mmoja kwa kushikilia kitufe cha Ctrl(au kitufe cha Amri kwenye Mac) huku wakibofya.
Sehemu za maandishi
<textarea>: Huunda uga wa uingizaji maandishi wa laini nyingi ambapo watumiaji wanaweza kuingiza na kuhariri maandishi marefu zaidi. Inaweza kubadilishwa ukubwa na kusanidiwa kwa sifa kama vile rows na cols kufafanua vipimo vyake.
Vifungo
<button>: Inawakilisha kitufe ambacho kinaweza kusababisha vitendo mbalimbali ndani ya form. Inaweza kutumika kuwasilisha form, kulingana na form chaguo la kukokotoa la JavaScript, au kuelekeza kwenye ukurasa tofauti.
Mfano wa matumizi:
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<label for="newsletter">Subscribe to Newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="color">Favorite Color:</label>
<select id="color" name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<button type="submit">Submit</button>
</form>
Mfano huu unaonyesha matumizi ya form vipengele mbalimbali, ikiwa ni pamoja na input sehemu, textarea, checkbox, select dropdown na submit kitufe. Jisikie huru kubinafsisha form vipengele na sifa kulingana na mahitaji yako mahususi.