HTML Mësimi 9 Përdorimi i Forms
Që të kuptoni mirë këtë tutorial juve do ju duhet të lexoni ato të mëparshmet që mund ti gjeni në krahun e djathtë të listuara.</p>
Si e thashë edhe më lartë, forms janë një element i HTML me anë të cilit ju mund të merrni inpute të ndryshëm nga lexuesit e faqes. Doni të dini mendimin e tyre mbi diçka, doni të dini çfarë i pëlqen më shumë? Forms ju vijnë në ndihmë. Forms kanë në HTML një ndërtim të tillë:</p>
<form> Gjerat e nevojshme </form>
Form ka elementë të ndryshëm që ndryshe quhen edhe Widget. Elementet e mundëshëm mund të jenë:</p>
Text Widget – Shërben për futjen e tekstit
Radio Button – midis shumë alternativave ne mund të zgjedhim vetëm një
Check Boxes – si të mësipërmet por këtu mund të zgjedhim më shumë se një alternativë
Submit Button – dërgon datat në server edhe programi kryen punën e kërkuar
Duke parë edhe funksionimin e Submit Button do të shihni që Form vepron në dy proçese:</p>
FrontEnd – ka të bëjë me datat që vendosim ne
BackEnd – ka të bëjë me veprimet e serverit kur dërgohen datat. Normalisht në këtë raste përdoren scripte të ndryshme që kryejnë gjënë e dëshiruar. Scriptet mund të jenë CGI, PERL, ASP apo edhe të tjera.
Tagu FORM mund të marri atributet e mëposhtëme:</p>
name – vendosim emrin e formës tonë sipas dëshirës
method – metoda e përdorur që mund të jetë GET ose POST (do flasim më poshtë më gjërë)
action – tregon vendndodhjen e scriptit që duam të përdorim
- Elementët e Form</p>
Më sipër përmendëm elementët e form e tani do ti marrim një nga një me shembuj konkret.</p>
Për përdorimin e Form ne duhet të përdorim Tagun INPUT.</p>
a – Text Fields</p>
Kemi të bëjmë në ato raste kur përdoruesi vendos një tekst, numër apo karakter tjetër në formën e krijuar. Një shembull i një kodi HTML është ky i mëposhtëmi.</p>
<form>
Emri:
<input type="text" name="emri" />
<br />
Mbiemri:
<input type="text" name="mbiemri" />
</form>
b – Radio Buttons</p>
Këtu duhet të kemi kujdes, sepse fjala qëndron jashtë tagut edhe që të krijojmë një grup fjalësh të përdorura për Radio Button duhet të kenë atributin name të njëjtë. Më poshtë një shembull konkret.</p>
<form>
<input type="radio" name="gjinia" value="mashkull" /> Mashkull
<br />
<input type="radio" name="gjinia" value="femer" />Femër
</form>
c – CheckBoxes</p>
Këtu mund të zgjedhim shumë alternativa. Si në rastin e mësipërm duhet të përdorni një atribut Value për ta identifikuar kutinë që zgjidhni. Gjithashtu është mirë që të përdorni të njëjtin emër për të kuptuar që ishin bashkë në formularin që përdorët.</p>
<form>
Unë kam flokë të zeza:
<input type="checkbox" name="paraqitja" value="floke" />
<br />
Unë kam sy jeshile:
<input type="checkbox" name="paraqitja" value="sy" />
<br />
Unë kam syze:
<input type="checkbox" name="paraqitja" value="syze" />
</form>
Në default kutitë nuk janë të selektuara. Nëse ju doni ta bëni këtë duhet të shtoni atributin checked=”checked”.</p>
d – Butoni Submit edhe action i form</p>
Si e thamë më lart butoni Submit shërbente për ti dërguar scriptit informacionet e vendosura në inputet e formës tonë. Se kujt script i dërgohen këto informacione përcaktohet me anë të atributit action tek tagu form. Më poshtë po marrim një shembull:</p>
<form name="input" action="scripti_juaj.cgi" method="get">
Fjalëkalimi:
<input type="text" name="fjalekalimi" />
<input type="submit" value="Dergo" /> <!-- Kjo krijon butonin -->
</form>
Më sipër ju përmenda dy metodat që mund të marrin atributi methot i tagut form. Ato janë pikërisht:</p>
get – me anë të kësaj metode në shfletuesin tonë do të shfaqen të gjitha informacione që kemi vendosur. Dmth krijohet një URL e gjat me informacionet tona. Kjo mund të shërbej për ruajtjen tek favoritet të formularit tonë të plotësuar
post – nuk krijohet gjë në shfletues si metoda e mësipërme
Nëse ne do duam që në vend të një butoni të thjeshtë të përdornim një imazh si buton atëher do të duhet të përdorim një kod si ky i mëposhtëmi:</p>
<input type="image" src="vendiButonit" value="emri butonit" />
Kur ne shtypim butonin Dërgo të gjithë të dhënat dërgohen në server edhe përpunohen nga scripti.</p>
e – TextArea</p>
Inputi text që përdorëm në pikën e parë pranon vetëm 20 karaktere. Nëse ne do duam të vendosim më shumë atëher do na duhet të krijojmë një textarea e cila përmban një numër të pakufizuar karakteresh. Një kod html për atë do të ishte:</p>
<textarea cols="30" rows="3" name="kuti">Teksti Default ketu</textarea>
Atributet e përdorura janë:</p>
name – përcakton emrin e këtij elementi
cols – përcakton gjerësinë e kutisë së krijuar
rows – përcakton gjatësin e kutisë së krijuar
Doni të shikoni të gjithë format në veprim? Klikoni Këtu për ti shikuar në shfletues.</p>
Doni të testoni njohuritë e marra në këtë mësim? Atëher provoni të bëni Quizin tonë:</p>
</p>
HTML Mësimi 9 – Përdorimi i Forms është një postim nga: Feniksi.Com - Thesari i Njohurive</p>
Per me shume artikuj te ngjashem vizitoni: http://www.feniksi.com/?p=885
Që të kuptoni mirë këtë tutorial juve do ju duhet të lexoni ato të mëparshmet që mund ti gjeni në krahun e djathtë të listuara.</p>
Si e thashë edhe më lartë, forms janë një element i HTML me anë të cilit ju mund të merrni inpute të ndryshëm nga lexuesit e faqes. Doni të dini mendimin e tyre mbi diçka, doni të dini çfarë i pëlqen më shumë? Forms ju vijnë në ndihmë. Forms kanë në HTML një ndërtim të tillë:</p>
<form> Gjerat e nevojshme </form>
Form ka elementë të ndryshëm që ndryshe quhen edhe Widget. Elementet e mundëshëm mund të jenë:</p>
Text Widget – Shërben për futjen e tekstit
Radio Button – midis shumë alternativave ne mund të zgjedhim vetëm një
Check Boxes – si të mësipërmet por këtu mund të zgjedhim më shumë se një alternativë
Submit Button – dërgon datat në server edhe programi kryen punën e kërkuar
Duke parë edhe funksionimin e Submit Button do të shihni që Form vepron në dy proçese:</p>
FrontEnd – ka të bëjë me datat që vendosim ne
BackEnd – ka të bëjë me veprimet e serverit kur dërgohen datat. Normalisht në këtë raste përdoren scripte të ndryshme që kryejnë gjënë e dëshiruar. Scriptet mund të jenë CGI, PERL, ASP apo edhe të tjera.
Tagu FORM mund të marri atributet e mëposhtëme:</p>
name – vendosim emrin e formës tonë sipas dëshirës
method – metoda e përdorur që mund të jetë GET ose POST (do flasim më poshtë më gjërë)
action – tregon vendndodhjen e scriptit që duam të përdorim
- Elementët e Form</p>
Më sipër përmendëm elementët e form e tani do ti marrim një nga një me shembuj konkret.</p>
Për përdorimin e Form ne duhet të përdorim Tagun INPUT.</p>
a – Text Fields</p>
Kemi të bëjmë në ato raste kur përdoruesi vendos një tekst, numër apo karakter tjetër në formën e krijuar. Një shembull i një kodi HTML është ky i mëposhtëmi.</p>
<form>
Emri:
<input type="text" name="emri" />
<br />
Mbiemri:
<input type="text" name="mbiemri" />
</form>
b – Radio Buttons</p>
Këtu duhet të kemi kujdes, sepse fjala qëndron jashtë tagut edhe që të krijojmë një grup fjalësh të përdorura për Radio Button duhet të kenë atributin name të njëjtë. Më poshtë një shembull konkret.</p>
<form>
<input type="radio" name="gjinia" value="mashkull" /> Mashkull
<br />
<input type="radio" name="gjinia" value="femer" />Femër
</form>
c – CheckBoxes</p>
Këtu mund të zgjedhim shumë alternativa. Si në rastin e mësipërm duhet të përdorni një atribut Value për ta identifikuar kutinë që zgjidhni. Gjithashtu është mirë që të përdorni të njëjtin emër për të kuptuar që ishin bashkë në formularin që përdorët.</p>
<form>
Unë kam flokë të zeza:
<input type="checkbox" name="paraqitja" value="floke" />
<br />
Unë kam sy jeshile:
<input type="checkbox" name="paraqitja" value="sy" />
<br />
Unë kam syze:
<input type="checkbox" name="paraqitja" value="syze" />
</form>
Në default kutitë nuk janë të selektuara. Nëse ju doni ta bëni këtë duhet të shtoni atributin checked=”checked”.</p>
d – Butoni Submit edhe action i form</p>
Si e thamë më lart butoni Submit shërbente për ti dërguar scriptit informacionet e vendosura në inputet e formës tonë. Se kujt script i dërgohen këto informacione përcaktohet me anë të atributit action tek tagu form. Më poshtë po marrim një shembull:</p>
<form name="input" action="scripti_juaj.cgi" method="get">
Fjalëkalimi:
<input type="text" name="fjalekalimi" />
<input type="submit" value="Dergo" /> <!-- Kjo krijon butonin -->
</form>
Më sipër ju përmenda dy metodat që mund të marrin atributi methot i tagut form. Ato janë pikërisht:</p>
get – me anë të kësaj metode në shfletuesin tonë do të shfaqen të gjitha informacione që kemi vendosur. Dmth krijohet një URL e gjat me informacionet tona. Kjo mund të shërbej për ruajtjen tek favoritet të formularit tonë të plotësuar
post – nuk krijohet gjë në shfletues si metoda e mësipërme
Nëse ne do duam që në vend të një butoni të thjeshtë të përdornim një imazh si buton atëher do të duhet të përdorim një kod si ky i mëposhtëmi:</p>
<input type="image" src="vendiButonit" value="emri butonit" />
Kur ne shtypim butonin Dërgo të gjithë të dhënat dërgohen në server edhe përpunohen nga scripti.</p>
e – TextArea</p>
Inputi text që përdorëm në pikën e parë pranon vetëm 20 karaktere. Nëse ne do duam të vendosim më shumë atëher do na duhet të krijojmë një textarea e cila përmban një numër të pakufizuar karakteresh. Një kod html për atë do të ishte:</p>
<textarea cols="30" rows="3" name="kuti">Teksti Default ketu</textarea>
Atributet e përdorura janë:</p>
name – përcakton emrin e këtij elementi
cols – përcakton gjerësinë e kutisë së krijuar
rows – përcakton gjatësin e kutisë së krijuar
Doni të shikoni të gjithë format në veprim? Klikoni Këtu për ti shikuar në shfletues.</p>
Doni të testoni njohuritë e marra në këtë mësim? Atëher provoni të bëni Quizin tonë:</p>
HTML Mësimi 9 – Përdorimi i Forms është një postim nga: Feniksi.Com - Thesari i Njohurive</p>
Per me shume artikuj te ngjashem vizitoni: http://www.feniksi.com/?p=885