HTML ja CSS aloittelijoille (osa 13): Lomakkeet (1)

Muotoilut määritellään form-elementin avulla. Kaikki elementit, jotka ovat form-elementin sisällä, kuuluvat kyseiseen lomakkeeseen.

<form>
…
</form>

Aloittavassa <form>-elementissä odotetaan action-attribuuttia. Sen avulla määritetään lopulta, mitä lomaketiedoille tapahtuu. Yleensä kyseessä on PHP-sovellus.

<form method="post" action="form.php">
…
</form>

Varmistakaa, että annettu tiedosto voidaan todella löytää. Teidän täytyy siis asettaa oikea polku.

Sen sijaan että käyttäisi skriptiä, voi antaa myös sähköpostiosoitteen.

<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain">
…
</form>

Tässä tapauksessa lomaketiedot lähetetään sähköpostitse. Se ei tosin ole kovin tyylikäs ratkaisu, minkä vuoksi useimmiten turvaudutaan skriptivaihtoehtoon. Jos skriptiä ei ole käytettävissä, lomakkeen lähetyksen voi tarvittaessa hoitaa myös sähköpostitse.

Toinen tärkeä attribuutti form-elementille on method. Sen avulla määritetään HTTP-siirtotapa lomakkeen sisällön lähetykselle. Kaksi eri vaihtoehtoa on käytettävissä.

• post = Lomaketiedot lähetetään tällä kahdessa vaiheessa ilmoitetulle osoitteelle. Ensiksi selain ottaa yhteyden ilmoitettuun osoitteeseen. Jos tämä onnistuu, lomaketiedot siirretään skriptille.

• get = Tässä metodissa lomaketiedot lisätään lomakkeen lopussa olevaan URL-osoitteeseen, joka on määritetty action-attribuutille. Lomaketiedot näkyvät siis myös selaimen osoiterivillä.

Asiaankuuluu tietysti kysymys, kumpaa näistä kahdesta vaihtoehdosta tulisi käyttää lomaketietojen lähetyksessä. Periaatteessa voitte käyttää molempia. Erityisesti kuitenkin suurten datamäärien ja tiedostojen lähettämisen palvelimelle tapauksessa, sinun tulisi kuitenkin valita post.

Yksinkertaiset lomakekentät

Toistaiseksi lomakkeen ulkoinen runko on määritelty. Selaimeen ei kuitenkaan vielä näy itse lomaketta.

<form method="post" action="form.php">
 …
 </form>

Nyt on siis aika täyttää lomake sisällöllä/elämällä.

Varmaankin yleisimmin tarvittu kenttätyyppi on yksirivinen syöttökenttä. Näitä käytetään esimerkiksi nimen, etunimen ja sähköpostiosoitteen kyselyyn. Yksirivaiset syöttökentät määritellään seuraavasti:

<input type="text" name="etunimi" />

input-elementille annetaan attribuutti-arvopari type="text". Lisäksi jokaiselle syöttökentälle tulisi antaa sisäinen tunniste. Tämän tunnisteen tulee olla dokumentissa uniikki. Se on merkityksellinen etenkin silloin, kun lomaketietoja käsitellään skriptin avulla. Tunnisteessa ei tulisi käyttää välilyöntejä eikä erikoismerkkejä.

Kun tarkastelette tulosta selaimessa, seuraava kuva muodostuu:

Kokonaisuus ei näytä kovin vakuuttavalta vielä. Jos kuitenkin napsautatte tekstikenttää, huomaatte voivanne tehdä siihen jo syöttöjä.

Jotta vierailijat tietäisivät, mitä kenttään tulisi syöttää, tarvitaan tietysti vielä nimiö.

Etunimi: <input type="text" name="etunimi" />

Täälläkin selaimeen katsominen tuottaa toivotun tuloksen.

size-attribuutilla voit määrittää kentän leveyden.

Etunimi: <input type="text" name="etunimi" size="30" />
<br />
Postinumero: <input type="text" name="postinumero" size="5" />

size-attribuutille annetaan haluttu kentän leveys.

Kun 5 vastaa tarkalleen viittä merkkiä. Tässä yhteydessä myös maxlength-attribuutti on kiinnostava. Sen avulla määritellään maksimissaan sallittu merkkimäärä, joka voidaan syöttää kenttään. Myös tähän liittyen esimerkki:

Etunimi: <input type="text" name="etunimi" size="30" maxlength="40" />

Jos maxlength-arvon ilmoitetaan olevan suurempi kuin size-arvo, niin pidempien syötteiden kohdalla kentässä tapahtuu automaattista vieritystä.

Attribuutin value avulla voit tehdä kentän oletustäytön.

Etunimi: <input type="text" name="etunimi" value="Nimesi" />

Arvo, joka on määritetty value -attribuuttiin, näytetään kentän oletusarvona.





Käyttäjät voivat poistaa tämän oletusarvon.

Voit estää arvojen poistamisen kentistä. Määritellään syötekenttä, joka ei käytännössä enää ole syötekenttä. Todellisuudessa tällaisia kenttiä käytetään usein tulosteisiin. Tämä voi olla kiinnostavaa esimerkiksi sen tiedon näyttämiseen, joka on määritelty skriptillä. Ajattele vaikkapa laskinta. Voit myös esitäyttää kentän manuaalisesti tekstillä, jonka vierailijat eivät voi enää muuttaa. (Huom: Euron merkkiä ei valitettavasti näytetä oikein PDF-esikatselussa).

<input name="hinta" type="text" value="€ 699.-" readonly />

Jotta kenttä saadaan vain-luetttavaksi, sille määritetään readonly -attribuutti. Taas kerran, tarkastellaan tulosta:





Esitäytetty teksti näkyy suoraan. Sitä ei kuitenkaan voi poistaa.

Määritä salasanakentät

Tunnette tietysti salasanakentät. Kaikkialla, missä rekisteröidytte, teidän on annettava salasana. (Yleensä se on jopa kirjoitettava kahdesti).

Tiedot, jotka on syötetty syötekenttään, eivät ole näkyvissä vaan ne korvataan automaattisesti tähdillä/pisteillä selaimen toimesta. Hyöty tällaisesta tavasta: Ihmiset, jotka saattavat katsoa olkapääsi yli salasanaa kirjoittaessasi, eivät voi selvittää salasanaa. On kuitenkin virheellistä ajatella, että salasanakentät ovat automaattisesti turvallisia. Itse asiassa salasanat välitetään selväkielisinä lomakkeen lähettämisen yhteydessä normaalissa HTTP:ssa.

Salasanakentät määritellään seuraavasti:

<input type="password" name="salasana" />

type -attribuuttiin annetaan arvoksi password. Taas kerran, katsotaan tulosta.





Kun kirjoitat jotain tähän, selaimet tekevät sen näkymättömäksi suoraan syötön aikana.