Mura CMS

• Documentation
•  » Developer Guides
•  » Front End Development
•  » Markup Conventions
•  » Forms

Forms

While there are many ways to mark up forms in HTML, forms in Mura use the following markup conventions, providing basic styles in default.css for display.

<form name="contactFrm" method="post" class="twoColumn">
	<fieldset>
	<legend>Your Information</legend>
		<ol>
			<li>
				<label for="txtNameFirst">First Name<span class="required">*</span></label>
				<input required="true" name="FirstName" class="text" id="txtNameFirst" message="The First Name field is required." value="" />
			</li>
			
			<li>
				<label for="txtNameLast">Last Name<span class="required">*</span></label>
				<input value="" message="The Last Name field is required." id="txtNameLast" class="text" name="LastName" required="true" />
			</li>
			
			<li>
				<label for="txtOrg">Organization</label>
				<input value="" id="txtOrg" class="text" name="Organization" />
			</li>
			
			<li>
				<label for="txtTel">Phone Number</label>
				<input value="" id="txtTel" class="text" name="Phone" />
			</li>
			
			<li class="last"><label for="txtEmail">Email Address<span class="required">*</span></label>
			<input id="txtEmail" class="text" name="Email" value="" />
			</li>
		</ol>
	</fieldset>
	
	<fieldset>
	<legend>Your Message</legend>
		<ol>
			<li>
				<label for="txtMessage">Message<span class="required">*</span></label>
				<textarea name="Question" cols="50" id="txtMessage"></textarea>
			</li>
		</ol>
	</fieldset>
	<p class="required">Required Fields</p>
	<div class="buttons"><input type="submit" value="Submit" name="Submit" class="submit" /></div>
</form>

This convention is based in part, on this SitePoint article by Cameron Adams. An excellent book on the subject is Luke Wroblewski's Web Form Design.