Tredun ohjelmistokehittäjien kurssimateriaaleja
HTML-lomakkeiden avulla käyttäjä voi syöttää tietoa käsiteltäväksi. Syötetty tieto käsitellään lähetetään käsiteltäväksi webbipalvelimelle ellei oletustoiminnallisuutta ohiteta ja tietoa käsitellä JavaScript-koodilla suoraan selaimessa.
Lomakkeen sisältämät syötekentät sijoitetaan <form>-tagin sisälle. Jos lomake käsitellään php:n avulla webbipalvelimella, form-tagin action-attribuutiksi laitetaan tietoa käsittelevän php-tiedoston nimi. Oletuksena käytetään get-metodia, jossa syötetyt tiedot näkyvät osoitekentässä (jonka pituus on rajallinen). Jos tietoa lähetetään paljon tai jos se pitää pitää piilossa, täytyy method-attribuutiksi asettaa post.
<form action="somePHPpage.php" method="post">
...
</form>
Jos lomakkeen tiedot käsitellään JavaScript:in avulla, voidaan sen onSubmit-attribuuttiin lisätä tiedon kästittelevän JS funtion nimi (tämä voidaan tehdä myös JS-koodin avulla).
<form onSubmit="someJSfunc()">
...
</form>
Lomakkeen voi lähettää painamalla enter:iä, mutta usein sivulla on myös submit-tyyppinen nappi tai input-kenttä.
Tietoa voi kirjoittaa <input>-kenttään. Kentän toimintaa voi säätää määrittämällä sille type-attribuutti (text/number/radio/checkbox/submit/…). Jos kenttä on pakollinen sille voi antaa attribuutin required.
input-kentällä on aina oltava name-attribuutti, jos sen sisältämät tiedot halutaan lähettää palvelimelle. Kenttään voi myös lisäksi esitäyttää arvon value-attribuutin avulla tai antaa maksimipituuden (maxlength).
Lähetysnapin saa tehtyä kun type-attribuutin asettaa arvoon “submit”.
Tavallisen tekstikentän saa, kun type-attribuutiksi asettaa “text”:
Etunimi: <input type="text" name="firstname" value="John" maxlength=30>
Ikä: <input type="number" name="age">
<input type="submit" value="Lähetä">
Radionappi-tyyppisen valinnan saa aikaan asettamalla type:ksi “radio”. Eri valinnat ryhmittyvät yhteen, kun niille antaa saman nimen, yhden kentän voi lisäksi määritellä valmiiksi valituksi (checked).
<input type="radio" name="gender" value="man">Mies<br>
<input type="radio" name="gender" value="female">Nainen<br>
<input type="radio" name="gender" value="other" checked>Muu<br>
Valintaruutu-tyyppisen valinnan saa aikaan asettamalla type:ksi “checkbox”. checkbox-tyyppiset input-kentät ryhmitellään myös name-attribuutin avulla. Myös tässä valittu arvo on “checked”:
<input type="checkbox" name="transport1" value="bike"> Tulen kouluun pyörällä<br>
<input type="checkbox" name="transport2" value="car"> Tulen kouluun autolla<br>
<input type="checkbox" name="transport3" value="buss"> Tulen kouluun bussilla<br>
<input type="checkbox" name="transport4" value="onfoot" checked> Tulen kouluun kävellen<br>
input-tyyppejä on muitakin. kokeile näitä:
Napin voi tehdä button-elementin avulla. Siihen voi liittää JavaScript-funktiokutsun onClick-attribuuttiin:
<button type="button" onClick="someJSFunc()">Paina tästä</button>
Suurempi tekstialue määritellään textarea:n avulla.
<textarea name="message" rows="5" cols="30">
Tähän voi kirjoittaa paljon tekstiä...
</textarea>
Pudotusvalikon voi tehdä select-elementin ja option-tagien avulla:
<select name="mobile">
<option value="android">Android</option>
<option value="iphone">iPhone</option>
<option value="ipad">iPad</option>
<option value="other">Muu</option>
</select>
Toinen tapa on tehdä se datalist:in avulla. Ensin määritellään input-elementti, jonka tyyppi on “list”. Sille määritellään vaihtoehdot datalist:in avulla.
<input list="mobiledevices">
<datalist id="mobiledevices">
<option value="Android">
<option value="iPhone">
<option value="iPad">
<option value="Other">
Taulukon elementit voidaan ryhmitellä fieldset:in avulla ja niille voidaan antaa myös otsikko legend:
<fieldset>
<legend>Henkilötiedot</legend>
Nimi: <input type="text"><br>
Puhelinnumero: <input type="text"><br>
</fieldset>