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.
