Forms
While there are many ways to markup forms in HTML, forms in Mura use the following markup conventions, providing basic styles in mura.css for display:
<form id="..." class="form-horizontal" method="post" action="..."> <div class="mura-form-textfield control-group"> <label class="control-label" for="name"> Name </label> <div class="controls"> <input type="text" name="name" value=""> </div> </div> <div class="mura-form-textfield control-group"> <label class="control-label" for="email"> Email </label> <div class="controls"> <input type="text" name="email" data-validate="email"> </div> </div> <div class="mura-form-textarea control-group"> <div class="control-group"> <label class="control-label" for="message"> Message </label> <div class="controls"> <textarea name="message"></textarea> </div> </div> </div> <div class="form-actions buttons"> <input type="submit" class="btn" value="Submit"> </div> </form>
This convention is based, in part, on a SitePoint article by Cameron Adams and the Bootstrap 2.0 framework. An excellent book on the subject is Luke Wroblewski's Web Form Design: Filling in the Blanks. For more information, see: