JavaScriptin ja lomakkeiden käyttö

Javascript käyttää monia hattuja. Voit luoda erikoistehosteita JavaScriptin avulla. Voit tehdä HTML-sivuistasi "älykkäämpiä" käyttämällä JavaScriptiä hyödyntämällä sen päätöksentekomahdollisuuksia. Ja voit käyttää HTML-koodia HTML-lomakkeiden parantamiseen. Tämä viimeinen sovellus on erityisen tärkeä. Kaikista hattuista, joita JavaScript voi käyttää, sen muodonkäsittelyominaisuudet ovat haetuimpia ja käytetyimpiä.

Mikään ei aiheuta enemmän pelkoa verkkojulkaisijan sydämessä kuin nämä kolme kirjainta: C-G-I. CGI (joka tarkoittaa yhteistä yhdyskäytävärajapintaa) on mekanismi tietojen turvalliseen siirtämiseen asiakkaasta (selaimesta) palvelimelle. Sitä käytetään tyypillisesti tietojen siirtämiseen HTML-lomakkeesta palvelimelle.

JavaScriptin avulla voit käsitellä yksinkertaisia ​​lomakkeita palvelinta käyttämättä. Ja kun lomakkeen lähettäminen CGI-ohjelmaan on välttämätöntä, voit pyytää JavaScriptiä huolehtimaan kaikista alustavista vaatimuksista, kuten validoimalla syötteen sen varmistamiseksi, että käyttäjä on pistettänyt jokaisen i: n. Tässä sarakkeessa tarkastelemme tarkasti JavaScript-lomakeyhteyttä, mukaan lukien kuinka käyttää JavaScriptiä lomakeobjektia, kuinka lukea ja asettaa lomakkeen sisältöä ja miten käynnistää JavaScript-tapahtumat manipuloimalla lomakeohjaimia. Käsittelemme myös, kuinka JavaScriptiä käytetään lomakkeen syötteen vahvistamiseen ja lomakkeen lähettämiseen CGI-ohjelmaan.

JavaScriptin oppiminen

Tämä artikkeli on osa JavaWorldin teknistä sisältöarkistoa. Voit oppia paljon JavaScript-ohjelmoinnista lukemalla artikkeleita JavaScript-sarja, muista vain, että osa tiedoista on todennäköisesti vanhentuneita. Katso lisätietoja JavaScript-ohjelmoinnista kohdista "JavaScriptin sisäisten objektien käyttö" ja "JavaScript-ohjelmien virheenkorjaus".

Lomakkeen luominen

Suoran HTML-lomakkeen ja JavaScript-parannetun lomakkeen välillä on vain vähän eroja. Tärkein on, että JavaScript-lomake perustuu yhteen tai useampaan tapahtumankäsittelijään, kuten onClick tai onSubmit. Nämä kutsuvat JavaScript-toimintoa, kun käyttäjä tekee jotain lomakkeessa, kuten napsauttaa painiketta. Tapahtumankäsittelijät, jotka on sijoitettu HTML-lomaketunnisteiden muiden attribuuttien kanssa, ovat näkymättömiä selaimelle, joka ei tue JavaScriptiä. Tämän ominaisuuden takia voit usein käyttää yhtä lomaketta sekä JavaScript- että ei-JavaScript-selaimille.

Tyypilliset lomakkeen hallintaobjektit - joita kutsutaan myös "widgeteiksi" - sisältävät seuraavat:

• Tekstiruutu tekstirivin syöttämistä varten
• Paina painiketta toiminnon valitsemiseksi
• Radiopainikkeet yhden valinnan tekemiseen vaihtoehtoryhmästä
• Valintaruudut yksittäisen, riippumattoman vaihtoehdon valitsemiseksi tai poistamiseksi

En vaivaudu luetelemaan näiden ohjausobjektien (widgetien) kaikkia määritteitä ja niiden käyttöä HTML-muodossa. Useimmat HTML-viitteet tarjoavat sinulle yksityiskohdat. Jos haluat käyttää JavaScriptiä, muista aina antaa nimi itse lomakkeelle ja jokaiselle käyttämällesi ohjaimelle. Nimet antavat sinun viitata objektiin JavaScript-parannetulla sivulla.

Tyypillinen muoto näyttää tältä. Huomaa, että olen antanut NAME = määritteet kaikille lomakkeen ohjausobjekteille, mukaan lukien lomake itse:

 Kirjoita jotain ruutuun:

