HTML: n oppiminen, osa 27: Kuinka tehdä yksinkertaisia lomakkeita HTML-muodossa
Olet varmasti perehtynyt termiin"Form". Lomake on sisällysluettelo, joka on yksi suosituimmista interaktiivisista esityksistä Internetissä. Tätä lomaketta tai tarkistusluetteloa käytetään tietojen pyytämiseen käyttäjiltä, jotka sitten käsitellään. Yleensä lomakkeiden käsittely suoritetaan palvelinpuolen skripteillä.
Tiettyihin tarkoituksiinvaatii verkkosivustolla olevien lomakkeiden, kuten kyselylomakkeiden, henkilötietojen, rekisteröintilomakkeiden, kirjautumislomakkeiden ja muiden käyttämistä. Lomakkeiden avulla käyttäjät voivat olla vuorovaikutuksessa tekstin, grafiikan tai muun selaimessa näkyvän muun kanssa. Selitän tässä keskustelussa lomakkeiden luomisesta HTML-muodossa. Tarkastellaan lisätietoja seuraavassa selityksessä:
Lomaketagi
<form> -tagi on tunniste, jota käytetäänmääritä muoto. Joten lomake muodostuu <muoto> ... .. </form> -tunnisteparista. <form> -tunnisteessa on kaksi attribuuttia, nimittäin menetelmä- ja toimintamääritteet, joilla on seuraavat toiminnot:
| ominaisuus | toiminto |
| menetelmä | Käytetään määrittämään, miten tiedot lähetetäänjonka käyttäjä syöttää verkkopalvelimelle (lomakkeen käsittelymenetelmä). Jos on olemassa kaksi menetelmää, nimittäin GET ja POST. POST-menetelmä lähettää kaikki tiedot URL-osoitteesta erillisessä muodossa. Samaan aikaan GET-menetelmä lähettää tietoja palvelimelle asettamalla sen URL-osoitteen loppuun. |
| toiminta | Käytetään lomakkeen käsittelyyn käytettävän tiedoston sijainnin tai URL-osoitteen määrittämiseen. |
Seuraava on esimerkki <form> -tunnisteen käytöstä:
<form action=”proses_input.php” method=”get”>
…………………………………
</form>Syöttötagi
<input> -tagi on tunniste, jota käytetäänluoda elementtejä, joita käytetään tietojen pyytämiseen käyttäjiltä, tai luoda tekstikenttään tarkoitettuja säätimiä, kuten valintaruudut, tekstiruudut, painikkeet, valintanapit ja muut. Tämän tunnisteen käyttö ei myöskään vaadi sulkevaa tunnistetta. Seuraavaksi <input> -tagilla on seuraavat yleiset määritteet:
| ominaisuus | toiminto |
| nimi | Määrittää syöttöelementin nimen. Sinun on kirjoitettava tämä ominaisuus kaikille elementeille, paitsi tyyppi tyhjennä ja lähetä elementit. |
| maxlength | Määrittää enimmäismäärän merkkejä, jotka voidaan syöttää syöttöelementtiin. |
| arvo | Ilmaisee syöttöelementin oletusarvon. Määritä tekstikenttiä varten kirjoitettu teksti. Valitse valintaruutujen tai radioiden valitun palvelimelle lähetettävän kohteen arvo. Samaan aikaan lähetys- ja nollauspainikkeissa tätä ominaisuutta käytetään määrittämään painikkeeseen kirjoitettu teksti. |
| koko | Määrittää syöttöelementin leveyden kuvapisteinä, joissa oletuskoko on 20 kuvapistettä. |
| tarkistettu | Käytetään vain valintaruuduissa ja radiotyypeissä valitun tai ilmoittamatta olevan kohteen ilmoittamiseen (Tarkistettujen ominaisuuksien selitys käsitellään seuraavassa materiaalissa). |
| tyyppi | Määritä käytettävän tulon tyyppi, kuten teksti, radio ja muut. |
Tietysti on muita ominaisuuksia, joita ei vielä ole mainittu edellä, koska yllä olevat ovat vain tavallisimpia ominaisuuksia. Tulevaisuudessa selitän tarkoittamiasi ominaisuuksia.
Attribuutin tyyppi = "teksti"
Yleensä siinä on useita tyyppejätype -attribuutti, mutta tässä materiaalissa keskustellaan tyyppimääritteestä, jolla on tekstin arvo tai tyyppi, kun taas muille tyypeille selitetään seuraavassa opetusohjelmassa. Tekstityyppiä käytetään tekstikenttien luomiseen, joiden avulla käyttäjät voivat syöttää tietoja tekstimuodossa.
Seuraava on esimerkki koodista <input> -tagin kirjoittamiseen ja käyttämiseen HTML: ssä:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Form di HTML</title>
</head>
<body>
<h4>Isilah formulir dibawah ini dengan baik dan benar ! </h4>
<hr>
<form action ="proses_input.php" method="get">
NIM : <input type="text" name="nim" size="11px" maxlength="9"> <br><br>
Alamat Rumah : <input type="text" name="alamat_rumah" size="40px"> <br><br>
Email : <input type="text" name="email"> <br><br>
No.Telepon : <input type="text" name="nomor_telepon"> <br><br>
<input type="submit" value="SUBMIT">
<input type="reset" value="RESET">
</form>
</body>
</html>Kun yllä oleva koodi on suoritettu selaimessa, se tulee näkyviin seuraavasti:
Yllä olevasta kuvasta näet eronkäytä jokaiselle tekstikentälle kokoominaisuutta, kokoja on 11px, 40px, eikä kokoa ole määritetty siten, että sen leveys on oletusarvo 20px. Ja myös "NIM" -tekstiruudussa, maksimipituusattribuutiksi on asetettu 9, kun taas toista tekstilaatikkoa ei ole asetettu, joten sillä on ääretön arvo.
Lisäksi kyselylomake ei ole vainkoostuu tekstiruudusta (tekstiruudusta), mutta myös lähetys- ja palautuspainikkeista. Lähetys- ja palautuspainikkeista keskustellaan seuraavassa materiaalissa. Jotkut materiaalit HTML-muodossa olevien yksinkertaisten lomakkeiden luomiseksi, toivottavasti ymmärrät tämän materiaalin hyvin.
