Forms - Mura Docs v6

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: