HTML Guide

Komplet eksempel: Forskellige felter

Nedenfor illustreres et komplet eksempel efterfulgt af al nødvendig markup og styling for at genskabe eksemplet.

Her kan du tilføje eller rette i stamdata.

Alm. felter (fuld bredde)





Vælg blandt følgende:


Vælg en af følgende:*





HTML markup
<form>
<p>Her kan du tilføje eller rette i stamdata.</p>

<div class="fieldset">
  <fieldset>
    <legend><span>Alm. felter (fuld bredde)</span></legend>
    <label class="readonly">Readonly felt:
    <span>Label vises med fed, værdi på samme linie</span></label><br/>
    
    <label class="readonly">Navn:
    <span>Vikki Larsen</span></label><br/>
    <br/>

    <label>Normalt tekst felt <br/>
    <input type="text" class="text" id="email" name="email" value="..."/>
    </label><br/>

    <label>Select felt<span class="req">*</span><br/>
    <select>
      <option value="val">Vælg fra listen</option>
      <option value="val">2. punkt på listen</option>
    </select></label><br/>
    
    <label>Textarea<span class="req">*</span><br/>
    <textarea name="textarea" id="textarea" rows="4" cols="70"></textarea>
    </label><br/>

    
    <p>Vælg blandt følgende:<br/>
    <label>
      <input type="checkbox" id="virk_admin" name="virk_admin"  checked="checked"/>
      Virk administrator
    </label><br/>

    <label>
      <input type="checkbox" id="deaktiveret" name="deaktiveret" /> 
      Deaktiveret (bemærk: en deaktiveret bruger kan ikke logge på systemet)
    </label><br/>
    </p>
  
    <p >Vælg en af følgende:<span class="req">*</span><br/>
    <label>
      <input type="radio" id="v1" name="group_name"/> Enten denne radioknap
    </label><br/>
    <label>
      <input type="radio" id="v2" name="group_name"/> Eller denne 
    </label><br/>
    </p>
  
  <br class="clearfix"/>	

  </fieldset>
</div>
</form>