Lomakkeet

HTML lomakkeet ja tiedon syöttäminen


HTML:ssä lomakkeita käytetään erilaisia käyttäjän syötteitä varten.


Esimerkkejä

Text fields
Tekstikentän käyttö HTML-sivulla. Käyttäjä voi syöttää tekstiä tekstikenttään.

Password fields
Salasanakentän käyttö HTML-sivulla.

(lisää esimerkkejä sivun lopussa)


Lomakkeet

Lomake on alue joka sisältää lomake-elementtejä.

Lomake-elementit mahdollistavat käyttäjän syötteiden keräämisen (mm. tekstikenttä, tekstialue, pudotusvalikko, radiobuttonit, checkboxit jne).

Lomake määritellään <form>-tagilla.

<form>    
<input>    
<input>  
</form>

 


Input

Eniten käytetty lomaketagi on <input>-tagi. Input-kentä tyyppi määritetään type-attribuutilla. Seuraavassa on yleisimpien tyyppien selitykset.

Tekstikenttä

Tekstikenttää käytetään kun halutaan syöttää kirjaimia, numeroita jne. vapaassa muodossa.

<form>  First name:   
<input type="text" name="firstname">  
<br>  Last name:   
<input type="text" name="lastname">  
</form>

Edellinen näyttää selaimessa seuraavalta:

First name:
Last name:  

Huomaa, että lomake itsessään ei ole näkyvä, ainoastaan sen sisällä olevat tekstikentät ilmaisevat kyseessä olevan lomakkeen. Useimmissa selaimissa tekstikentän oletuskoko on 20 merkkiä. 

Radio Button

Radio buttoneita käytetään kun valittavana on vain yksi vaihtoehto useista.

<form>  
<input type="radio" name="sex" value="male"> Male  <br>  
<input type="radio" name="sex" value="female"> Female  
</form>

Edellinen näyttää selaimessa seuraavalta:

Male
Female

Huomaa, että vain yksi vaihtoehto voidaan valita.

Valintaruudut

Valintaruutuja (checkbox) käytetään kun valittavissa on useampi kuin yksi vaihtoehto.

<form>  I have a bike:  
<input type="checkbox" name="vehicle" value="Bike">  
<br>  I have a car:   
<input type="checkbox" name="vehicle" value="Car">  
<br>  I have an airplane:   
<input type="checkbox" name="vehicle" value="Airplane">  
</form>

Edellinen näyttää selaimessa seuraavalta:

I have a bike:
I have a car:
I have an airplane:  

Lomakkeen action-attribuutti ja lähetä-painike

Kun käyttäjä painaa lähetä-painiketta (submit button),lähetetään lomakkeen tiedot eteenpäin. Lomakkeen action-attribuutti määrittää minne lomakkeen tiedot lähetetään.

<form name="input" action="html_form_action.asp"  method="get">  
Username:   <input type="text" name="user">  
<input type="submit" value="Submit">  
</form>

Edellinen näyttää selaimessa seuraavalta:

Username:  

Kun edelliseen tekstikenttää kirjoitetaan kirjaimia ja klikataan submit-painiketta, lähetetään lomakkeen tiedot sivulle html_form_action.asp. Kyseinen sivu esittää vastaanotetut tiedot.


Lisää esimerkkejä

Checkboxes
Valintaruutujen käyttö

Radio buttons
Radio buttoneiden käyttö

Simple drop down box
Yksinkertainen pudotusvalikko

Another drop down box
Pudotusvalikko esivalitulla arvolla

Textarea
Tekstialueen käyttö. Tekstialueelle voidaan syöttää rajoittamaton määrämerkkejä usealle eri riville.

Create a button
Painikkeen luominen halutulla tekstillä

Fieldset around data
Reunuksen luominen lomakedatan ympärille.

Lomake-esimerkkejä

Form with input fields and a submit button
Lomakkeen lisääminen sivulla. Lomake sisältää kaksi syötekenttää ja lähetyspainikkeen.

Form with checkboxes
Lomake, joka sisältää kaksi valintaruutua ja lähetyspainikkeen.

Form with radio buttons
Lomake, joka sisältää kaksi radio buttonia ja lähetyspainikkeen.

Send e-mail from a form
Sähköpostin lähettäminen lomakkeesta.


Lomaketagit

Tagi Kuvaus
<form> Määrittää lomakkeen
<input> Määrittää syötekentän
<textarea> Määrittää tekstialueen
<label> Määrittää nimikkeen (label)
<fieldset> Määrittää kenttäjoukon (fieldset)
<legend> Määrittää selitteen (caption) kenttäjoukolle
<select> Määrittää pudotusvalikon (a drop-down box)
<optgroup> Määrittää valintajoukon
<option> Määrittää pudotusvalikon yksittäisen valinnan
<button> Määrittää painikkeen
<isindex> Ei tuettu (deprecated) . Käytä tämän sijaan <input>-tagia.

 


Käyttäkää lomake-tehtävissä lomakkeen action-atribuutille arvoa "http://koudata.fi/print_all.php", niin voitte testata lomakkeitanne helposti.

AttachmentSize
10lomakeharjoituksia.doc57.5 KB