Esimerkkilomake valintaruudun ja valintanapin käytöstä

Seuraavassa esimerkissä kannattaa erityisesti kiinnittää huomiota seuraaviin asioihin:

Valintanappi (radio) on yksivalintainen.
Valintaruutu (checkbox) on monivalintainen.
Samaan ryhmään kuuluviin valintanapeihin ja -ruutuihin määritellään sama name-attribuutin arvo.
Valintanappiryhmän yksi kenttä on oletuksena valittu.

Label ennen lomake-elementtejä

Lomake-elementit ennen labelia

Ensimmäisen lomakkeen lähdekoodi

<form action="http://appro.mit.jyu.fi/cgi-bin/laheta/laheta.cgi"
method="post">

<fieldset><legend>Sukupuoli</legend> 

<p>
  <label for="ei_tietoa">Ei tietoa</label> 
  <input id="ei_tietoa" type="radio" name="sex" value="ei_tietoa" checked="checked" />
  <br />
  <label for="mies">Mies</label> 
  <input id="mies" type="radio" name="sex" value="mies" /> 
  <br />
  <label for="nainen">Nainen</label>
  <input id="nainen" type="radio" name="sex" value="nainen" /></p>
</fieldset>

<fieldset><legend>Millaisessa seurassa tykkään
shoppailla?</legend> 

<p>
  <label for="avio">Paremman puoliskoni kanssa</label> 
  <input id="avio" type="checkbox" name="shoppaus" value="puolisko" /><br />

  <label for="perhe">Koko perheen kanssa</label> 
  <input id="perhe" type="checkbox" name="shoppaus" value="perhe" /><br />

  <label for="kamut">Kavereiden kanssa</label> 
  <input id="kamut" type="checkbox" name="shoppaus" value="kamut" /><br />

  <label for="visa">Yksin Visan kanssa</label> 
  <input id="visa" type="checkbox" name="shoppaus" value="visa" /><br />
</p>
</fieldset>

<p><input type="submit" value="Lähetä" /></p>
</form>

Jälkimmäisen lomakkeen lähdekoodi

<form action="http://appro.mit.jyu.fi/cgi-bin/laheta/laheta.cgi"
method="post">

<fieldset><legend>Sukupuoli</legend> 

<p>
<input id="ei_tietoa2" type="radio" name="sex" value="ei_tietoa" checked="checked" />
<label for="ei_tietoa2">Ei tietoa</label> 
<br />
<input id="mies2" type="radio" name="sex" value="mies" /> 
<label for="mies2">Mies</label> 
<br />
<input id="nainen2" type="radio" name="sex" value="nainen" />
<label for="nainen2">Nainen</label>
</p>
</fieldset>

<fieldset><legend>Millaisessa seurassa tykk&auml;&auml;n
shoppailla?</legend> 

<p>
<input id="avio2" type="checkbox" name="shoppaus" value="puolisko" />
<label for="avio2">Paremman puoliskoni kanssa</label> 
<br />

<input id="perhe2" type="checkbox" name="shoppaus" value="perhe" />
<label for="perhe2">Koko perheen kanssa</label> 
<br />

<input id="kamut2" type="checkbox" name="shoppaus" value="kamut" />
<label for="kamut2">Kavereiden kanssa</label> 
<br />

<input id="visa2" type="checkbox" name="shoppaus" value="visa" />
<label for="visa2">Yksin Visan kanssa</label> 
<br />
</p>
</fieldset>
<p><input type="submit" value="L&auml;het&auml;" /></p>
</form>

http://