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: