Lomakkeet: fieldset ja legend

CSS

HTML

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

<p>
      <label for="sposti">Sähköpostiosoite</label><br />
      <input id="sposti" type="email" name="sposti"
             autocomplete="email" placeholder="etunimi.sukunimi@example.com" />
    </p>

<p>
      <label for="postinumero">Postinumero</label><br />
      <input id="postinumero" type="text" name="postinumero"
             autocomplete="postal-code" inputmode="numeric"
             pattern="[0-9]{5}" maxlength="5" size="5" />
    </p>
  </fieldset>

<fieldset>
    <legend>Työmatka</legend>

<p>
      <label for="matka">Kuljen työmatkani</label><br />
      <select id="matka" name="matka" multiple="multiple" size="6">
        <option value="hauto">Henkilöautolla</option>
        <option value="bussi" selected="selected">Linja-autolla</option>
        <option value="juna">Junalla</option>
        <option value="pp">Polkupyörällä</option>
        <option value="mp">Moottoripyörällä</option>
        <option value="jalan">Kävellen</option>
      </select>
    </p>
  </fieldset>

CSS

HTML

Javascript

Konsoli