• Lomakkeen nimi = "myform" määrittelee ja nimeää lomakkeen. Muualla JavaScriptissä voit viitata tähän lomakkeeseen nimellä myform. Lomakkeelle antamasi nimi on sinun tehtäväsi, mutta sen on oltava JavaScriptin vakiomuuttujien / funktioiden nimeämissääntöjen mukainen (ei välilyöntejä, ei outoja merkkejä paitsi alaviiva jne.).
• ACTION = "" määrittää, kuinka haluat selaimen käsittelevän lomaketta, kun se lähetetään palvelimessa toimivaan CGI-ohjelmaan. Koska tätä esimerkkiä ei ole suunniteltu lähettämään mitään, CGI-ohjelman URL-osoite jätetään pois.
• MENETELMÄ = "SAA" määrittelee menetelmän tiedot, jotka välitetään palvelimelle, kun lomake lähetetään. Tällöin osallistuja on pöyhkeä, koska esimerkkilomake ei lähetä mitään.
• INPUT TYPE = "teksti" määrittää tekstiruutuobjektin. Tämä on tavallinen HTML-merkintä.
• INPUT TYPE = "painike" määrittää painikeobjektin. Tämä on tavallinen HTML-merkintä paitsi onClick-käsittelijä.
• onClick = "testResults (this.form)" on tapahtumankäsittelijä - se hoitaa tapahtuman, tässä tapauksessa napsauttamalla painiketta. Kun painiketta napsautetaan, JavaScript suorittaa lausekkeen lainausmerkeissä. Lauseke sanoo kutsuvan testResults-funktion muualla sivulla ja välittämään sille nykyisen lomakeobjektin.

Arvon saaminen lomake-objektista

Kokeillaan arvojen hankkimista muoto-objekteista. Lataa sivu ja kirjoita sitten jotain tekstiruutuun. Napsauta painiketta, ja kirjoittamasi tiedot näkyvät hälytysruudussa.

Luettelo 1. testform.html

  Test Input -funktio testResults (lomake) {var TestVar = form.inputbox.value; hälytys ("Kirjoitit:" + TestVar); } Kirjoita ruutuun jotain:

Näin komentosarja toimii. JavaScript kutsuu testResults-funktiota, kun napsautat lomakkeessa olevaa painiketta. TestResults-funktio välittää lomakeobjektin käyttämällä syntaksia this.form (tämä avainsana viittaa painikeohjaimeen; lomake on painikeohjaimen ominaisuus ja edustaa lomakeobjektia). Olen antanut muotoobjektille nimen muodossa sisällä testResult-funktiota, mutta voit valita haluamasi nimen.

TestResults-toiminto on yksinkertainen - se vain kopioi tekstiruudun sisällön muuttujaksi nimeltä TestVar. Huomaa, miten tekstiruudun sisältöön viitattiin. Määritin haluamasi muotoobjektin (kutsutaan muodossa), objekti haluamassani muodossa (kutsutaan syöttölaatikko), ja haluamasi kohteen omaisuuden ( arvo omaisuus).

Lisää JavaWorldista

Haluatko lisää ohjelmointioppaita ja uutisia? Hanki JavaWorld Enterprise Java -uutiskirje postilaatikkoosi.

Arvon asettaminen lomakeobjektille

Syöttölaatikon arvo-ominaisuus, joka on esitetty yllä olevassa esimerkissä, on sekä luettavissa että kirjoitettavissa. Toisin sanoen voit lukea mitä kirjoitetaan ruutuun, ja voit kirjoittaa tietoja takaisin siihen. Lomakeobjektin arvon asettaminen on päinvastoin kuin sen lukeminen. Tässä on lyhyt esimerkki arvon asettamisesta lomakkeen tekstiruudussa. Prosessi on samanlainen kuin edellinen esimerkki, paitsi että tällä kertaa on kaksi painiketta. Napsauta "Lue" -painiketta ja komentosarja lukee tekstiruutuun kirjoittamasi. Napsauta "Kirjoita" -painiketta ja komentosarja kirjoittaa erityisen räikeän lauseen tekstikenttään.

Listaus 2. set_formval.html

  Testitulofunktio readText (lomake) {TestVar = form.inputbox.value; hälytys ("Kirjoitit:" + TestVar); } 
function writeText (lomake) {form.inputbox.value = "Hyvää päivää!" } Kirjoita ruutuun jotain:

• Kun napsautat "Lue" -painiketta, JavaScript kutsuu readText-toiminnon, joka lukee ja näyttää tekstiruutuun kirjoittamasi arvon.
• Kun napsautat Kirjoita-painiketta, JavaScript kutsuu writeText-toiminnon, joka kirjoittaa "Hyvää päivää!" tekstikenttään.

Muiden lomakekohteiden arvojen lukeminen

Tekstikenttä on ehkä yleisin lomake, jonka luet (tai kirjoitat) JavaScriptin avulla. Voit kuitenkin käyttää JavaScriptiä lukemaan ja kirjoittamaan arvoja useimmista muista objekteista (huomaa, että Javascriptia ei tällä hetkellä voida käyttää tietojen lukemiseen tai kirjoittamiseen salasanan tekstiruudun avulla). Tekstiruutujen lisäksi JavaScriptiä voidaan käyttää seuraavien kanssa:

• Piilotettu tekstiruutu (TYPE = "piilotettu").
• Valintanappi (TYPE = "radio")
• Valintaruutu (TYPE = "valintaruutu")
• Tekstialue ()
• Luettelot ()

