Forms

A regular form should be built with a div layout. Mandatory fields are marked with an asterisk after the colon. All labels are left aligned. 

<div class="basic-form">
  <form action="#" method="post">
  <div>
  
    <div class="form-row"><label for="field465">Namn:*</label>
      <div class="input-text-container"><input type="text" id="field465" name="field465" value="" /></div>
    </div>
    
    <div class="form-row"><label for="field467">E-post:</label>
      <div class="input-text-container"><input type="text" id="field467" name="field467" value="" /></div>
    </div>
    
    <div class="form-row form-checkbox basic-form-contact-email">
    <div class="input-checkbox-container"> <label for="field464">
      <input type="checkbox" id="field464" name="field464" value="true" /> Kontakta mig via e-post</label></div>
    </div>
    
    <div class="form-row"><label for="field466">Telefon dagtid:</label>
      <div class="input-text-container"><input type="text" id="field466" name="field466" value="" /></div>
    </div>
    
    <div class="form-row"><label for="field382">Meddelandet avser:*</label>
      <div class="select-container">
        <select id="field382" name="field382">
          <option>Felanmälan</option>
          <option>Fråga</option>
          <option>Synpunkt</option>
          <option>Övrigt</option>
        </select>
      </div>
    </div>
    
    <div class="form-row"><label for="field326">Meddelande:*</label>
    <div class="textarea-container"><textarea id="field326" name="field326" rows="10" cols="50"></textarea></div>
    </div>
    <div class="basic-form-buttons">
      <input type="submit" name="_ok" value="Skicka" class="input-button" /> 
      <input type="submit" name="_cancel" value="Avbryt" class="input-button" />
    </div>
  </div>
  </form>
</div>

Rendered result:

Validation Messages

Form validation should, regardless if it is client side or server side validation, be marked with a message at the top stating that the user must correct the form, and with an individual message above each field that must be corrected.

<div class="basic-form">
  <div class="alert">Vänligen korrigera uppgifter nedan. Klicka sedan på "Skicka" igen.</div>
    <form action="#" method="post">
    <div>
    
      <div class="form-row"><label for="field465">Namn:*</label>
        <div class="input-text-container"><input type="text" id="field465" name="field465" value="" /></div>
      </div>

      <div class="form-row">
      <div class="alert-field">
        <p>Fältet "E-post" måste vara korrekt ifyllt</p>
      </div>
      
      <label for="field467">E-post:</label>
        <div class="input-text-container"><input type="text" id="field467" name="field467" value="" /></div>
      </div>
      
      <div class="form-row form-checkbox basic-form-contact-email">
      <div class="input-checkbox-container"> <label for="field464">
        <input type="checkbox" id="field464" name="field464" value="true" /> Kontakta mig via e-post</label></div>
      </div>
      
      <div class="form-row"><label for="field466">Telefon dagtid:</label>
        <div class="input-text-container"><input type="text" id="field466" name="field466" value="" /></div>
      </div>
      
      <div class="form-row">
      <label for="field382">Meddelandet avser:*</label>
        <div class="select-container">
          <select id="field382" name="field382">
            <option />
            <option selected="selected">Felanmälan</option>
            <option>Fråga</option>
            <option>Synpunkt</option>
            <option>Övrigt</option>
          </select>
        </div>
      </div>
      
      <div class="form-row">
      <div class="alert-field">
        <p>Fältet "Meddelande" får inte vara tomt</p>
      </div>
      
      <label for="field326">Meddelande:*</label>
      <div class="textarea-container"><textarea id="field326" name="field326" rows="10" cols="50"></textarea></div>
    </div>
    <div class="basic-form-buttons">
      <input type="submit" name="_ok" value="Skicka" class="input-button" /> 
      <input type="submit" name="_cancel" value="Avbryt" class="input-button" />
    </div>
  </div>
  
  </form>
</div>

Rendered result:

Vänligen korrigera uppgifter nedan. Klicka sedan på "Skicka" igen.

Fältet "E-post" måste vara korrekt ifyllt

Fältet "Meddelande" får inte vara tomt

Senast ändrad: 2011-03-06 11:59