Lomakkeet: laajempi esimerkki

Taustatiedot

Nimesi

Salasana

Ikäryhmäsi

Alle 20 vuotta
20-39 vuotta
40-59 vuotta
60 vuotta tai enemmän

Mitä kanavia katsot?

Yle TV1
Yle TV2
MTV3
Nelonen

Milloin katsot televisiota?

Voit valita useita

Vapaa palaute

Kerro mielipiteesi

CSS

HTML

<form action="https://appro.mit.jyu.fi/cgi-bin/view.cgi" method="post">
  <fieldset>
    <legend>Taustatiedot</legend>

<p>
      <label for="nimi">Nimesi</label><br />
      <input id="nimi" type="text" name="nimi"
             autocomplete="name" placeholder="Etunimi Sukunimi" />
    </p>

<p>
      <label for="salis">Salasana</label><br />
      <input id="salis" type="password" name="salasana"
             autocomplete="new-password" />
    </p>
  </fieldset>

<fieldset>
    <legend>Ikäryhmäsi</legend>

<p>
      <input id="alle20" type="radio" name="ikaryhma" value="alle20" />
      <label for="alle20">Alle 20 vuotta</label><br />

<input id="v20_39" type="radio" name="ikaryhma" value="20-39" checked="checked" />
      <label for="v20_39">20-39 vuotta</label><br />

<input id="v40_59" type="radio" name="ikaryhma" value="40-59" />
      <label for="v40_59">40-59 vuotta</label><br />

<input id="yli60" type="radio" name="ikaryhma" value="yli60" />
      <label for="yli60">60 vuotta tai enemmän</label>
    </p>
  </fieldset>

<fieldset>
    <legend>Mitä kanavia katsot?</legend>

<input id="nelonen" type="checkbox" name="kanava" value="nelonen" />
      <label for="nelonen">Nelonen</label>
    </p>
  </fieldset>

<fieldset>
    <legend>Milloin katsot televisiota?</legend>

<p>
      <label for="aika">Voit valita useita</label><br />
      <select id="aika" name="aika" multiple="multiple" size="4">
        <option value="aamu">aamulla</option>
        <option value="paiva">päivällä</option>
        <option value="ilta" selected="selected">illalla</option>
        <option value="yo">yöllä</option>
      </select>
    </p>
  </fieldset>

<fieldset>
    <legend>Vapaa palaute</legend>

<p>
      <label for="palaute">Kerro mielipiteesi</label><br />
      <textarea id="palaute" name="palaute" rows="5" cols="40"></textarea>
    </p>
  </fieldset>

CSS

HTML

Javascript

Konsoli