Piilotettujen tekstiruutujen käyttäminen

JavaScript-näkökulmasta piilotetut tekstiruudut käyttäytyvät aivan kuten tavalliset tekstiruudut, ja niiden ominaisuudet ja menetelmät ovat samat. Käyttäjän kannalta piilotettuja tekstiruutuja "ei ole", koska niitä ei näy muodossa. Pikemminkin piilotetut tekstiruudut ovat keino, jolla erityistietoja voidaan siirtää palvelimen ja asiakkaan välillä. Niitä voidaan käyttää myös väliaikaisten tietojen säilyttämiseen, joita haluat ehkä käyttää myöhemmin. Koska piilotettuja tekstiruutuja käytetään kuten tavallisia tekstiruutuja, erillistä esimerkkiä ei anneta tässä.

Radiopainikkeiden käyttäminen

Radiopainikkeita käytetään, jotta käyttäjä voi valita yhden ja vain yhden kohteen vaihtoehtoryhmästä. Radiopainikkeita käytetään aina kerrannaisina; ei ole loogista merkitystä sillä, että lomakkeessa on vain yksi valintanappi, koska kun napsautat sitä, et voi poistaa sitä. Jos haluat yksinkertaisen napsautuksen / poistamisen vaihtoehdon, käytä sen sijaan valintaruutua (katso alla).

Määritä JavaScript-valintanapit antamalla jokaiselle objektille sama nimi. JavaScript luo taulukon käyttämällä antamaasi nimeä; viittaat sitten painikkeisiin taulukkoindekseillä. Sarjan ensimmäinen painike on numeroitu 0, toinen on numeroitu 1 ja niin edelleen. Huomaa, että VALUE-attribuutti on valinnainen vain JavaScriptiä käyttäville lomakkeille. Haluat antaa arvon, jos lähetät lomakkeen palvelimessa käynnissä olevalle CGI-ohjelmalle.

Seuraava on esimerkki valitun painikkeen testaamisesta. TestButton-toiminnon for-silmukka selaa kaikkia "rad" -ryhmän painikkeita. Kun se löytää valitun painikkeen, se irtoaa silmukasta ja näyttää painikkeen numeron (muista: alkaen 0).

Vastaava 3. form_radio.html

  Radiopainikkeen testitoiminnon testiButton (lomake) {(laskea = 0; laskea <3; laskea ++) {if (lomake.rad [laskuri] .tarkistettu) -katko; } hälytys ("Button" + Count + "on valittu"); }

Valintanapin valinnan asettaminen HTML-markkinoilla on helppoa. Jos haluat lomakkeen näkyvän alun perin tietyn valintanapin ollessa valittuna, lisää TARKISTETTU-attribuutti kyseisen painikkeen HTML-merkintään:

Voit myös asettaa painikkeen valinnan ohjelmallisesti JavaScriptillä käyttämällä valittua ominaisuutta. Määritä tarkistettavan valintanappiryhmän hakemisto.

muoto.rad [0] .tarkastettu = tosi; // asettaa rad-ryhmän ensimmäisen painikkeen

Valintaruutujen käyttäminen

Valintaruudut ovat erillisiä elementtejä; eli ne eivät ole vuorovaikutuksessa naapurielementtien kanssa, kuten radiopainikkeet. Siksi niitä on vähän helpompi käyttää. JavaScriptin avulla voit testata, onko valintaruutu valittu tarkistetulla ominaisuudella, kuten tässä näytetään. Samoin voit asettaa valitun ominaisuuden lisäämään tai poistamaan valintamerkin valintaruudusta. Tässä esimerkissä hälytysviesti kertoo, onko ensimmäinen valintaruutu valittuna. Arvo on tosi, jos ruutu on valittu; väärä, jos se ei ole.

Listaus 4. form_check.html

  Valintaruutu Test function testButton (lomake) {alert (form.check1.checked); }
Valintaruutu 1
Valintaruutu 2
Valintaruutu 3

Kuten radiopainikeobjektin kohdalla, lisää TARKISTETTU -määritelmä sen HTML-merkinnän valintaruutuun, jonka haluat tarkistaa ensin, kun lomake ladataan ensimmäisen kerran.

Valintaruutu 1>

Voit myös asettaa painikkeen valinnan ohjelmallisesti JavaScriptiä käyttämällä valittua ominaisuutta. Määritä tarkistettavan valintaruudun nimi kuten kohdassa

form.check1.checked = true;

Tekstialueiden käyttäminen

Tekstialueita käytetään moniriviseen tekstinsyöttöön. Tekstiruudun oletuskoko on 1 rivi 20 merkkiä. Voit muuttaa kokoa COLS- ja ROWS-määritteillä. Tässä on tyypillinen esimerkki tekstialueesta, jonka tekstiruutu on 40 merkkiä leveä 7 rivillä:

Voit lukea tekstialue-ruudun sisällön JavaScriptin avulla. Tämä tehdään arvo-ominaisuuden kanssa. Tässä on esimerkki: